（CSS入门）css语法+选择器

约定不等于承诺〃 2022-09-02 13:51 223阅读 0赞

# CSS 简介 #

*  CSS 指的是层叠样式表\* (Cascading Style Sheets)
 *  CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
 *  CSS 节省了大量工作。它可以同时控制多张网页的布局
 *  外部样式表存储在 CSS 文件中

body {
        
      background-color: lightblue;
    }
    
    h1 {
        
      color: white;
      text-align: center;
    }
    
    p {
        
      font-family: verdana;
      font-size: 20px;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyMjkwNDM2_size_16_color_FFFFFF_t_70]

# CSS 语法 #

CSS 规则集（rule-set）由选择器和声明块组成：  
![在这里插入图片描述][4b302e5a744c471384892665788fee68.png]选择器指向您需要设置样式的 HTML 元素。  
声明块包含一条或多条用分号分隔的声明。  
每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。  
多条 CSS 声明用分号分隔，声明块用花括号括起来。  
eg：  
在此例中，所有

元素都将居中对齐，并带有红色文本颜色：

p {
      color: red;
      text-align: center;
    }

# CSS 选择器 #

## CSS 元素选择器 ##

元素选择器根据元素名称来选择 HTML 元素。  
在这里，页面上的所有

元素都将居中对齐，并带有红色文本颜色：

<!DOCTYPE html>
    <html>
    <head>
    <style>
    p {
      text-align: center;
      color: red;
    } 
    </style>
    </head>
    <body>
    
    <p>每个段落都会受到样式的影响。</p>
    <p id="para1">我也是！</p>
    <p>还有我！</p>
    
    </body>
    </html>

![在这里插入图片描述][fd231da20aa640d4999a602c42b6e4e5.png]

## CSS id 选择器 ##

id 选择器使用 HTML 元素的 id 属性来选择特定元素。  
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！  
要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

!DOCTYPE html>
    <html>
    <head>
    <style>
    #para1 {
        
      text-align: center;
      color: red;
    }
    </style>
    </head>
    <body>
    
    <p id="para1">Hello World!</p>
    <p>本段不受样式的影响。</p>
    
    </body>
    </html>

![在这里插入图片描述][89f8ef654b9049f1ba333072167c5958.png]

## CSS 类选择器 ##

类选择器选择有特定 class 属性的 HTML 元素。  
如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。  
在此例中，所有带有 class=“center” 的 HTML 元素将为红色且居中对齐：

<!DOCTYPE html>
    <html>
    <head>
    <style>
    .center {
        
      text-align: center;
      color: red;
    }
    </style>
    </head>
    <body>
    
    <h1 class="center">居中的红色标题</h1>
    <p class="center">居中的红色段落。</p> 
    
    </body>
    </html>

![在这里插入图片描述][035bb5be11f14351b56d403a308eff26.png]

## CSS 通用选择器 ##

通用选择器（\*）选择页面上的所有的 HTML 元素。

下面的 CSS 规则会影响页面上的每个 HTML 元素：

<!DOCTYPE html>
    <html>
    <head>
    <style>
    * {
        
      text-align: center;
      color: blue;
    }
    </style>
    </head>
    <body>
    
    <h1>Hello world!</h1>
    
    <p>页面上的每个元素都会受到样式的影响。</p>
    <p id="para1">我也是！</p>
    <p>还有我！</p>
    
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyMjkwNDM2_size_16_color_FFFFFF_t_70 1]

## CSS 分组选择器 ##

分组选择器选取所有具有相同样式定义的 HTML 元素。

<!DOCTYPE html>
    <html>
    <head>
    <style>
    h1, h2, p {
        
      text-align: center;
      color: red;
    }
    </style>
    </head>
    <body>
    
    <h1>Hello World!</h1>
    <h2>更小的标题</h2>
    <p>这是一个段落。</p>
    
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyMjkwNDM2_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyMjkwNDM2_size_16_color_FFFFFF_t_70]: /images/20220829/f3d0930cf94d4632b3cb083253dbd781.png
[4b302e5a744c471384892665788fee68.png]: /images/20220829/f9e6a9b5a3724114aafc948f2191cd4b.png
[fd231da20aa640d4999a602c42b6e4e5.png]: /images/20220829/bbf1a1af73d944949dbd6028d7b335be.png
[89f8ef654b9049f1ba333072167c5958.png]: /images/20220829/b517b02ecac940ec8ac042ca94ab46a7.png
[035bb5be11f14351b56d403a308eff26.png]: /images/20220829/617d68cf9f614c6399c0ff9fd537685a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyMjkwNDM2_size_16_color_FFFFFF_t_70 1]: /images/20220829/4b575a47a56b45fbbb2f021f02843928.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyMjkwNDM2_size_16_color_FFFFFF_t_70 2]: /images/20220829/8e74971d414a4e0a9eeeb5546954015c.png