bottle Shen
bottle Shen

CSS与CSS3知识点复习整理

**本篇文章食用的简单说明**

本篇文章为复习CSS与CSS3进行了知识点梳理，其中标题十部分在文章《HTML与HTML5知识点复习整理》中已经包括（有标注），加粗部分为重点！！！加粗加红为重重点！！！

由于CSS涉及过多，本篇文章只是大概部分，一些技巧和移动端知识在后续过程中会继续更新，欢迎小伙伴在评论区补充~

推荐大家按记忆梳理部分的内容自行回忆知识点，如有遗忘部分在左下方目录处点击相应部分可以进行跳转。

又是努力学习前端的一天，希望大家共同进步~~~（QAQ我只是一个表情）❤

***记忆梳理***

一、CSS是什么，用来做什么

二、CSS引入方式

三、CSS基础选择器

  1. 包括几种，它们的作用
  2. 区别

四、CSS复合选择器

  1. 包括几种，它们的作用

五、CSS新增选择器

  1. 包括几种，它们的作用
  2. 选择器权重
  3. 三大特性

六、字体属性

  1. 字体
  2. 字号
  3. 字体粗细
  4. 字体样式
  5. 字体连写

七、文本属性

  1. 文本颜色
  2. 文本对齐
  3. 文本缩进
  4. 文本修饰
  5. 行高:单行文字垂直居中的代码*

八、背景属性

  1. 背景颜色
  2. 背景图像
  3. 背景平铺
  4. 背景图片位置
  5. 背景附着
  6. 背景色半透明
  7. 背景复合写法

九、注释

十、HTML元素分类与元素转换/CSS元素显示模式（《HTML与HTML5知识点复习整理》中已经包括）

  1. 元素分类
  2. 元素转换

十一、网页布局

  1. 盒子模型
  2. 外边距应用、块级行内行内块的居中方式
  3. 标准流
  4. 浮动
  5. 定位

十一、CSS3新特性

  1. 图片模糊
  2. 函数自动计算
  3. 过渡

十二、元素的显示与隐藏

  1.  包括几种，它们的作用，区别

一、CSS指层叠样式表(Cascading Style Sheets)，美化HTML，解决布局问题。解释：以多种方式规定样式信息，样式表定义如何显示 HTML 元素。

二、CSS引入方式---"多种方式"

2.1 外部方式

优先级： > @import

(1)链接：一边加载数据，一边优化，视觉效果好。

(2)导入：@import：先加载数据，再加载样式，可能造成数据先显示，样式还在加载。

 

2.2 内部方式

2.3 行内方式/内联方式:直接在HTML元素内使用style，优先级最大，不推荐

我是h1标题，还记得我吗QAQ

优先级：行内样式>外部样式=内部样式（后两者“就近原则”，以最后出现的为准）

三、CSS基础选择器

3.1 标签选择器：用 HTML 标签名称作为选择器，选出所有相同的标签，权重为1

3.2 class类选择器:可以选出1个或多个标签，权重为10

class="box">我是一个盒子

多类名:多个类名中间必须用空格分开,这个标签就可以分别具有这些类名的样式,较多使用

class="类名1 类名2">我是一个盒子

3.3 id选择器:一次只能选择一个标签，id 属性在每个 HTML 文档中只能出现一次

id="box">我是一个盒子

3.4  * 通配符选择器：选择所有标签

3.5 类选择器与id选择器的区别

类选择器一个标签可以起多个名字，一个名字可以多个标签使用，修改样式中使用多。

id选择器唯一不得重复，经常与JavaScript搭配使用。

四、CSS复合选择器

4.1 派生选择器：根据上下文关系来确定某个标签的样式

(1)后代选择器：元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可

我是一个正常的h2标题

我是一个粉色的h2标题

(2)>子元素选择器：选择它下一级全部的亲儿子,元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器


我是 h1 标签！ 变为粉色


我是 h1 标签！ 不变色

(3)+相邻兄弟选择器：选择紧接在另一个元素后的元素，而且二者有相同的父元素。

4.2 , 并集选择器:选择某些相同样式的元素，集体声明

4.3 : 伪类选择器

        4.3.1 链接伪类选择器:请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active

        4.3.2 :focus 伪类选择器:用于选取获得焦点(光标)的表单元素

五、CSS3新增选择器

5.1 属性选择器：根据元素特定属性选择元素，权重为10

E[att]：选择具有att属性的E元素

E[att = "val"]：选择具有att属性且值等于val的E元素

E[att^ = "val"]：选择具有att属性且值等于val开头的E元素

E[att$ = "val"]：选择具有att属性且值等于val结尾的E元素

E[att* = "val"]：选择具有att属性且值中含有等于val的E元素

5.2 结构伪类选择器：根据文档结构来选择元素，权重为10

E:first-child 匹配父元素第一个子元素E

E:last-child 匹配父元素最后一个子元素E

E:nth-child(n) 匹配父元素第n个子元素E

E:first-of-type(n) 指定类型E的第一个元素

E:last-of-type(n) 指定类型E的最后个元素

E:nth-of-type(n) 指定类型E的第n个元素

        5.2.1 E:nth-child(n) 匹配父元素第n个子元素E

                 （1）n可以是数字，关键字和公式

                 （2）n里面数字从1开始

                 （3）关键字：even偶数，odd奇数

                 （4）常见公式：从0开始，但是第0个元素或超出个数会忽略

                         2n 偶数，2n+1 奇数，5n 5的倍数，n+5 从第五个（包含第5个）到最后，-n+5 前五个（包含第5个）...

5.3 nth-child和nth-of-type区别

