前言CSS(cascading style sheets,层叠式样式表)是一种用来表现HTML 或XML 等文件样式的计算机语言,CSS文档以.css作为后缀 。

1994年，CSS由Hakon Wium Lie与 Bert Bos第一次提出。CSS简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量。

一个有具体功能的完整网页，一般由3部分组成：

html： 数据和结构 ,HyperText Markup Language，超文本标记语言,其实它就是文本，由浏览器负责将它解析成具体的网页内容CSS：Cascading Style Sheets层叠样式表JavaScript：行为交互，效果。JavaScript 是一种符合ECMAScript规范的脚本编程语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画。I CSSCSS的作用：设置HTML页面的布局和样式 CSS的语法： 选择器｛样式属性;样式属性｝

代码语言：javascript复制h1 {

color: blue;

background-color: yellow;

border: 1px solid black;

}

在 CSS 中，属性和值都是区分大小写的,每对中的属性和值由冒号 (:) 分隔。CSS 声明块与选择器配对，以生成 CSS 规则集 。

1.1 HTML中引入CSS的方式外部样式，link标签将外部样式表链接到页面。代码语言：javascript复制

内部样式是指放在 HTML 文件标签里的

内联样式表存在于 HTML 元素的 style 属性之中，每个 CSS 表只影响一个元素。代码语言：javascript复制

Hello World!

注：样式优先级别:内联样式>内部样式>外部样式

根据样式的引入先后顺序，后引入会覆盖前面的样式

1.2 常用样式属性字体相关属性1）字体颜色 color:颜色英文单词、#十六进制形式 RGB 如：color:#0099ff 2） 字体大小 font-size 3）字体样式 font-style 4）字体 font-family 5）单词间距 word-spacing 6）字符间距 letter-spacing

文本相关属性1）文本对齐方式 text-align：left/center/right 2）文本与左边界的距离 text-indent 3）文本线条 text-decoration:underline 下划线 overline 上划线 line-through 删除线 none 去掉线条

背景相关属性1） 背景色 background-color:red 2） 引入背景图片 background-image:url(...) 3） 图片平铺方式 background-repeat:no-repeat 不平铺 repeat-x 在水平方向上平铺 repeat-y 在垂直方向上平铺

边框相关的属性1） border:线形 粗细 颜色

代码语言：javascript复制 线形：solid实线 、 dotted点线、 double双线 和 dashed虚线2） border-top:顶层边框 3）border-bottom:底层边框 4）border-left:左边框 5）border-right:右边框

宽度高度属性width: height:

鼠标相关 cursor:wait 漏斗形pointer(hand) 手指型

显示相关的样式代码语言：javascript复制/*隐藏 */

display:none

/**Flexbox 是 CSS 弹性盒子布局模块（Flexible Box Layout Module）的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。*/

display: flex

/*Grid 布局则被设计用于同时在两个维度上把元素按行和列排列整齐。*/

display:grid

/**块级盒子, block 将span转换成div */

display:block

/*内联盒子,inline 将div变成span */

display:inline

超链接1）a:link{.....} 超链接点击之前的样式设置 2）a:hover{....} 鼠标浮上的样式设置 3）a:active{....} 鼠标点击的样式设置 4）a:visited{....} 访问过后的样式设置

定位相关样式1） position: absolute 绝对定位:相对父标签的左上角坐标进行定位 relative 相对定位：相对当前标签默认出现的位置进行偏移 2）top:设置上边距 3）left:设置左边距

内外边距margin: 外边距 padding:内边距

1.3 选择器我们通过选择器来选中 HTML 文档中的元素，来样式化元素。每个 CSS 规则都以一个选择器或一组选择器为开始，去告诉浏览器这些规则应该应用到哪些元素上。

选择器的优先级排序:important > 内联 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符 > 继承

II CSS选择器分类2.1 基础选择器选择器

别名

说明

版本

tag

标签选择器

指定类型的标签

1

#id

ID选择器

指定身份的标签

1

.class

类选择器

指定类名的标签

1

*

通配选择器

所有类型的标签

2

代码语言：javascript复制 标签名{

属性:属性值;

}

#选择器名字{

属性:属性值;

}

.选择器的名字{

属性:属性值;

}

标签名.选择器名字{//只对相对应标签有效果

属性:属性值;

}

2.2 层次选择器选择器

别名

说明

版本

elemP elemC

后代选择器

元素的后代元素

1

elemP>elemC

子代选择器

元素的子代元素

2

elem1+elem2

相邻同胞选择器

元素相邻的同胞元素

2

elem1~elem2

通用同胞选择器

元素后面的同胞元素

3

代码语言：javascript复制 标签名1 标签名2{

属性:属性值；

}

样式的继承:子标签会继承父标签的样式

例子：+～结合filter实现暗黑模式

2.3 集合选择器选择器

别名

说明

版本

elem1,elem2

并集选择器

多个指定的元素

1

elem.class

交集选择器

指定类名的元素

1

代码语言：javascript复制 标签名,标签名{

属性:属性值；

}

2.4 条件选择器选择器

说明

版本

:lang

指定标记语言的元素

2

:dir()

指定书写方向的元素

4

:has

包含指定元素的元素

4

:is

指定条件的元素

4

:not

非指定条件的元素

4

:where

指定条件的元素

4

:scope

指定元素作为参考点

4

:any-link

所有包含href的链接元素

4

:local-link

所有包含href且属于绝对地址的链接元素

4

2.5 行为选择器选择器

说明

版本

:active

