CSS(层叠样式表，Cascading Style Sheets)是一种用于表现HTML或XML等文件样式的计算机语言。它以.css作为后缀名，并于1994年由Hakon Wium Lie和Bert Bos首次提出。CSS简化了网页的格式代码，使得外部样式表能够被浏览器缓存，从而加快下载和显示速度，同时减少了需要上传的代码数量。

一个具有具体功能的完整网页通常由三个部分组成：HTML、CSS和JavaScript。HTML负责数据和结构，即超文本标记语言(HyperText Markup Language),实际上它只是文本，由浏览器负责将其解析成具体的网页内容。CSS则负责样式表层叠，通过选择器和样式属性来控制网页元素的外观。JavaScript则负责行为交互和效果，使用符合ECMAScript规范的脚本编程语言来创建动态更新的内容、控制多媒体以及制作图像动画。

在CSS中，选择器用于指定要应用样式的元素，而样式属性则定义了这些元素的外观。例如，以下代码将设置h1标签的颜色为蓝色、背景色为黄色，并添加一条黑色边框：

```css

h1 {

color: blue;

background-color: yellow;

border: 1px solid black;

}

```

在HTML中引入CSS的方式有两种：外部样式表和内联样式。外部样式表使用link标签将外部样式表链接到页面上，如下所示：

```html

```

而内联样式则是直接在HTML元素中使用style属性来定义样式，如下所示：

```html

```

需要注意的是，不推荐使用内联样式，因为在一个站点里，如果需要更改CSS时，就需要修改每个页面文件。

内联样式表是一种将CSS代码直接嵌入到HTML元素中的方法，它存在于HTML元素的`style`属性之中。每个CSS表只影响一个元素。例如：

```html

Hello World!

```

与内联样式相比，更常见的是内部样式和外部样式。下面分别介绍了这三种样式的优缺点。

1. 常用样式属性：

字体相关属性：

- 1)字体颜色：`color`属性表示字体的颜色，可以是英文单词、十六进制形式或RGB值，如`color:#0099ff`。

- 2)字体大小：`font-size`属性用于设置字体的大小。

- 3)字体样式：`font-style`属性用于设置字体的样式，包括正常、斜体等。

- 4)字体：`font-family`属性用于设置字体族，即多个字体之间的切换。

- 5)单词间距：`word-spacing`属性用于设置单词之间的间隔。

- 6)字符间距：`letter-spacing`属性用于设置字母之间的间隔。

文本相关属性：

- 1)文本对齐方式：`text-align`属性用于设置文本的对齐方式，包括左对齐、居中和右对齐。

- 2)文本与左边界的距离：`text-indent`属性用于设置文本与左边界的距离。

- 3)文本线条：`text-decoration`属性用于设置文本的装饰，如下划线、上划线、删除线等。

背景相关属性：

- 1)背景色：`background-color`属性用于设置背景色。

- 2)引入背景图片：`background-image`属性用于设置背景图片。

- 3)图片平铺方式：`background-repeat`属性用于设置图片的平铺方式，如不平铺、水平方向平铺和垂直方向平铺。

边框相关的属性：

- 1)边框：`border`属性用于设置边框的线形、粗细和颜色。线形包括实线、点线、双线和虚线。

- 2)边框顶层：`border-top`属性用于设置顶部边框。

- 3)边框底层：`border-bottom`属性用于设置底部边框。

- 4)边框左边框：`border-left`属性用于设置左边框。

- 5)边框右边框：`border-right`属性用于设置右边框。

宽度高度属性：

- `width`和`height`属性用于设置元素的宽度和高度。

鼠标相关：

- `cursor`属性用于设置鼠标指针的形状。常用的有等待提示(wait pointer)、手指(hand)。

显示相关的样式：

CSS 隐藏元素有以下几种方法：

- display:none; //Flexbox 是 CSS 弹性盒子布局模块的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。display:flex; //Grid 布局则被设计用于同时在两个维度上把元素按行和列排列整齐。display:grid; //块级盒子，block 将span转换成div。display:block; //内联盒子，inline 将div变成span 。display:inline。

超链接的样式设置包括以下几个方面：

- a:link{.....}; //超链接点击之前的样式设置。

- a:hover{....}; //鼠标浮上的样式设置。

- a:active{....}; //鼠标点击的样式设置。

- a:visited{....}; //访问过后的样式设置。

定位相关样式包括以下几个方面：

- position: absolute;绝对定位：相对父标签的左上角坐标进行定位。

- position: relative;相对定位：相对当前标签默认出现的位置进行偏移。

