第二讲：选择器和属性

在本次讲座中，我们将深入探讨 CSS 的构建块：选择器和属性。这些是基本概念，可让您定位网页上的特定元素并有效地设计它们。

什么是 CSS 选择器？

CSS 选择器是用于选择要设置样式的 HTML 元素的模式。不同类型的选择器允许您根据标签、类、ID、属性等将样式应用于各种元素。

选择器类型

1. 元素（类型）选择器：

   • 定位特定类型的所有元素。
   • 例子：

    p {
      color: green;
    }
   

   这会将所有

   元素的颜色更改为绿色。

2. 类选择器：

   • 定位具有特定类属性的元素。
   • 例子：

    .highlight {
      background-color: yellow;
    }
   

   在 HTML 中，任何带有 class="highlight" 的元素都将具有黄色背景。
   

    
   This is highlighted text.
   

3. ID选择器：

   • 定位具有唯一 ID 属性的单个元素。
   • 例子：

    #header {
      font-size: 24px;
    }
   

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

    
   Welcome to My Website
   

4. 组选择器：

   • 对多个选择器应用相同的样式。
   • 例子：

    h1, h2, h3 {
      color: blue;
    }
   

   此规则将使所有

   、

   和

   元素变为蓝色。

5. 后代选择器：

   • 定位其他元素内部（后代）的元素。
   • 例子：

    div p {
      font-style: italic;
    }
   

   这将使

   内的所有

   元素变为斜体。
   

    
   
      
   This text is italicized because it's inside a div.
    
   

   理解 CSS 属性

   CSS 属性定义您想要设置所选元素的哪些方面的样式。每个属性后跟一个指定所需结果的值。

   示例属性：

   • 颜色：

     • 设置文本颜色。
     • 例子：

     h1 {
       color: red;
     }
     

   • 背景颜色：

     • 设置背景颜色。
     • 例子：

     body {
       background-color: #f0f0f0;
     }
     

   • 字体大小：

     • 设置文本大小。
     • 例子：

     p {
       font-size: 16px;
     }
     

   • 利润：

     • 设置元素外部的空间。
     • 例子：

     .box {
       margin: 20px;
     }
     

   • 填充：

     • 设置元素内部内容和边框之间的空间。
     • 例子：

     .content {
       padding: 10px;
     }
     

   实际例子：

   让我们结合我们所学到的知识和一个简单的例子。

   HTML:
   

   
     
   Welcome to CSS Basics
     
   This is an introduction to CSS selectors and properties.
     
   Selectors help you target elements, and properties allow you to style them.
   
   

   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

   -