CSS規則集有什麼用？
- PHPz轉載
- 2023-09-09 16:01:021224瀏覽
CSS 代表層疊樣式表。它用於設定 HTML 元素的樣式。 HTML 用於建立網頁或在網頁上新增內容。之後，開發人員使用 CSS 以特定樣式呈現 HTML 內容，使其看起來很棒。
CSS規則集主要包含兩部分。一個是 CSS 選擇器，另一個是聲明區塊。
CSS選擇器用於選擇HTML元素，宣告區塊包含鍵值格式的CSS屬性以套用於HTML元素。
文法
使用者可以依照下列語法使用 CSS 規則集來設定 HTML 元素的樣式。
selector {
/* declaration block */
}
在上面的語法中，‘selector’可以是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 選擇器一次將相同的 CSS 樣式套用到多個 HTML 元素。
我們有三個具有不同類別名稱和 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」的 元素。
在 CSS 中，我們使用了「div .link」CSS 選擇器，它選擇類別名為「link」的所有 HTML 元素以及 div 元素的後代。如果我們使用「div.link」作為 CSS 選擇器，它會將樣式套用到所有類別名為「link」的 div 元素。因此，「div.link」和「div .link」都是不同的 CSS 選擇器。
在輸出中，使用者可以觀察到 CSS 樣式套用於所有 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」類別名稱的子元素。當使用者將滑鼠懸停在 div 元素上時，我們使用“:hover”偽選擇器來更改“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 規則集中的偽選擇器。
以上是CSS規則集有什麼用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！