nth-child对父元素里面所有孩子排序选择（序号固定），先找到第n个孩子，查看是否匹配

nth-of-type对父元素里面指定子元素排序选择，先匹配，后找第n个孩子

5.4 ::伪元素选择器：新创建的元素在文档树中找不到，称为伪元素

        5.4.1 ::before和::after：创建一个元素，但属于行内元素，必须有content属性，权重为1

                    ::before在元素内部的前面插入内容，但属于行内元素

                    ::after在元素内部的后面插入内容，但属于行内元素

5.4.1 清除浮动的方法

（1）额外标签法/隔墙法：在最后一个浮动的子元素后面添加一个额外/空标签。

（2）父级添加overflow属性：overflow:hidden/auto/scroll.但无法显示溢出部分。

**伪元素清除浮动算是第一种额外标签法的一个升级和优化**

（3）父级添加after属性

.clearfix:after {

        content:"";         /* 伪元素必须写的属性*/

        display:block;    /* 插入的元素必须是块级*/

        height:0;            /* 不要看见这个元素*/

        clear:both;         /* 核心代码清除浮动*/

        visibility:hidden; /* 不要看见这个元素*/

}

（4）父级添加双伪元素

.clearfix:before,.clearfix:after {

        content:"";         /* 伪元素必须写的属性*/

        display:table;    /* 转换为块级元素并且一行显示*/

}

.clearfix:after {

        clear:both;         /* 核心代码清除浮动*/

}

5.5 *选择器权重*---三大特性1.优先级：同一个元素指定多个选择器产生优先级；选择器相同，则执行层叠性，选择器不同，则根据选择器权重执行。

*选择器权重*

继承或*通配符              0,0,0,0

标签/元素选择器           0,0,0,1

类,属性,伪类选择器      0,0,1,0

id选择器                       0,1,0,0

行内样式style=""          1,0,0,0

!important重要的          无穷大

**权重叠加**：如果是复合选择器，则会权重叠加，需计算权重

div ul li   0,0,0,3

.nav ul li 0,0,1,2

a:hover  0,0,1,1

.nav a     0,0,1,1

注意：权重是4组数字组成，但不会进位

通配符*和继承权重0;标签/元素选择器1;类，伪类选择器10;id选择器100;行内样式表1000;！important无穷大

继承权重0，如果元素未直接选中，不管父元素权重多高，子元素权重都为0

5.6 三大特性2.继承性：子标签继承父标签的某些样式（以text-,font-,line- 开头，color）

5.7 三大特性3.层叠性：相同选择器设置相同样式会覆盖/层叠 样式冲突：后来者居上

六、字体属性

6.1 font-family字体

p {font-family:"微软雅黑";}

div {font-family: Arial,"Microsoft Yahei","微软雅黑";}

6.2 font-size字号/字体大小：12px 16px(谷歌默认) 18px

6.3 font-weight字体粗细：normal默认值不加粗--400；bold加粗--700；100-900 数值不跟单位。

6.4 font-style字体样式：normal默认值；italic斜体。

6.5 字体连写/字体复合(简写)属性:不能更换顺序；取默认值属性可以省略，但必须保留 font-size 和 font-family 属性

body {

        font: font-style        font-weight        font-size/line-height        font-family;

}

七、文本属性

7.1 color文本颜色：常用十六进制#FF0000;预定义颜色red;RGB代码rgb(255,0,0或100%,0%,0%)

7.2 text-align文本对齐:设置文字水平对齐

7.3 text-indent文本缩进：段落首行缩进2字符，text-indent:2em;

7.4 text-decoration文本修饰 none默认取消；underline下划线；overline上划线；line-trough删除线

7.5 line-height行高：行与行之间的距离

**单行文字垂直居中的代码**

解决方案: 文字的行高=盒子的高度 /* 文字在当前盒子内垂直居中*/

简单理解: 行高的上空隙和下空隙把文字挤到中间了. 是如果行高小于盒子高度,文字会偏上,如果行高大于盒子高度,则文字偏下

八、背景属性

8.1 background-color 背景颜色：默认值transparent（透明）

8.2 background-image 背景图像：url路径；none无背景图

8.3 background-repeat背景平铺：repeat默认纵向横向平铺；no-repeat不平铺；repeat-x/y 横/纵

8.4 background-position背景图片位置

（1）参数方位名词position：top|center|bottom|left|center|right

两个值无顺序 left top;top left一样

一个值，则第二个值默认居中对齐

（2）参数精确单位length:百分数%|浮动数和单位组成长度值

第一个x坐标，第二个y坐标

一个值就是x坐标，y默认垂直居中

（3）参数混合单位

第一个x坐标，第二个y坐标

8.5 background-attachment背景附着：scroll背景滚动；fixed背景固定

8.6 background: rgba(0, 0, 0, 0.3);背景色半透明（CSS3新增属性：最后一个参数是alpha透明度，取值范围0-1之间，0.x的0可以省略

8.7 背景复合写法：没有特定的书写顺序,一般习惯约定顺序

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

background:transparent        url(image.jpg)        repeat-y        fixed        top;

 九、注释：/*  注释  */ 

十、HTML元素分类与元素转换/CSS元素显示模式

10.1 元素分类

（1）block块级元素：独占一行（一行只能放一个块级元素），可以设置宽度、高度以及边距等样式属性,宽度默认是容器（父级宽度）的100%。

        常见的块级元素有：

、

-

、

、

    、
      、
    1. 、
      、
      、
      等。

      （2）inline行内元素/内联元素：不会独占一行（一行可以放多个行内元素），宽度默认由其本身决定，直接设置宽度高度无效，默认宽度就是它本身内容的宽度。

              常见的行内元素有：、、、