- top:设置上边距。

- left:设置左边距。

内外边距包括以下两个属性：

- margin: 外边距。

- padding:内边距。

选择器是用来选中 HTML 文档中的元素，来样式化元素。每个 CSS 规则都以一个选择器或一组选择器为开始，去告诉浏览器这些规则应该应用到哪些元素上。常见的选择器有基础选择器、层次选择器等。

. 元素的后代元素

子代选择器：用于选择指定元素的后代元素。

示例：elemP>elemC,表示选择elemP的后代元素elemC。

2. 元素的子代元素

相邻同胞选择器：用于选择指定元素相邻的同胞元素。

示例：elem1+elem2,表示选择elem1和elem2相邻的同胞元素。

通用同胞选择器：用于选择指定元素后面的同胞元素。

示例：elem1~elem2,表示选择elem1后面的同胞元素。

3. 标签名选择器

标签名选择器：用于选择具有特定标签名的元素。

示例：标签名1 标签名2{ 属性：属性值； },表示选择标签名为标签名1和标签名2的元素，并设置其属性值。

4. 集合选择器

并集选择器：用于选择多个指定的元素。

示例：elem1,elem2,表示选择elem1和elem2两个元素。

交集选择器：用于选择指定类名的元素。

示例：.class,表示选择具有指定类名的所有元素。

5. 条件选择器

条件选择器：用于根据条件选择元素。

示例：:lang,表示选择标记语言的元素。

6. 行为选择器

行为选择器：用于根据用户操作或页面状态选择元素。

示例：：active,表示鼠标激活的元素；:hover,表示鼠标悬浮的元素；::selection,表示鼠标选中的元素等。

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

- :focus-visible

- 输入聚焦的表单元素

- :blank

- 输入为空的表单元素

- :user-invalid

- 输入合法的表单元素

- :indeterminate

- 选项未定的表单元素

- :placeholder-shown

- 占位显示的表单元素

- :current()

- 浏览中的元素

- :past()

- 已浏览的元素

- :future()

- 未浏览的元素

- :playing

- 开始播放的媒体元素

- :paused

- 暂停播放的媒体元素

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父元素仅有该标签的标签32.8属性选择器选择器说明版本[attr]指定属性的元素2[attr=val]属性等于指定值的元素2[attr*=val]属性包含指定值的元素3[attr^=val]属性以指定值开头的元素3[attr$=val]属性以指定值结尾的元素3[attr~=val]属性包含指定值(完整单词)的元素(不推荐使用)2[attr|=val]属性以指定值(完整单词)开头的元素(不推荐使用)22.9伪元素选择器说明：:before在元素前插入的内容：:after在元素后插入的内容III盒子模型一切皆盒子

块级盒子和内联盒子是两种不同的盒子类型，它们在页面流和元素之间的关系方面表现出不同的行为。

块级盒子(block box)会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽。每个盒子都会换行。宽度和高度属性可以发挥作用，而内边距(padding)、外边距(margin)和边框(border)会将其他元素从当前盒子周围“推开”。

内联盒子(inline box)不会产生换行。宽度和高度属性将不起作用。垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。每个盒子都有四个属性：内容(content),填充(padding),边框(border)和边界(margin)。

弹性盒子(Flexbox)和Grid布局是两种常用的布局方式。Flexbox 是 CSS 弹性盒子布局模块(Flexible Box Layout Module)的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。Grid 布局则被设计用于同时在两个维度上把元素按行和列排列整齐。块级盒子可以使用 display: block 来设置，而内联盒子可以使用 display: inline-block 来设置。

定位技术包括静态定位(position: static)、固定定位(position: fixed)等。小知识点中提到了行高常用于设置“垂直居中”，块级标签(inline-block、block)才可以设置宽高，而行级标签(inline)的宽高取决于内容。脱离标准流还包括浮动(float)、绝对定位(Absolute positioning)等。

如果想要相对于父节点进行定位，最佳实践是将父节点的`position`属性设置为`relative`,这样可以遵循“子元素绝对定位，父元素相对定位”的原则。

具体操作如下：

1. 首先，确保父节点的`position`属性已设置为`relative`。例如：

```css

.parent {

position: relative;

}

```

2. 然后，在子元素上设置绝对定位。例如：

```css

.child {

position: absolute;

/* 其他样式属性 */

}

```

通过这种方式，您可以在子元素中使用绝对定位，而不必担心它会超出父节点的范围。同时，父节点保持相对定位，这有助于更好地控制布局。