一，CSS介绍

1.1 CSS定义

层叠样式表(Cascading Style Sheets，缩写为 CSS)，是一种 样式表 语言，用来描述 HTML 文档的呈现 (美化内容)

CSS 格式：选择器{CSS属性名:属性值;}

1.2 CSS引入方式

CSS 有三种引入方式：

内部样式表：学习使用。

CSS 代码写在style 标签里面。
外部样式表：开发使用。

CSS 代码写在单独的 CSS 文件中 (.css)

在 HTML 中使用link标签引入。
```
<link rel="stylesheet“ href="./my.css"/>
```
行内样式：配合 JavaScript 使用。

CSS 代码写在style 属性里面。
```
<div style="color:red;font-size:20px">这是div标签</div>
```

Facvicon 图标也是通过 link 方式引入的

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

二，选择器

选择器的作用：查找标签，设置样式。

2.1 基本选择器

2.1.1 标签选择器

标签选择器：使用标签名作为选择器，选中同名标签设置相同的样式。

举例：p，h1，div，a，img

2.1.2 类选择器

作用：查找标签，差异化设置标签的显示效果。

用法：

定义类选择器->.类名
使用类选择器->标签添加属性，class="类名"

注意：

类名自定义，不要用纯数字，尽量用英文。
一个类选择器可供多个标签使用。
一个标签可使用多个类名，类名之间用空格隔开。

2.1.3 id选择器

作用：查找标签，差异化设置标签的显示效果。

使用场景：id 选择器一般配合 javascript 使用，很少用来设置 css 样式。

用法：

定义id选择器->#id名
使用id选择器->标签添加id="id名"

注意：同一个 id 选择器在一个页面只能使用一次。

2.1.4 通配符选择器

作用：查找页面所有标签，设置相同样式。

通配符选择器：*，不需要调用，浏览器自动查找页面所有标签，设置相同的样式。

* {
    color:red;
}

2.2 复合选择器

复合选择器：两个或多个基础选择器，通过不同的方式组合而成。

作用：更准确、更高效的选择目标元素 (标签)。

2.2.1 后代选择器

后代选择器：选中某元素的后代元素。

body p {
    /* 选择所有p元素，它们是body元素的后代 */
}

2.2.2 子代选择器

子代选择器：选中某元素的子代元素 (最近的子级)

ul > li {
    /* 选择所有ul元素的直接子元素li */
}

2.2.3 并集选择器

并集选择器：选中多组标签设置相同的样式

h1, h2, h3 {
    /* 选择所有h1、h2和h3元素 */
}

2.2.4 交集选择器

.button.warning {
    /* 选择同时具有类名button和warning的元素 */
}

2.2.5 相邻兄弟选择器

h2 + p {
    /* 选择紧接在h2元素后的第一个p元素 */
}

2.2.6 通用兄弟选择器

h2 ~ p {
    /* 选择h2元素后面所有的p元素 */
}

2.2.7 属性选择器

input[type="text"] {
    /* 选择所有type属性为"text"的input元素 */
}

2.2.8 伪类选择器

伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。

a:hover {
    /* 鼠标悬停时的样式 */
}

超链接一共有四个状态：

提示：如果要给超链接设置以上四个状态，需要按 LVHA 的顺序书写。

2.3 结构伪类选择器

作用：根据元素的结构关系查找元素。

关于 E:nth-child(N) 里面也可以填写公式：如下图

2.4 伪元素选择

作用：创建虚拟元素（伪元素），用来摆放装饰性的内容。

注意：

必须设置content: ""属性，用来设置伪元素的内容，如果没有内容则留空
伪元素默认是行内显示模式
权重和标签选择器相同

三，文字控制属性

常见文字控制属性如下图：

3.1 字体大小

属性名：font-size
属性值：文字尺寸，PC 端网页常用单位 px

如果为 0 就能将字体消失

3.2 文字粗细

属性名：font-weidht
属性值：
- 数字（开发使用）
  
  正常是 400，加粗是 700
- 关键字：
  
  正常是normal，加粗是bold

3.3 文字样式（是否倾斜）

作用：清除文字默认的倾斜效果

属性名：font-style

属性值：

正常（不倾斜）：normal
倾斜：italic

3.4 行高

作用：设置多行文本的间距

属性名：line-height

属性值：

数字+px
数字（当前标签font-size属性值的倍数）

行高的测量方法：从一行文字的最顶端 (最底端) 量到下一行文字的最顶端(最底端)

设置行高垂直居中效果：** 行高属性值等于盒子高度属性值即可。** 这个是单行文字垂直居中！

