CSS简介

小灰灰 2024-04-06 13:26 98阅读 0赞

**目录**

1、什么是CSS？

2、怎么在html文件中嵌入CSS？

3、内联定义（内联样式）

4、定义内部样式块对象（内部样式）

5、链入外部样式表文件（外部样式）

6、CSS中常见选择器

notes:选择器的优先级：id>class>标签

--------------------

### 1、什么是CSS？ ###

Cascading Style Sheet 层叠样式表，用来修饰html。

### 2、怎么在html文件中嵌入CSS？ ###

第一种方式：内联定义 （内联样式）

第二种方式：定义内部样式块对象（内部样式）

第三种方式：链入外部样式表文件（外部样式）

### 3、内联定义（内联样式） ###

<标签 **style="属性名：属性值；属性名：属性值；"**></标签>

### 4、定义内部样式块对象（内部样式） ###

<!DOCTYPE  HTML>
    
    <html>
    
        <head>
    
        <meta charset="utf-8">
    
        <title></title>
        
        <style>
        
        选择器{
    
            属性名：属性值；
        
            属性名：属性值；
    
            属性名：属性值；
    
            }
    
        </style>
    
        </head>
    
        <body>
    
        </body>
    
    </html>

### 5、链入外部样式表文件（外部样式） ###

![65455e0791d84369abbae39def573f4a.png][]

### 6、CSS中常见选择器 ###

*  标签选择器

![a558e56953cc4b019928c4e66220af0b.png][]

*  id选择器

以\#开头

![76e615526bc84ee5a6b0d80c900dd0e3.png][]

*  class选择器

以**.**开头

![ed0e8f6ba2c64fff8ede49b836799df8.png][]

### notes:选择器的优先级：id>class>标签 ###

[65455e0791d84369abbae39def573f4a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/1235e5469cdf4e939efc3364beeca32d.png
[a558e56953cc4b019928c4e66220af0b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/aad2fb5a03024e3dbbc4fc9e336399e0.png
[76e615526bc84ee5a6b0d80c900dd0e3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/89782cde055f450b864869578d4de0ba.png
[ed0e8f6ba2c64fff8ede49b836799df8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/61382a261c5e4ce080dc3ff0957e784d.png