Css学习

一、初识Css

1.Css介绍

Css:层叠样式表（Cascading style sheets）

2.Css语法规则

Css写在style标签中，style标签一般写在head标签里面，title标签下面

3.Css引入方式

1.内嵌式

Css写在style标签中

2.外联式

Css写在一个单独的.css文件中

3.行内式

Css写在标签的style属性中

二、选择器

1.标签选择器

格式：标签名 {css属性名：属性值； }
作用：通过标签名，找到页面中所有这类标签，设置样式
注意：
- 标签选择器选择的是一类标签，而不是单独某一个
- 标签选择器无论嵌套关系有多深，都能找到对应的标签

2.类选择器

格式：.类名{css属性名：属性值；}
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意：
- 所有标签上都有class属性，class属性的属性组称为类名
- 类名可以由数字、字母、下划线、中划线组成，但不能以数字或中划线开头
- 一个标签可以同时有多个类名，类名之间以空格隔开
- 类名可以重复，一个类选择器可以同时选中多个标签

3.id选择器

格式：#id属性值{css属性名：属性值；}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意：
- 所有标签上都有id
- id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
- 一个标签上只能有一个id属性值
- 一个id选择器只能选中一个标签

4.通配符选择器

格式：*****{css属性名：属性值；}
作用：找到页面所有的标签，设置样式
注意
- 开发中使用少，只会在特殊情况下才会用到

5.后代选择器

作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
格式：选择器1(父类选择器)+ 空格 + 选择器2(后代选择器){Css}
结果：
- 在选择器1所找到标签的后代（儿子、孙子、重孙子……）中，找到满足选择器2的标签，设置样式
注意点：
- 后代包括：儿子、孙子、重孙子……
- 后代选择器中，选择器与选择器之前通过空格隔开

6.子代选择器

作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素
格式：选择器1(父类选择器) > 选择器(子代选择器){Css}
结果：
- 在选择器1所找到标签的子代(儿子)中，找到满足选择器2的标签，设置样式
注意：
- 子代选择器：儿子（只包括父类的后一代）
- 子代选择器中，选择器与选择器之间通过 > 隔开

7.并集选择器

作用：同时选择多组标签，设置相同的样式
格式：选择器1 ，选择器2{Css}
结果：
- 找到选择器1和选择器2选中的标签，设置样式
注意：
- 并集选择器中的每组选择器之间通过，(逗号) 分隔
- 并集选择器中的每组选择器可以是基础选择器或者复合选择器
- 并集选择器中的每组选择器通常一行写一个，提高代码的可读性

8.交集选择器

作用：选中页面中同时满足多个选择器的标签
格式：选择器1选择器2{Css}（选择器之间无空格隔开）
结果：
- 找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式
注意：
- 交集选择器中的选择器之间是紧挨着的，不能分隔
- 交集选择器中如果有标签选择器，标签选择器必须写在最前面

9.hover伪类选择器

作用：选中鼠标悬停在元素上的状态，设置样式
格式：选择器：hover{Css}
注意：
- 伪类选择器选中的是元素的某种状态

10.结构伪类选择器

作用：根据元素在HTML的结构关系查找元素
应用场景：常用于查找某父级选择器中的子元素
优势：减少对于HTML中类的依赖，有利于保持代码整洁
格式：
- E:first-child{ } ：匹配父元素中第一个子元素，并且是E元素。
- E:last-child{ }：匹配父元素中最后一个子元素，并且是E元素。
- E:nth-child(n){ }：匹配父元素中第n个子元素，并且是E元素。
- E:nth-last-child(n){ }：匹配父元素中倒数第n个子元素，并且是E元素。
  - 注意：n 除了可以为数字外，还可以为数学公式，如：
    
    功能公式
    偶数 2n、even
    奇数 2n+1、2n-1、odd
    找到前5个 -n+5
    找到从第5个往后 n+5

功能	公式
偶数	2n、even
奇数	2n+1、2n-1、odd
找到前5个	-n+5
找到从第5个往后	n+5

