当前位置：首页 > news >正文

CSS篇——第一章六十五项关键技能（上篇）

news 2025/7/20 6:03:32

一、交集选择器

二、字体属性

三、字体族(font-family)

四、字体复合属性(font)

五、颜色(color)

六、伪类选择器

七、继承性

八、层叠性

九、优先级

十、复合选择器

十一、伪元素选择器

十二、背景图平铺

十三、背景图位置

十四、背景图缩放

十五、背景图固定

十六、背景复合属性

十七、显示模式转换

十八、结构伪类选择器

十九、:nth-child()公式

二十、显示模式基础

二十一、盒子模型组成

二十二、边框线

二十三、内边距(padding)

二十四、盒子尺寸计算

二十五、元素溢出

二十六、外边距问题

二十七、行内元素边距

二十八、盒子阴影

二十九、浮动基础

三十、清除浮动

三十一、浮动本质

CSS核心知识点摘要（148字）

选择器：交集选择器、伪类（:hover等）、结构伪类(:nth-child)、伪元素(::before)
字体控制：font复合属性（顺序：style weight size/line-height family）、多字体备选
盒模型：组成（content/padding/border/margin）、box-sizing、margin塌陷解决方案
背景：background复合属性（含position/size/attachment）
浮动：特点（脱标/行内块特性）、清除浮动4种方法（推荐双伪元素法）
优先级：!important > 行内 > ID > 类 > 标签 > 继承
显示模式：block/inline/inline-block特性及转换

一、交集选择器

作用
选中同时满足多个条件的元素（如：既是p标签又有.box类）

写法

选择器1选择器2 { CSS属性 }
（选择器之间无符号连写）cssp.box { color: red; } /* 选中类名为box的p标签 */

注意事项
⚠️ 含标签选择器时，标签选择器必须写在最前面

二、字体属性

属性	作用	控制对象
`font-size`	字体大小	文字
`font-weight`	字体粗细	文字
`font-style`	字体倾斜	文字
`line-height`	行高	文字
`font-family`	字体族	文字
`font`	复合属性	-
`text-indent`	文本缩进	段落
`text-align`	文本对齐	文本
`text-decoration`	修饰线	文字
`color`	颜色	文字

三、字体族(font-family)

基本用法

font-family: 字体名;示例:font-family: 楷体;

多字体备选
```
font-family: "Microsoft YaHei", "Heiti SC", sans-serif;
```
- 从左向右依次查找可用字体
- ⚠️ 最后必须设置通用字体族（如sans-serif）
字体分类

类型特点示例
无衬线字体无笔画装饰 Arial
衬线字体有笔画装饰衬线 Times New Roman

类型	特点	示例
无衬线字体	无笔画装饰	Arial
衬线字体	有笔画装饰衬线	Times New Roman

四、字体复合属性(font)

作用
简写多个字体属性（font-style + font-weight + font-size/line-height + font-family）

标准顺序

font: 是否倾斜 是否加粗 字号/行高 字体;

/* 原始写法 */
div {font-style: italic;font-weight: 700;font-size: 30px;line-height: 2;font-family: 楷体;
}/* 复合写法 */
div {font: italic 700 30px/2 楷体;
}

注意事项
⚠️ 字号和字体值必须书写，否则属性失效

五、颜色(color)

表示方式	写法	使用场景
颜色关键字	`red`, `blue`	学习测试
RGB	`rgb(255,0,0)`	了解
RGBA	`rgba(255,0,0,0.5)`	透明效果
十六进制	`#FF0000` 或 `#F00`	开发常用

六、伪类选择器

作用
选中元素的特定状态

鼠标悬停

选择器:hover { color: red; /* 鼠标悬停时变红 */
}

超链接四大状态

选择器状态
:link 未访问
:visited 已访问
:hover 悬停
:active 点击时

⚠️ 书写顺序必须为 LVHA（link → visited → hover → active）

选择器	状态
`:link`	未访问
`:visited`	已访问
`:hover`	悬停
`:active`	点击时

七、继承性

规则
子元素默认继承父元素的文字控制属性
可继承属性
font-size, font-weight, font-style, line-height, font-family, text-indent, text-align, color等
⚠️ 非文字属性（如宽高）不继承

八、层叠性

相同属性
后写的覆盖先写的

div { color: red; }
div { color: green; } /* 最终显示绿色 */

不同属性
样式叠加生效

div { color: red; font-weight: 700; }
div { color: green; font-size: 30px; }
/* 结果：绿色、700加粗、30px字号 */

九、优先级

权重规则
!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符 > 继承
（选择范围越小，优先级越高）

叠加计算

格式：(行内, ID个数, 类个数, 标签个数)

比较规则：从左向右逐级比对

#father #son {}       /* (0,2,0,0) */
#father p.c2 {}      /* (0,1,1,1) */
div.c1 p.c2 {}       /* (0,0,2,2) */

关键规则
⚠️ !important权重最高
⚠️ 继承权重最低

十、复合选择器

后代选择器

父选择器 子选择器 { color: red; /* 选中所有后代 */
}

子代选择器

父选择器 > 子选择器 { color: red; /* 仅选中直接子元素 */
}

并集选择器

选择器1, 选择器2 { color: red; /* 同时选中多组元素 */
}

交集选择器

选择器1选择器2 { color: red; /* 选中同时满足条件的元素 */