CSS規則集有什麼用？-css教學-PHP中文網

首頁

web前端

css教學

CSS規則集有什麼用？

PHPz

Sep 09, 2023 pm 04:01 PM

CSS規則集有什麼用？

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 id="Using-the-i-class-selector-i-in-CSS-ruleset"> 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 id="Using-the-i-id-selector-i-in-CSS-ruleset"> 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 id="Using-the-i-Multiple-selector-i-in-CSS-ruleset"> 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 id="Using-the-i-nested-selectors-i-in-CSS-ruleset"> 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 id="Using-the-i-pseudo-selectors-i-in-CSS-ruleset"> 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中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除