11.伪元素

应用场景：一般页面中的非主体内容可以使用伪元素
区别：
- 元素：HTML设置的标签
- 伪元素：由CSS模拟出的标签效果
种类：
- 父元素 + ::before
  - 作用：在父元素内容的最前添加一个伪元素
- 父元素 + ::after
  - 作用：在父元素内容的最后添加一个伪元素
注意：
- 必须设置content属性才能生效
- 伪元素默认是行内元素

三、字体与文本样式

3.1、字体样式

1.字体大小

属性名：font-size
取值：数字 + px
注意：
- 谷歌浏览器默认文字大小是16px
- 单位需要设置，否则无效

2.字体粗细

属性名：font-weight
取值：
- 关键字：
  - 正常：normal
  - 加粗：bold
- 纯数字：（100~900的整百数）
  - 正常：400
  - 加粗：700
注意：
- 不是所有字体都提供九种粗细，因此部分取值页面中无变化
- 实际开发中以：正常、加粗两种取值使用最多

3.字体样式

属性名：font-style
取值：
- 正常（默认）：normal
- 倾斜：italic

4.字体类型

属性名：font-family
取值：微软黑雅、黑体、宋体……
渲染规则：
- 从左往右按照顺序查找，如果系统中未安装该字体，则显示下一个字体
- 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
注意：
- 如果字体名称中存在多个单词，推荐使用引号包裹
- 最后一项字体系列不需要用引号包裹
- 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

5.font属性

属性名：font
取值：
- font：style weight size family
省略要求：
- 只能省略前两个，如果省略了相当于设置了默认值
注意：如果需要同时设置单独和连写形式
- 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写的里面

3.2、文本样式

1.文本缩进

属性名：text-indent
取值：
- 数字+px
- 数字+em (1em = 当前标签的font-size的大小)

2.文本水平对齐方式

属性名：text-align
取值：
- left：左对齐
- center：居中对齐
- right：右对齐
注意：
- 如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

3.文本修饰

属性名：text-decoration
取值：
- underline：下划线
- line-through：删除线
- overline：上划线
- none：无装饰线
注意：
- 开发中会使用text-decoration：none；清除a标签默认的下划线

4.行高

属性名：line-height
作用：控制一行的上下间距
取值：
- 数字 + px
- 倍数（当前标签font-size的倍数）
应用：
- 让单行文本垂直居中可以设置line-height：文字父元素高度
- 网页精准布局时，会设置line-height：1 可以取消上下间距
行高与font连写的注意：
- 如果同时设置了行高和font连写，注意覆盖问题
- font：style weight size/line-height family;

5.拓展

1.颜色

属性名：
- 文字颜色：color
- 背景颜色：background-color
属性值：
- 关键字：red、green、bule……
- rgb：红绿蓝三原色，每项取值范围（0~255），如rgb(0，0，0)
- rgba：红绿蓝三原色 + a表示透明度，a的取值范围（0~1），如rgba(255，255，255，0.5)
- 十六进制表示法：#开头，将数字转换成十六进制表示，如#000000，简写#000

2.margin

margin：0 auto 可以实现div、p、h水平居中
注意：
- 如果需要让div、p、h（大盒子）水平居中，直接给当前元素本身设置即可
- margin：0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度

四、背景

1.背景颜色

属性名：background-color
属性值：
- 颜色取值：关键字、rgb表示法、ragba表示法、十六进制……
注意：
背景颜色默认是透明：rgba(0，0，0，0)
背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

2.背景图片

属性名：background-image
属性值：background-image：url(“图片的路径”);
注意：
- 背景图片中url中可以省略引号
- 背景图片默认是在水平和垂直方向平铺的
- 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

3.背景平铺

属性名：background-repeat
属性值：
- repeat：水平和垂直方向都平铺（默认值）
- no-repeat：不平铺
- repeat-x：沿水平方向平铺
- repeat-y：沿垂直方向平铺

4.背景位置

