引入方式

1、内联样式：直接写在html标签内部

格式： <标签名 style="样式名1:样式值1;样式名2:样式值2;"></标签名>

 <div style="width: 150px;height: 150px;"></div>        

2、内部式：使用比较多

格式： 选择器 样式块

        <style>
            选择器{
                样式名1:样式值1;
                样式名2:样式值2;
            }
        </style>                        

3、外部链接式（用的最多）

            <link rel="stylesheet" href="url地址">
```### 4、外部导入式：

          <style>        
            @import url("url地址");
          </style>

复制代码

### CSS的注释：/* 代码 */

# css选择器

### 1、标记选择器

#### css标签选择器就是来声明标签的

h1{ color: red ; } p{ color: green; } 复制代码

### 2、通用选择器

#### 用"*"表示，他对所有的元素都有效

*{ color:red; }

复制代码

### 3、id选择器

#### #+名称 格式：#+名称{属性值1：值1；属性值2：值2；....}

#div{ color:red; }

复制代码

### 4、类选择器

#### 类选择器和ID选择器很相似，但是类选择器是".+名称"

4、类选择器

类选择器和ID选择器很相似，但是类选择器是".+名称"

.div{
    color:red;
}

6、子选择器：只能选择作为某种元素的子元素，子元素选择器使用大括号只找自己的子元素

语法：E1>E2{属性1：属性值1；属性2：属性值2}

7、后代选择器：又称为包含选择器，可以自己选择作为某元素的后代（外层标记在前，内层标记在后）

语法 E1 E2{属性1：属性值1；属性2：属性值2}### 8、相邻选择器：两个元素具有同一个父元素，两个元素紧紧相连

语法；E1+E2{属性1：属性值1；属性2：属性值2}

!image.png 父元素： 直接包含其他元素，这个元素就是包含元素的父元素 先元素：包含其他元素，这个元素就是包含元素的祖先元素  子元素： 直接被包含的元素，这个被包含的元素就是包含元素的子元素  后代元素： 被包含的元素，这个被包含的元素就是包含元素的后代元

9、伪类选择器

CSS伪类是用来添加一些选择器的特殊效果。

语法伪类的语法：

selector:pseudo-class {property:value;} CSS类也可以使用伪类： selector.class:pseudo-class {property:value;} 注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 注意：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。 注意：伪类的名称不区分大小写。