CSS 代表層疊樣式表。它用于設(shè)置 HTML 元素的樣式。 HTML 用于創(chuàng)建網(wǎng)頁(yè)或向網(wǎng)頁(yè)添加內(nèi)容。之后，開(kāi)發(fā)人員使用 CSS 以特定樣式呈現(xiàn) HTML 內(nèi)容，使其看起來(lái)很棒。
CSS規(guī)則集主要包含兩部分。一個(gè)是 CSS 選擇器，另一個(gè)是聲明塊。
CSS選擇器用于選擇HTML元素，聲明塊包含鍵值格式的CSS屬性以應(yīng)用于HTML元素。
語(yǔ)法
用戶可以按照以下語(yǔ)法使用 CSS 規(guī)則集來(lái)設(shè)置 HTML 元素的樣式。
selector {
/* declaration block */
}
登錄后復(fù)制
在上面的語(yǔ)法中，‘selector’可以是HTML元素的類(lèi)名、id等，用于選擇HTML元素。聲明塊包含多個(gè) CSS 屬性及其值以應(yīng)用于 HTML 元素。
示例 1（CSS 類(lèi)名選擇器）
在下面的示例中，我們?cè)诙x CSS 規(guī)則集時(shí)使用類(lèi)名稱(chēng)作為 CSS 選擇器。下面的代碼中有三個(gè) div 元素，其中包含不同的類(lèi)名。我們通過(guò)類(lèi)名選擇了每個(gè) div 元素，并應(yīng)用了不同的 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>
登錄后復(fù)制
示例 2（CSS ID 選擇器）
在下面的示例中，我們?cè)诙x CSS 規(guī)則集時(shí)使用 HTML 元素的 id 作為 CSS 選擇器。在 HTML 中，兩個(gè)元素永遠(yuǎn)不能包含相同的 id。
這里，我們有一個(gè) id 為“card”的 div 元素，其中包含另外兩個(gè) id 等于“content1”和“content2”的 div 元素。我們通過(guò)通過(guò) ID 訪問(wèn)所有 HTML 元素來(lái)設(shè)置它們的樣式，用戶可以在輸出中觀察到這些元素。
<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>
登錄后復(fù)制
示例 3（CSS 多重選擇器）
在下面的示例中，我們使用多個(gè) CSS 選擇器一次性將相同的 CSS 樣式應(yīng)用于多個(gè) HTML 元素。
我們有三個(gè)具有不同類(lèi)名和 ID 的
元素。在 CSS 中，我們使用“.text1、.text2、#para1”CSS 選擇器將聲明塊中添加的相同樣式應(yīng)用到所有 HTML 元素。
此外，我們還使用類(lèi)名稱(chēng)和 ID CSS 選擇器分別選擇了所有三個(gè) HTML 元素，以便在不同元素上應(yīng)用不同的樣式。
<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>
登錄后復(fù)制
示例 4（CSS 嵌套元素選擇器）
在下面的例子中，我們介紹了CSS的嵌套選擇器。在 HTML 中，div 元素包含多個(gè)類(lèi)名為“l(fā)ink”的 元素。
在 CSS 中，我們使用了“div .link”CSS 選擇器，它選擇類(lèi)名為“l(fā)ink”的所有 HTML 元素以及 div 元素的后代。如果我們使用“div.link”作為 CSS 選擇器，它會(huì)將樣式應(yīng)用于所有類(lèi)名為“l(fā)ink”的 div 元素。因此，“div.link”和“div .link”都是不同的 CSS 選擇器。
在輸出中，用戶可以觀察到 CSS 樣式應(yīng)用于所有 HTML 元素，這些元素是 div 元素的后代，但未應(yīng)用于 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>
登錄后復(fù)制
示例 5（CSS 偽選擇器）
在此示例中，我們演示了 CSS 偽選擇器的使用。 CSS 偽選擇器有很多種，我們?cè)谶@里使用了其中的一些。
這里，我們有一個(gè)“container”div 元素，其中包含 4 個(gè)具有“element”類(lèi)名稱(chēng)的子元素。當(dāng)用戶將鼠標(biāo)懸停在 div 元素上時(shí)，我們使用“:hover”偽選擇器來(lái)更改“container”div 元素的背景顏色。
之后，我們使用 ‘:first-child’、’:last-child’ 和 ‘:nth-child()’ CSS 選擇器以及 ‘.element’ 選擇器來(lái)選擇第一個(gè)子元素、最后一個(gè)子元素，和第n個(gè)孩子，分別。
在輸出中，用戶可以觀察到不同的 CSS 樣式應(yīng)用于第一個(gè)子項(xiàng)、最后一個(gè)子項(xiàng)和第二個(gè)子項(xiàng)。
<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>
登錄后復(fù)制
用戶在本教程中學(xué)習(xí)了如何使用不同的 CSS 規(guī)則集。我們使用類(lèi)名和 id 作為選擇器。此外，我們還學(xué)習(xí)了使用多個(gè) CSS 選擇器和嵌套 CSS 選擇器。在上一個(gè)示例中，我們學(xué)習(xí)了如何使用 CSS 規(guī)則集中的偽選擇器。
以上就是CSS規(guī)則集有什么用？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