background-position
属性值：background-position：水平方向位置，垂直方向位置；
- 方位名词：
  - 水平方向
    - left
    - center
    - right
  - 垂直方向
    - top
    - center
    - bottom
- 数字+px（坐标）
  - 坐标系
    - 原点(0,0)
    - x轴
    - y轴
注意：
- 方位名词取值和坐标取值可以混合使用，第一个取值表示水平方向，第二个取值表示垂直方向

5.background连写形式

属性名：background
形式：
- 如：background：color image repeat position
注意：
- 如果需要设置单独的样式和连写
  - 要么把单独的样式写在连写的下面
  - 要么把单独的样式写在连写的里面

五、元素显示模式

1.块级元素

显示特点：
- 独占一行（一行只能显示一个）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高
代表标签：
- div、p、h系列、ul、li、dl、dt、dd、form、header、nav……

2.行内元素

显示特点：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高
代表标签
- a、span、b、i、s、strong、ins、em、del……
注意
- margin 和 padding 对行内标签的垂直位置不生效
  - 解决方案：使用 line-height 改变标签的垂直位置

3.行内块元素

显示特点：
- 一行可以显示多个
- 可以设置宽高
代表标签
- input、textarea、button、select……
- 特殊情况：Img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

4.元素显示模式转换

目的：改变元素默认的显示模式，让元素符合布局要求
语法：
- display：block
  - 作用：转换成块级元素
- display：inline-block
  - 作用：转换成内块元素
- display：inline
  - 转换成行内元素

5.拓展

块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素……
- 但是p标签中不要嵌套div、p、h等块级元素
a标签内部可以嵌套任意元素
- 但是a标签不能嵌套a标签

六、CSS三大特性

1.继承性

子元素有默认继承父元素样式的特点
可以继承的常见属性（文字控制属性都可以继承）
- color
- font-style、font-weight、font-size、font-family
- text-indent、text-align
注意：
- 可以通过调试工具判断样式是否可以继承
拓展：
- 继承失效情况：
  - 如果元素有浏览器默认样式，此时继承性依然存在，但是继承会失效
    - 1. a标签的color会继承失效
      2. h系列标签的font-size会失效

2.层叠性

特性：
- 给同一个标签设置不同的样式——>此时样式会层叠叠加——>会共同作用在标签上
- 给同一个标签设置相同的样式——>此时样式会层叠覆盖——>最终写在最后的样式会生效
注意：
- 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

3.优先级

特性：不同的选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器的样式
优先级顺序：
- 继承 < 通配符 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
注意点：
- !important写在属性值后面，分号的前面！
- !important不能提升继承的优先级，只要是继承，它的优先级就最低
- 实际开发中不建议使用!important
权重叠加计算
- 应用场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
- 优先级比较顺序（复合选择器中）：
  - 行内样式个数（第一级） > id选择器个数（第二级） > 类选择器个数（第三级）> 标签选择器个数（第四级）
- 比较规则：
  - 从第一级开始依次往后比较，如果前面的比较出来了，就停止比较
  - 比较后，如果所有等级的数字相同，表示优先级相同，则比较层叠性
- 注意：!important所在处如果不是继承，则权重最高！继承权重最低！

七、盒子模型

1、盒子模型的介绍

1.概念：

页面中的每一个标签，都可以看做是一个 “盒子”，通过盒子的视角更方便的进行布局
浏览器在渲染网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子

2.定义：

CSS中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成

3.结构分析

内容区域
- 内容的宽度和高度
  - 作用：利用width和height属性默认设置是盒子内容区域的大小
  - 属性：width/height
  - 常见取值：数字+px
边框
- 属性名：border
- 属性值：数字+px
- 连写形式
  - 属性名：border
  - 属性值：单个取值的连写，取值之间以空格隔开，如 border：10px solid red;
- 常用线属性：
  - solid：实线
  - dashed：虚线
  - dotted：点线
- 单方向设置（只给盒子某个方向设置边框）
  - 属性名：border-方位名词，如 border-right：属性值
  - 属性值：连写的取值