div {
    height: 100px;
    background-color: blue;
    line-height: 100px;
}

3.5 字体族

属性名：font-family

属性值：字体名

font-family: 楷体;

拓展 (了解)：font-family 属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找

font-family 属性最后设置一个字体族名，网页开发建议使用无衬线字体
常见字体族：

3.6 字体复合属性

使用场景: 设置网页文字公共样式。

属性名：font

复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。

font: 是否倾斜是否加粗字号/行高字体(必须按顺序书写)

举例：

div {
    font: italic 700 30px/2 楷体;
}

注意：字号和字体值必须书写，否则 font 属性不生效

3.7 文本缩进

属性名：text-indent
属性值:

数字+px
数字 +em(推荐:1em =当前标签的字号大小)

3.8 文本对齐方式

作用：控制内容水平对齐方式。

属性名: text-align

属性值：

text-align 设置图片居中：text-align 本质是控制内容的对齐方式，属性要设置给内容的父级

<style>
    div{
        text-align: center;
    }
</style>
<div>
    <img src="./images/1.jpg" alt=""/>
</div>

3.9 文本修饰线

属性名: text-decoration

属性值：

可用这个来去除超链接的下划线。

3.10 颜色

属性名：color

属性值：

十六进制表示法中，RR,GG,BB 俩俩一组，如果俩个是相同的可只写一个。

四，CSS三大特性

CSS 特性：简化代码 / 定位问题，并解决问题。

4.1 继承性

继承性：子级默认继承父级的文字控制属性

工作中一般将所有属性都设置给 body 标签，用来统一文字的风格。
如果需要设置不同的文字风格，直接在子标签中单独设置即可。

4.2 层叠性

层叠性：

相同的属性会覆盖：后面的 CSS 属性覆盖前面的 CSS 属性
不同的属性会叠加：不同的 CSS 属性都生效

4.3 优先性

优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则

规则：选择器优先级高的样式生效
权重大小：通配符选择器 < 标签选择器 < 类选择器 < id 选择器 < 行内样式 < !important

叠加计算规则：

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

从左向右依次比较选择器个数，同一级个数多的优先级高，如果个数相同，则向后比较
!important权重最高
继承权重最低

五，Emmet写法

Emmet 写法：代码的简写方式，输入缩写编译器会自动生成对应的代码。

HTML

CSS：大多数简写方式为属性单词的首字母。

六，背景属性

background-color 中如果属性值取：transparent就能做到去除自带的背景色

表单的outline:none可以去除输入框的边框线。

6.1 背景图

网页中，使用背景图实现装饰性的图片效果。

属性名：background-image（缩写，bgi)
属性值：url(背景图 URL或path)

6.2 背景平铺方式

属性名: background-repeat,（缩写，bgr)

属性值：

6.3 背景图位置

属性名: background-position（缩写：bgp)

属性值：

坐标方式（数字 +px)

0 0 表示左上角这个点。即取左上角为坐标原点，向下，向右为正方向。

关键字取值方式写法，可以颠倒取值顺序

数字只写一个值表示水平方向，垂直方向为居中。

6.4 背景图缩放

作用：设置背景图大小
属性名: background-size (缩写：bgz)

属性值：

关键字

cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
数字 + 单位
百分比：根据盒子尺寸计算图片大小。

6.5 背景图固定

作用：背景不会随着元素的内容滚动。

属性名：background-attachment 缩写 (bga)

属性值：fixed

6.6 背景复合属性

属性名：background 缩写 bg

属性值：背景色背景图背景图平铺方式背景图位置/背景图缩放背景图固定(空格隔开各个属性值，不区分顺序)

七，显示模式

显示模式：标签 (元素) 的显示方式。

作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。

分类：

块级标签(div这种)
- 独占一行
- 宽度默认是父级的100%
- 添加宽高属性生效
行内元素(span这种)
- 一行共存多个
- 尺寸由内容撑开
- 添加宽高属性不生效
行内块元素（img元素这种)
- 一行共存多个
- 尺寸由内容撑开
- 添加宽高属性生效

转换显示模式：

属性名：display

属性值：

display: none隐藏元素

行内块和行内垂直方向对齐方式：

作用：用于将相邻的文本与元素对齐，例如将 img 和文字对齐

属性名：vertical-align

属性值：一般就用middle

八，盒模型

作用：布局网页，摆放盒子和内容。

8.1 盒模型组成

盒子模型重要组成部分

内容区域：width & height
内边距-：padding (出现在内容与盒子边缘之间)
边框线：border
外边距：margin (出现在盒子外面)

结构图：

8.2 边框线

