資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究CSS 規則集有什麼用？
CSS 代表層疊樣式表 (Cascading Style Sheet)。它用於設定 HTML 元素的樣式。HTML 用於建立網頁或向網頁新增內容。之後，開發者使用 CSS 來呈現 HTML 內容的特定樣式，使其看起來更美觀。
CSS 規則集主要包含兩部分。一個是 CSS 選擇器，另一個是宣告塊。
CSS 選擇器用於選擇 HTML 元素，宣告塊包含鍵值對格式的 CSS 屬性，應用於 HTML 元素。
語法
使用者可以按照以下語法使用 CSS 規則集來設定 HTML 元素的樣式。
selector {
/* declaration block */
}
在上面的語法中，“選擇器”可以是 HTML 元素的類名、ID 等，用於選擇 HTML 元素。宣告塊包含多個 CSS 屬性及其值，應用於 HTML 元素。
示例 1（CSS 類名選擇器）
在下面的示例中，我們在定義 CSS 規則集時使用了類名作為 CSS 選擇器。下面的程式碼中有三個 div 元素，包含不同的類名。我們透過其類名選擇了每個 div 元素，並應用了不同的 CSS 樣式，使用者可以在輸出中觀察到。
<html>
<head>
<style>
.one {
background-color: red;
color: white;
padding: 10px;
margin: 10px;
border: 1px solid green;
}
.two {
background-color: green;
color: white;
padding: 10px;
margin: 10px;
border: 3px solid yellow;
}
.three {
background-color: blue;
color: white;
padding: 10px;
margin: 10px;
border: 2px solid pink;
}
</style>
</head>
<body>
<h2> Using the <i> class selector </i> in CSS ruleset </h2>
<div class = "one"> One </div>
<div class = "two"> Two </div>
<div class = "three"> Three </div>
</body>
</html>
示例 2（CSS ID 選擇器）
在下面的示例中，我們在定義 CSS 規則集時使用了 HTML 元素的 ID 作為 CSS 選擇器。在 HTML 中，兩個元素永遠不能包含相同的 ID。
這裡，我們有一個 ID 為“card”的 div 元素，其中包含另外兩個 ID 分別為“content1”和“content2”的 div 元素。我們透過訪問其 ID 來設定所有 HTML 元素的樣式，使用者可以在輸出中觀察到。
<html>
<head>
<style>
#card {
width: 140px;
height: 300px;
background-color: grey;
border-radius: 12px;
border: 2px solid red;
display: flex;
justify-content: space-between;
flex-direction: column;
}
#content1 {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 12px;
color: white;
border: 2px solid red;
margin: 20px;
}
#content2 {
width: 100px;
height: 100px;
color: white;
background-color: blue;
border-radius: 12px;
border: 2px solid red;
margin: 20px;
}
</style>
</head>
<body>
<h2> Using the <i> id selector </i> in CSS ruleset </h2>
<div id = "card">
<div id = "content1"> HTML </div>
<div id = "content2"> CSS </div>
</div>
</body>
</html>
示例 3（CSS 多個選擇器）
在下面的示例中，我們使用了多個 CSS 選擇器來一次性對多個 HTML 元素應用相同的 CSS 樣式。
我們有三個 <p> 元素，具有不同的類名和 ID。在 CSS 中，我們使用了“`.text1, .text2, #para1`” CSS 選擇器，將宣告塊中新增的相同樣式應用於所有 HTML 元素。
此外，我們還分別使用類名和 ID CSS 選擇器選擇了所有三個 HTML 元素，以便對不同的元素應用不同的樣式。
<html>
<head>
<style>
.text1,
.text2,
#para1 {
margin: 10px;
height: auto;
padding: 10px;
width: 200px;
}
.text1 {
background-color: red;
color: white;
font-size: 2rem;
}
.text2 {
background-color: green;
color: red;
font-size: 1.7rem;
}
#para1 {
background-color: blue;
color: white;
font-size: 1rem;
}
</style>
</head>
<body>
<h2> Using the <i> Multiple selector </i> in CSS ruleset </h2>
<p class = "text1"> This is the first paragraph </p>
<p class = "text2"> This is a second paragraph. </p>
<p id = "para1"> This is the third paragraph. </p>
</body>
</html>
示例 4（CSS 巢狀元素選擇器）
在下面的示例中，我們介紹了 CSS 的巢狀選擇器。在 HTML 中，div 元素包含多個類名為“link”的 <a> 元素。
在 CSS 中，我們使用了“`div .link`” CSS 選擇器，它選擇所有類名為“link”且是 div 元素後代的 HTML 元素。如果我們使用“`div.link`”作為 CSS 選擇器，它會將樣式應用於所有類名為“link”的 div 元素。“`div.link`”和“`div .link`”是兩個不同的 CSS 選擇器。
在輸出中，使用者可以觀察到 CSS 樣式應用於所有 <a> HTML 元素（它們是 div 元素的後代），但沒有應用於 div 元素之外的元素。
<html>
<head>
<style>
div .link {
color: red;
text-decoration: none;
}
</style>
</head>
<body>
<h2> Using the <i> nested selectors </i> in CSS ruleset </h2>
<div>
<a href = "#" class = "link"> Link1 </a>
<a href = "#" class = "link"> Link2 </a>
<a href = "#" class = "link"> Link3 </a>
</div><br>
<a href = "#" class = "link"> Link 5 </a>
</body>
</html>
示例 5（CSS 偽選擇器）
在這個示例中，我們演示瞭如何使用 CSS 偽選擇器。有各種 CSS 偽選擇器，我們在這裡使用了一些。
這裡，我們有一個名為“container”的 div 元素，其中包含 4 個類名為“element”的子元素。我們使用了“:hover”偽選擇器來更改當使用者將滑鼠懸停在 div 元素上時，“container”div 元素的背景顏色。
之後，我們使用“:first-child”、“:last-child”和“:nth-child()” CSS 選擇器以及“.element”選擇器分別選擇第一個子元素、最後一個子元素和第 n 個子元素。
在輸出中，使用者可以觀察到不同的 CSS 樣式應用於第一個子元素、最後一個子元素和第二個子元素。
<html>
<head>
<style>
.container {
height: 100px;
width: 500px;
background-color: blue;
padding: 10px;
display: flex;
justify-content: space-around;
border-radius: 12px;
font-size: 1.2rem;
}
/* hover pseudo class */
.container:hover {
background-color: red;
}
/* first child pseudo class */
.element:first-child {
background-color: green;
color: white;
}
/* last child pseudo class */
.element:last-child {
background-color: grey;
color: black;
}
/* nth child pseudo class */
.element:nth-child(2) {
background-color: pink;
color: green;
}
</style>
</head>
<body>
<h2> Using the <i> pseudo selectors </i> in CSS ruleset </h2>
<div class = "container">
<div class = "element"> First Child </div>
<div class = "element"> Second Child </div>
<div class = "element"> Third Child </div>
<div class = "element"> Fourth Child </div>
</div>
</body>
</html>
在本教程中，使用者學習瞭如何使用不同的 CSS 規則集。我們使用了類名和 ID 作為選擇器。此外，我們還學習瞭如何使用多個 CSS 選擇器和巢狀 CSS 選擇器。在最後一個示例中，我們學習瞭如何在 CSS 規則集中使用偽選擇器。
458 次瀏覽