- 单个属性
  - 作用：给设置边框粗细、边框样式、边框颜色效果
  - 单个属性：
    
    作用属性名属性值
    边框粗细 border-width 数字+px
    边框样式 border-style solid、dashed、dotted
    边框颜色 border-color 颜色取值

作用	属性名	属性值
边框粗细	border-width	数字+px
边框样式	border-style	solid、dashed、dotted
边框颜色	border-color	颜色取值

内边距
- 属性
  - padding 可以连写多个属性值，每个属性值表示某个方向的内边距
- 属性值
  - 四值：
    - 方向：上、右、下、左
    - 举例：padding : 10px 30px 20px 80px; 表示上边距10px，右边距30px，下边距20px，左边距10px。
  - 三值：
    - 方向：上、左右、下
    - 举例：padding : 10px 30px 80px; 表示上边距10px，右边距和左边距30px，下边距80px。
  - 两值：
    - 方向：上下、左右
    - 举例：padding : 10px 80px;表示上边距和下边距10px，右边距和左边距80px。

自动内减
- 属性名：box-sizing
- 属性值：border-box
- 应用场景：CSS盒子中使用了border或padding使盒子被撑大，border-sizing: border-box 的使用会使盒子减去被撑大的部分
外边距
- 属性名：margin
- 属性值：
  - 数字+px
- 单个方向属性：
  - margin-right：右边距
  - margin-left：左边距
  - margin-top：上边距
  - margin-bottom：下边距
- 注意要点：
  - 合并现象
    - 场景：垂直布局的块级元素，上下的margin合并
    - 结果：最终两者距离为margin的最大值
    - 解决方法：只给其中一个盒子设置margin
  - 塌陷问题
    - 场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上
    - 结果：导致父元素一起往下移动
    - 解决方法：
      - 给父元素设置border-top 或者 padding-top 来分隔父子元素的margin-top
      - 给父元素设置overflow：hidden（优解）
      - 转换成行内块元素
      - 设置浮动

八、浮动

1、标准流

标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
常见标准流排版规则：
- 块级元素：从上往下，垂直布局，独占一行
- 行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

2、浮动

属性名：float
属性值：left、right、bottom、top……
格式：float:left
作用：网页布局
特点：
- 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
- 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
- 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
- 浮动元素有特殊的显示效果
  - 一行可以显示多个
  - 可以设置宽高
注意：
- 浮动的元素不能通过text-align:center或者margin:0 auto
拓展：
- CSS书写顺序：（提高浏览器的执行效率）
  - 浮动 / display
  - 盒子模型：margin border padding 宽度高度背景色
  - 文字样式
清除浮动
- 含义：清除浮动带来的影响
  - 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
- 原因：
  - 子元素浮动后脱标 -> 不占位置
- 目的：
  - 需要父元素有高度，从而不影响其他网页元素的布局
- 方法：
  1. 直接法
  - 操作：
    - 直接给父元素加高度
  - 缺点：有些布局中不能固定父元素高度
  1. 额外标签法
  - 操作：
    1. 在父元素内容的最后添加一个块级元素
    2. 给添加的块级元素设置 clear:both
  - 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
  1. 单伪元素清除法
  - 格式：
    - 选择器:: after{content: ''; display: block; clear: both }
  - 操作：用伪元素代替额外标签
  - 优点：项目中使用，直接给标签加类即可清除浮动
  1. 双伪元素清除法
  - 格式：
    - 选择器:: before,选择器:: after{ content: ''; display: }
      
      选择器:: after{ clear: both ;}
  1. 给父级设置overflow : hidden（最简单）
  - 操作：直接给父级设置 overflow : hidden

九、定位

1、网页常见布局方式

标准流
- 块级元素独占一行，垂直布局
- 行内元素/行内块元素一行显示多个，水平布局
浮动
- 可以让原本垂直布局的块级元素变成水平布局
定位
- 可以让元素自由摆放在网页的任意位置
- 一般用于盒子之间的层叠情况

2、定位的使用

