【博学谷学习记录】超强总结，用心分享|前端CSS总结（一）

CSS总结（一）

shift+alt,选中多行

外链式

<link rel="stylesheet" href="./my.css">

1 选择器

1.1 标签选择器

结构：标签名

1.2 类选择器

结构：.类名{ }

1.3 id选择器

结构：#id属性值{ }

作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

注意点：

1. 所有标签上都有id属性

2. id属性值类似于身份证号码。在一个页面中是唯一的，不可重复的！

3. 一个标签上只能有一个id属性值

4. 一个id选择器只能选中一个标签

1.4 通配符选择器

结构：*{ }

作用：选中页面中所有标签

2 文字和文本样式

2.1 字体样式

2.1.1 字体大小：font-size

2.1.2 字体粗细：font-weight

取值：

• 关键字：

  正常	normal
  加粗	bold

• 纯数字 100~900的整数：

  正常	400
  加粗	700

2.1.3 字体样式：font-style（倾斜）

取值：

正常（默认值）：normal

倾斜：italic

2.1.4 字体类型：font-family

2.1.5 字体类型：font属性连写

属性名：font（复合属性

取值：font： style weight size family；

省略要求：只能省略前两个，如果省略了相当于设置了默认值

2.1.6样式层叠问题

样式可以一层一层的层叠覆盖

<style>
        p{
            color: red;
            color: blue;
        }
</style>

如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效

2.2 文本样式

2.2.1文本缩进

属性名：text-indent

取值：

• 数字 + px
• 数字 + em (推荐：1em = 当前标签的font-size的大小)

2.2.2文本水平对齐方式

属性名：text-align

取值：

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

2.2.3文本修饰

属性值：text-decoration

取值：

属性值	效果
underline	下划线（常用）
line-through	删除线（不常用）
overline	上划线（几乎不用）
none	无装饰线（常用）

注意：开发中会使用 text-decoration ：none ； 清除a标签默认的下划线

2.3 line-height行高

作用：控制一行上的上下间距

属性名：line-height

取值：

• 数字 + px
• 倍数（当前标签 font-size 的倍数）

应用：

1. 让单行文本垂直居中可以设置 line-height ：文字父元素高度
2. 网页精准布局时，设置 line-height ：1 可以取消上下间距

行高与font连写注意点：

• 如果同时设置了行高与font连写，注意覆盖问题
• font： style weight size/line-height family ;

垂直居中技巧：设置行高属性值 = 自身高度属性值

2.4标签水平居中

margin:0 auto;

3 选择器进阶

3.1 复合选择器

3.1.1 后代选择器

作用：根据HTML标签的嵌套关系，选择父元素 后代中 满足条件的元素

选择器语法：选择器1 选择器2 { css }

结果：在选择器1所找到标签的后代（儿子、孙子、重孙子...）中，找到满足选择器2的标签，设置样式

注意点：

1. 后代包括：儿子、孙子、重孙子...

2. 后代选择器中，选择器与选择器之间通过 空格 隔开

   

3.1.2子代选择器

作用：根据HTML标签的嵌套关系，选择父元素 子代中 满足条件的元素

选择器语法：选择器1 > 选择器2 { css }

结果：在选择器1所找到标签的后代（儿子）中，找到满足选择器2的标签，设置样式

注意点：

1. 子代只包括：儿子
2. 子代选择器中，选择器与选择器之间通过 > 隔开
   
   
   
   

3.2 并集选择器

作用：同时选择多组标签，设置相同样式

选择器语法：选择器1 ， 选择器2 { css }

结果：找到 选择器1 和 选择器2 选中的标签，设置样式

注意点：

1. 并集选择器中的每组选择器之间通过 ， 分隔
2. 并集选择器中的每组选择器可以是 基础选择器 或者 复合选择器
3. 并集选择器中的每组选择器通常一行写一个，提高代码的可读性

3.3 交集选择器

作用：选中页面中 同时满足 多个选择器的标签

选择器语法：选择器1选择器2 { css }

结果：

（既又原则）找到页面中 即 能被选择器1选中。又 能被选择器2选中的标签，设置样式

注意点：

1. 交集选择器中的选择器之间是紧挨着的，没有东西分隔
2. 交集选择器中如果有标签选择器，标签选择器必须写在最前面

3.4 hover伪类选择器

作用：选中鼠标悬停在元素上的状态，设置样式

选择器语法：选择器：hover { css }

3.5 Emmet语法

作用：通过简写语法，快速生成代码

语法：类似于刚刚学习的选择器的写法

4 背景相关属性

4.1 背景颜色

属性名：background-color

注意点：背景颜色默认值是 透明：rgba(0,0,0,0)、transparent

4.2 背景图片

属性名：background-image

属性值：background-image ：url ('图片的路径')

4.3 背景平铺

属性名：background-repeat

属性值：

取值	效果
repeat	（默认值）水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿着水平方向（x轴）平铺
repeat-y	沿着垂直方向（y轴）平铺

4.4 背景位置

属性名：background-position

属性值：background-position：水平方向位置 垂直方向位置

如果指定一个像素值，则该值用于x坐标，y值默居中

4.5 背景相关属性连写

属性名：background

书写顺序：随意

注意：

1. 把单独的样式写在连写的下面
2. 把单独的样式写在连写的里面

5 元素显示模式

5.1 块级元素

特点：

1. 独占一行（一行只能显示一个）
2. 宽度默认是父元素的宽度，高度默认由内容撑开
3. 可以设置宽高

代表标签：

div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer......

5.2 行内元素

显示特点：

1. 一行可以显示多个
2. 宽度和高度默认由内容撑开
3. 不可以设置宽高

代表标签：

a、span、b、u、i、s、strong、ins、em、del......

5.3 行内块元素

显示特点：

1. 一行可以显示多个
2. 可以设置宽高

代表标签：

• input、textarea、button、select......
• 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

5.4 元素显示模式转换

属性	效果	使用频率
display：block	转换成块级元素	较多
display：inline-block	转换成行内块元素	较多
display：inline	转换成行内元素	较少

块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素...

• 但是：p标签中不要嵌套div、p、h等块级元素

a标签内部可以嵌套任意元素

• 但是：a标签不能嵌套a标签

6 CSS特性

6.1 继承性

6.2 层叠性

6.3 优先级

优先级公式：

继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

注意点：

1. !important不能提升继承的优先级，只要是继承优先级最低
2. 实际开发中不建议使用!important

6.4 权重叠加计算

7 盒子模型

7.1 盒子模型介绍

CSS中规定每个盒子分别由：内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成，这就是盒子模型

7.2 边框（border）- 连写形式

属性名：border

属性值：单个取值的连写，取值之间以空格隔开

border：10px solid red;

7.2.1边框（border）— 单方向设置

场景：只给盒子的某个方向单独设置边框

属性名：border—方位名词

属性值：连写的取值

7.2.2边框（border）— 单个属性：

7.3 内边距取值

作用：设置边框与内容区域之间的距离

属性值：padding

常见取值：

记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面！

7.3.1 内边距（padding）—单方向设置

场景：只给盒子的某个方向单独设置内边距

属性名：padding - 方位名词

7.4 自动内减

操作：给盒子设置属性 box-sizing：border-box；即可

优点：浏览器会自动计算多余的大小，自动在内容中减去

7.5 外边距（margin）— 取值

作用：设置边框以外，盒子与盒子之间的距离

常见取值：

记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面！

7.5.1 外边距（margin）— 单方向设置

场景：只给盒子的某个方向单独设置外边距

属性值：margin - 方位名词

应用：