属性名: border , 缩写 bd

属性值：边框线粗细线条样式颜色(不区分顺序)

常用的线条样式：

设置单方向边框线：

属性名：border- 方位名词 (缩写：bd+ 方位名词首字母，例如，bdl)

举例：

div{
    border-top: 2px solid red;
    border-right: 2px solid red;
    border-left: 2px solid red;
    border-bottom: 2px solid red;
}

8.3 内边距

作用：设置内容与 盒子边缘 之间的距离

属性名：padding /padding- 方位名词

属性值：数字 +px

padding 多值写法：

8.4 尺寸计算

默认情况下：盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸。

所以，给盒子加上 border/padding 会撑大盒子。

解决方法：

手动做减法，减去border/padding的尺寸
内减模式：给盒子加上属性：box-sizing: border-box

8.5 外边距

作用：拉开两个盒子之间的距离

属性名：margin/margin-方向

属性值：数字 +px，margin 也和 padding 有相同规则的多值写法。

让盒子居中，可以这么设置

margin: 100px auto这样就是左右居中了。

8.6 清除默认样式

清除标签默认的样式，比如: 默认的内外边距

正常开发中，通过通配符选择器，将默认样式全部清除。

* {
	margin: 0;
    padding: 0;
}

去除列表的项目符号

li {
    list-style: none;
}

8.7 元素溢出

作用：控制溢出元素的内容的显示方式。

属性名: overflow

属性值：

overflow:visible内容不会被修剪，会呈现在元素框之外。

这个和overflow:hidden配合实现下拉菜单的效果。

8.8 合并和坍塌

外边距问题：合并现象。

场景：垂直排列的兄弟元素，上下 margin 会合并

现象：俩个 margin 中，较大的那个生效。

外边距问题：坍塌问题

场景：父子级的标签，子级的添加 上外边距 会产生塌陷问题

现象：导致父级一起向下移动。

解决办法：有三种

取消子级margin，父级设置padding(推荐)
父级设置 overflow: hidden
父级设置 border-top

8.9 行内元素 - 内外边距问题

场景：行内元素添加 margin 和 padding，无法改变元素垂直位置

解决方法：给行内元素添加 line-height 可以改变垂直位置

span {
	/* margin 和 padding 属性，无法改变垂直位置 */
	margin: 50px;
	padding: 20px;
	/*行高可以改变垂直位置 */
	line-height: 100px;
}

8.10 圆角

作用：设置元素的外边框为圆角。

属性名：border-radius

属性值：

数字+px
百分比

border-radius 多值写法：（从左上角顺时针赋值，没有取值的角与对角取值相同）

常见应用：

正圆形：

给正方形盒子设置圆角属性值为 宽高的一半/50%
胶囊形：

给长方形盒子设置圆角属性值为 盒子高度的一半

8,11 盒子阴影

作用：给元素设置阴影效果

属性名：box-shadow

属性值：X 轴偏移量 Y轴偏移量模糊半径扩散半径颜色内外阴影

X 轴偏移量 Y轴偏移量必须写
默认是外阴影，内阴影用inset

Normaling

CSS基础

一，CSS介绍

1.1 CSS定义

1.2 CSS引入方式

二，选择器

2.1 基本选择器

2.1.1 标签选择器

2.1.2 类选择器

2.1.3 id选择器

2.1.4 通配符选择器

2.2 复合选择器

2.2.1 后代选择器

2.2.2 子代选择器

2.2.3 并集选择器

2.2.4 交集选择器

2.2.5 相邻兄弟选择器

2.2.6 通用兄弟选择器

2.2.7 属性选择器

2.2.8 伪类选择器

2.3 结构伪类选择器

2.4 伪元素选择

三，文字控制属性

3.1 字体大小

3.2 文字粗细

3.3 文字样式（是否倾斜）

3.4 行高

3.5 字体族

3.6 字体复合属性

3.7 文本缩进

3.8 文本对齐方式

3.9 文本修饰线

3.10 颜色

四，CSS三大特性

4.1 继承性

4.2 层叠性

4.3 优先性

五，Emmet写法

六，背景属性

6.1 背景图

6.2 背景平铺方式

6.3 背景图位置

6.4 背景图缩放

6.5 背景图固定

6.6 背景复合属性

七，显示模式

八，盒模型

8.1 盒模型组成

8.2 边框线

8.3 内边距

8.4 尺寸计算

8.5 外边距

8.6 清除默认样式

8.7 元素溢出

8.8 合并和坍塌

8.9 行内元素 - 内外边距问题

8.10 圆角

8,11 盒子阴影

CSS基础