CSS：選擇器和屬性

第二講：選擇器與屬性

在本次講座中，我們將深入探討 CSS 的構建塊：選擇器和屬性。這些是基本概念，可讓您定位網頁上的特定元素並有效地設計它們。

---

什麼是 CSS 選擇器？

CSS 選擇器是用來選擇要設定樣式的 HTML 元素的模式。不同類型的選擇器可讓您根據標籤、類別、ID、屬性等將樣式套用至各種元素。

選擇器的類型

1. 元素（型）選擇器：

   • 針對特定類型的所有元素。
   • 範例：

    p {
      color: green;
    }
   

   這將改變所有

   的顏色元素變為綠色。

2. 類別選擇器：

   • 針對具有特定類別屬性的元素。
   • 範例：

    .highlight {
      background-color: yellow;
    }
   

   在 HTML 中，任何帶有 class="highlight" 的元素都會有黃色背景。
   

    <p class="highlight">This is highlighted text.</p>
   

3. ID 選擇器：

   • 針對具有唯一 ID 屬性的單一元素。
   • 範例：

    #header {
      font-size: 24px;
    }
   

   只有 id="header" 的元素才會有 24px 的字體大小。
   

    <div id="header">Welcome to My Website</div>
   

4. 組選擇器：

   • 將相同的樣式套用至多個選擇器。
   • 範例：

    h1, h2, h3 {
      color: blue;
    }
   

   此規則將使所有

   、

   和

   藍色元素。

5. 後代選擇器：

   • 定位其他元素（其後代）內部的元素。
   • 範例：

    div p {
      font-style: italic;
    }
   

   這將使所有

   內的元素斜體。
   

    <div>
      <p>This text is italicized because it's inside a div.</p>
    </div>
   

   理解 CSS 屬性

   CSS 屬性定義您想要設定所選元素的哪些方面的樣式。每個屬性後面都有一個指定所需結果的值。

   範例屬性：

   • 顏色：

     • 設定文字顏色。
     • 範例：

     h1 {
       color: red;
     }
     

   • 背景顏色：

     • 設定背景顏色。
     • 範例：

     body {
       background-color: #f0f0f0;
     }
     

   • 字體大小：

     • 設定文字的大小。
     • 範例：

     p {
       font-size: 16px;
     }
     

   • 保證金：

     • 設定元素外部的空間。
     • 範例：

     .box {
       margin: 20px;
     }
     

   • 填充：

     • 設定元素內部內容和邊框之間的空間。
     • 範例：

     .content {
       padding: 10px;
     }
     

   實際範例：

   讓我們將所學內容與一個簡單的範例結合。

   HTML：
   

   8ca2b4eb17525146e680c309e9dfa6a5
     4a249f0d628e2318394fd9b75b4636b1Welcome to CSS Basics473f0a7621bec819994bb5020d29372a
     03c914392195facb4bb03ef129401e65This is an introduction to CSS selectors and properties.94b3e26ee717c64999d7867364b1b4a3
     e388a4556c0f65e1904146cc1a846beeSelectors help you target elements, and properties allow you to style them.94b3e26ee717c64999d7867364b1b4a3
   16b28748ea4df4d9c2150843fecfba68
   

   CSS：
   

   /* ID Selector */
   #container {
     border: 2px solid black;
     padding: 10px;
   }
   
   /* Element Selector */
   h1 {
     color: purple;
   }
   
   /* Class Selector */
   .intro {
     background-color: lightblue;
     font-size: 18px;
   }
   
   /* Group Selector */
   h1, p {
     font-family: Arial, sans-serif;
   }
   
   /* Descendant Selector */
   #container p {
     margin-bottom: 15px;
   }
   

   在此範例中：

   • #container div 的樣式帶有黑色邊框和填滿。

   • ;標題為紫色。

   • 包含課程介紹的段落有淺藍色背景和較大的字體。
   • 都

     ;

     元素使用 Arial 字型。

   • #container 內的所有段落都有間距的下邊距。

   練習運動

   1. 建立一個包含標題、段落和 div 的簡單 HTML 檔案。
   2. 嘗試不同的選擇器和屬性來設計您的內容。
   3. 嘗試使用後代選擇器來設定巢狀元素的樣式。
   4. 使用分組選擇器將相同的樣式套用於多個元素。

   ---

   下一步： 在下一課中，我們將探索CSS 盒子模型 並了解邊距、邊框、內邊距和內容如何組合在一起來定義您的佈局網頁元素。再見！

   跟著我繼續——

   LinkedIn- Ridoy Hasan

   -

以上是CSS：選擇器和屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！