设置定位方式
- 属性名：position
- 常见属性值：
  - 静态定位：static
  - 相对定位：relative
  - 绝对定位：absolute
  - 固定定位：fixed
设置偏移值
- 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
- 选取的原则一般是就近原则
  - 水平方向：
    1. 属性名：left
    - 属性值：数字 + px
    - 含义：距离左边的距离
    1. 属性名：right
    - 属性值：数字 + px
    - 含义：距离右边的距离
  - 垂直方向：
    1. 属性名：top
    - 属性值：数字 + px
    - 含义：距离上边的距离
    1. 属性名：bottom
    - 属性值：数字 + px
    - 含义：距离下边的距离

3、相对定位

含义：相对于自己之前的位置进行移动
格式：position:relative
特点：
1. 需要配合方位属性实现移动
2. 相对于自己原来位置进行移动
3. 在网页中占位置 → 没有脱标
注意：先写right则后写的left不生效，先写top则后写的bottom失效。

4、绝对定位

含义：相对于非静态定位的父元素进行定位移动
格式：position:absolute
特点：
1. 需要配合方位属性实现移动
2. 默认相对于浏览器可视区域进行移动
3. 在网页中不占位置 → 已经脱标
注意：在absolute下盒子设置margin: 0 auto 水平居中失效，若想让盒子水平居中，可使用left: 50% ; margin: -盒子长度的一半；
子绝父相：在子元素中使用了绝对定位，一般在父元素中使用相对定位

5、固定定位

含义：相对于浏览器进行定位移动
格式：position:fixed
特点：
1. 需要配合方位属性实现移动
2. 相对于浏览器可视区域进行移动
3. 在网页中不占位置 → 已经脱标
效果：让盒子固定在屏幕中某个位置

6、元素的层级关系

不同布局方式元素的层级关系：
- 标准流 < 浮动 < 定位
不同定位之间的层级关系：
- 相对、绝对、固定默认层级相同，此时HTML写在下面的元素层级更高，会覆盖上面的元素。
z-index ：
- 格式：z-index: 整数
- 默认情况下为0，z-index后跟的整数越大，就越先显示。（配合定位生效）

7、基线

定义：浏览器文字类型元素排版中存在用于对齐的基线
垂直对齐方式
- 属性名：vertical-align
- 属性值：
  - baseline：默认，基线对齐
  - top：顶部对齐
  - middle：中部对齐
  - bottom：底部对齐
- 注意：浏览器在处理行内和行内块标签时，当作文字处理默认按基线对齐
光标类型
- 应用场景：设置鼠标光标在元素上时显示的样式
- 属性名：cursor
- 常见属性值：
  - default：默认值，通常是小箭头
  - pointer：小手效果，提示用户可以点击
  - text：工字型，提示用户可以选择文字
  - move：十字光标，提示用户可以移动
边框圆角
- 属性名：border-radius
- 常见属性值：数字 + px、百分比
- 赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角。
溢出部分显示效果
- 定义：盒子内容部分所超出盒子范围的区域
- 属性名：overflow
- 常见属性值：
  - visible：默认值，溢出部分可见
  - hidden：溢出部分隐藏
  - scroll：无论是否溢出，都显示滚动条
  - auto：根据是否溢出，自动显示或隐藏滚动条
元素本身隐藏
- 常见属性：
  - visibility：hidden
  - display：none
- 区别：
  - visibility：占位隐藏
  - display：不占位隐藏
元素整体透明度
- 应用场景：让元素整体（包括内容）一起变透明
- 属性名：opacity
- 属性值：0~1之间的数字
  - 1：表示完全不透明
  - 0：表示完全透明
- 注意：opacity 会让元素整体变透明，包括里面的内容，如：文字，子元素……

十、拓展

1、精灵图

介绍：
- 定义：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
- 优点：减少服务器发送次数，减轻服务器的压力，提高网页加载速度
使用步骤
1. 创建一个盒子，设置盒子的尺寸和小图尺寸相同
2. 将精灵图设置为盒子的背景图片
3. 修改背景图位置
  
  通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y