鼠标激活的元素

1

:hover

鼠标悬浮的元素

1

::selection

鼠标选中的元素

3

代码语言：javascript复制/*在鼠标指针悬浮到一个元素上的时候选择这个元素*/

a:hover { }

2.6 状态选择器选择器

说明

版本

:target

当前锚点的元素

3

:link

未访问的链接元素

1

:visited

已访问的链接元素

1

:focus

输入聚焦的表单元素

2

:required

输入必填的表单元素

3

:valid

输入合法的表单元素

3

:invalid

输入非法的表单元素

3

:in-range

输入范围以内的表单元素

3

:out-of-range

输入范围以外的表单元素

3

:checked

选项选中的表单元素

3

:optional

选项可选的表单元素

3

:enabled

事件启用的表单元素

3

:disabled

事件禁用的表单元素

3

:read-only

只读的表单元素

3

:read-write

可读可写的表单元素

3

:target-within

内部锚点元素处于激活状态的元素

4

:focus-within

内部表单元素处于聚焦状态的元素

4

:focus-visible

输入聚焦的表单元素

4

:blank

输入为空的表单元素

4

:user-invalid

输入合法的表单元素

4

:indeterminate

选项未定的表单元素

4

:placeholder-shown

占位显示的表单元素

4

:current()

浏览中的元素

4

:past()

已浏览的元素

4

:future()

未浏览的元素

4

:playing

开始播放的媒体元素

4

:paused

暂停播放的媒体元素

4

代码语言：javascript复制//根据一个有特定值的标签属性是否存在来选择

a[href="https://blog.csdn.net/z929118967?type=blog"] { }

2.7 结构选择器选择器

说明

版本

:root

文档的根元素

3

:empty

无子元素的元素

3

:first-letter

元素的首字母

1

:first-line

元素的首行

1

:nth-child(n)

元素中指定顺序索引的元素

3

:nth-last-child(n)

元素中指定逆序索引的元素

3

:first-child

元素中为首的元素

2

:last-child

元素中为尾的元素

3

:only-child

父元素仅有该元素的元素

3

:nth-of-type(n)

标签中指定顺序索引的标签

3

:nth-last-of-type(n)

标签中指定逆序索引的标签

3

:first-of-type

标签中为首的标签

3

:last-of-type

标签中为尾标签

3

:only-of-type

父元素仅有该标签的标签

3

2.8 属性选择器选择器

说明

版本

[attr]

指定属性的元素

2

[attr=val]

属性等于指定值的元素

2

[attr*=val]

属性包含指定值的元素

3

[attr^=val]

属性以指定值开头的元素

3

[attr$=val]

属性以指定值结尾的元素

3

[attr~=val]

属性包含指定值(完整单词)的元素(不推荐使用)

2

[attr|=val]

属性以指定值(完整单词)开头的元素(不推荐使用)

2

2.9 伪元素选择器

说明

::before

在元素前插入的内容

::after

在元素后插入的内容

III 盒子模型一切皆盒子: 在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。

3.1 块级盒子 (block box) 和 内联盒子 (inline box)块级盒子 (block box) 和 内联盒子 (inline box)会在页面流（page flow）和元素之间的关系方面表现出不同的行为：

块级盒子（block）盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽每个盒子都会换行width 和 height 属性可以发挥作用内边距（padding）, 外边距（margin）和 边框（border）会将其他元素从当前盒子周围“推开”内联盒子 (inline box)盒子不会产生换行。width 和 height 属性将不起作用垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。每个盒子都有四个属性：内容（content）：盒子里装的东西，网页中通常是指文字和图片填充（padding，内边距）：怕盒子里装的（贵重的）东西损坏，而添加的泡沫或者其它抗震的辅料边框（border）：盒子本身边界（margin，外边距）：盒子摆放的时候的不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出3.2 弹性盒子和Grid 布局display设置元素的显示模式, 实现页面布局的主要方法是设定display属性的值。正常流中的所有内容都有一个display的值，用作元素的默认行为方式。

代码语言：javascript复制/**Flexbox 是 CSS 弹性盒子布局模块（Flexible Box Layout Module）的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。*/

display: flex

/*Grid 布局则被设计用于同时在两个维度上把元素按行和列排列整齐。*/

display:grid

/**块级盒子 */

display:block

/*内联盒子*/

display:inline

3.3 定位技术静态定位 (Static positioning) 是每个元素默认的属性相对定位 (Relative positioning) 允许我们相对于元素在正常的文档流中的位置移动它绝对定位 (Absolute positioning) 将元素完全从页面的正常布局流 (normal layout flow) 中移出，类似将它单独放在一个图层中。我们可以将元素相对于页面的元素边缘固定，或者相对于该元素的最近被定位祖先元素 (nearest positioned ancestor element)。固定定位 (Fixed positioning) 将一个元素相对浏览器视口(viewport,网页的可视区域)固定，而不是相对另外一个元素。这在创建类似在整个页面滚动过程中总是处于屏幕的某个位置的导航菜单时非常有用。粘性定位 (Sticky positioning) 让元素先保持和position: static一样的定位，当它的相对视口位置 (offset from the viewport) 达到某一个预设值时，他就会像position: fixed一样定位。3.4 小知识点行高 常用于设置“垂直居中”块级标签（inline－block，block）才可以设置宽高，行级标签（inline）的宽高取决于内容脱离标准流：浮动（float）、绝对定位（Absolute positioning）如果想相对于父节点进行定位：最好设置父节点的position为relative， 原则“子绝父相”。