2、背景图大小

格式：background-size：宽度高度
作用：设置背景图片的大小
属性值：
- 数字 + px：常用
- 百分比：相对于当前盒子自身的宽高百分比
- contain：包含，将背景图片等比例缩放，直到不会超出盒子的最大
- cover：覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白

3、background连写

连写形式：background：color image repeat position/size;
注意：background-size和background连写同时设置时，需要注意覆盖问题
解决：
1. 单独的样式写连写下面
2. 单独的样式写在连写里面

4、盒子阴影

属性名：box-shadow
属性值：
- h-shadow：必须，水平偏移量。允许负值
- v-shadow：必须，垂直偏移量。允许负值
- blur：可选，模糊度
- spread：可选，阴影扩大
- color：可选，阴影颜色
- inset：可选，将阴影改为内部阴影

5、过渡

属性名：transition
常见属性值：
- 过渡的属性：all：所有能过渡的属性都过渡、具体属性名，如：width：只有width有过渡
- 过渡的时长：数字 + s(秒)
注意：
1. 过渡条件：默认状态和hover状态样式不同，才能有过渡效果
2. transition属性给需要过渡的元素本身加
3. transition属性设置在不同状态中，效果不同
  - 给默认状态设置，鼠标移入移出都有过渡效果
  - 给hover状态设置，鼠标移入有过渡效果，移出没有

6、骨架结构标签

DOCTYPE文档说明

文档类型声明，告诉浏览器该网页的HTML版本
注意：DOCTYPE需要写在页面的第一行，不属于HTML标签

网页语言

标识网页使用的语言
作用：搜索引擎归类 + 浏览器翻译
常见语言：zh-CN 简体中文 / en 英文

字符编码

标识网页使用的字符编码
作用：保存和打开的字符编码需要统一设置，否则可能会出现乱码
常见字符编码：
1. UTF-8：玩过码，国际化的字符编码，收录了全球语言的文字
2. GB2312：6000+ 汉字
3. GBK：20000+ 汉字
注意：开发中统一使用UTF-字符编码即可

7、SEO

1.SEO简介

SEO（Search Engine Optimization）：搜索引擎优化
作用：让网站在搜索引擎上的排名靠前
提升SEO的常见方法：
- 竞价排名
- 将网页制作成HTML后缀
- 标签语义化

2.SEO三大标签

title：网页标题标签
description：网页描述标签
keywords：网页关键词标签

8、ico图标设置

应用场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标
代码形式：
- <link rel="shortcut icon" href="ico图标路径" type="image/x-ico">
注意：ico图标一般放在根目录下

Css学习

一、初识Css

1.Css介绍

2.Css语法规则

3.Css引入方式

二、选择器

1.标签选择器

2.类选择器

3.id选择器

4.通配符选择器

5.后代选择器

6.子代选择器

7.并集选择器

8.交集选择器

9.hover伪类选择器

10.结构伪类选择器

11.伪元素

三、字体与文本样式

3.1、字体样式

1.字体大小

2.字体粗细

3.字体样式

4.字体类型

5.font属性

3.2、文本样式

1.文本缩进

2.文本水平对齐方式

3.文本修饰

4.行高

5.拓展

四、背景

1.背景颜色

2.背景图片

3.背景平铺

4.背景位置

5.background连写形式

五、元素显示模式

1.块级元素

2.行内元素

3.行内块元素

4.元素显示模式转换

5.拓展

六、CSS三大特性

1.继承性

2.层叠性

3.优先级

七、盒子模型

1、盒子模型的介绍

1.概念：

2.定义：

3.结构分析

八、浮动

1、标准流

2、浮动

九、定位

1、网页常见布局方式

2、定位的使用

设置定位方式

设置偏移值

3、相对定位

4、绝对定位

5、固定定位

6、元素的层级关系

7、基线

十、拓展

1、精灵图

2、背景图大小

3、background连写

4、盒子阴影

5、过渡

6、骨架结构标签

7、SEO

8、ico图标设置