深入解析：DAY 04 CSS文本,字体属性以及选择器

CSS文本与字体属性

1. 什么是CSS文本属性

CSS文本属性用于控制文本的外观和布局，包括文本颜色、对齐方式、装饰、间距等。

2. text-decoration 文本装饰

text-decoration 属性用于给文本添加装饰线。

/* 无装饰线 */
.none-example { text-decoration: none;
}
​
/* 下划线 */
.underline-example { text-decoration: underline;
}
​
/* 上划线 */
.overline-example { text-decoration: overline;
}
​
/* 删除线 */
.line-through-example { text-decoration: line-through;
}

实际应用示例：

这段文字没有装饰线
这段文字有下划线
这段文字有上划线
这段文字有删除线

3. text-transform 文本转换

text-transform 控制文本的大小写转换。

/* 全部大写 */
.uppercase { text-transform: uppercase;
}
​
/* 全部小写 */
.lowercase { text-transform: lowercase;
}
​
/* 每个单词首字母大写 */
.capitalize { text-transform: capitalize;
}

4. text-indent 文本缩进

text-indent 设置文本块中首行文本的缩进。

.indent-example { text-indent: 2em; /* 缩进2个字符宽度 */
}

5. text-align 文本对齐（重要）

text-align 设置文本的水平对齐方式。

/* 左对齐（默认） */
.left-align { text-align: left;
}
​
/* 右对齐 */
.right-align { text-align: right;
}
​
/* 居中对齐 */
.center-align { text-align: center;
}
​
/* 两端对齐 */
.justify-align { text-align: justify;
}

实际应用示例：

 
这段文字会居中对齐
 

重要特性：

• text-align: center 可以使块级元素内的行内内容（文字、图片等）居中

• 对于块级元素本身居中，需要使用 margin: 0 auto

6. text-align的基本使用

块级元素 vs 行内元素：

• 块级元素：独占一行，可设置宽高（如div、p、h1等）

• 行内元素：不独占一行，不可设置宽高（如span、a、strong等）

图片居中：

/* 方法1：使用text-align（需要父元素是块级元素） */
.container { text-align: center;
}
.container img { display: inline-block; /* 或保持默认的inline */
}
​
/* 方法2：使用margin auto（需要图片是块级元素） */
img.center { display: block; margin: 0 auto;
}

7. 间距属性

/* 字母间距 */
.letter-spacing { letter-spacing: 2px;
}
​
/* 单词间距（对中文无效） */
.word-spacing { word-spacing: 5px;
}
​
/* 行高 */
.line-height { line-height: 1.5; /* 1.5倍行高 */
}

---

CSS字体属性

8. 什么是CSS字体属性

CSS字体属性用于控制文本的字体样式，包括字体类型、大小、粗细等。

9. font-size的三种方式

/* 1. 绝对单位（固定大小） */
.pixel-size { font-size: 16px; /* 像素 */
}
​
/* 2. 相对单位（相对于父元素） */
.relative-size { font-size: 1.2em; /* 父元素字体大小的1.2倍 */
}
​
/* 3. 相对单位（相对于根元素） */
.root-relative-size { font-size: 1.5rem; /* 根元素(html)字体大小的1.5倍 */
}

10. font-family 字体族

原理： 浏览器会按照字体列表的顺序查找可用字体

/* 单个字体 */
.single-font { font-family: "Microsoft YaHei";
}
​
/* 多个字体（备用字体） */
.multiple-fonts { font-family: "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif;
}

11. font-weight 字体粗细

/* 正常粗细 */
.normal-weight { font-weight: normal; /* 或400 */
}
​
/* 加粗 */
.bold-weight { font-weight: bold; /* 或700 */
}

12. font-style 字体样式

/* 正常 */
.normal-style { font-style: normal;
}
​
/* 斜体 */
.italic-style { font-style: italic;
}

13. font-variant 字体变体

/* 小型大写字母 */
.small-caps { font-variant: small-caps;
}

14. line-height 行高（重要）

应用场景：

• 改善文本可读性

• 实现单行文本垂直居中

/* 单行文本垂直居中 */
.vertical-center { height: 40px; line-height: 40px; /* 行高等于容器高度 */
}

15. font缩写属性

格式：font: font-style font-variant font-weight font-size/line-height font-family;

/* 完整写法 */
.full-font { font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 16px; line-height: 1.5; font-family: Arial, sans-serif;
}
​
/* 缩写写法 */
.shorthand-font { font: italic small-caps bold 16px/1.5 Arial, sans-serif;
}

---

CSS选择器

16. 什么是CSS选择器

CSS选择器用于选择要应用样式的HTML元素。

17. 通配选择器

/* 选择所有元素 */
* { margin: 0; padding: 0;
}

18. 简单选择器

/* 元素选择器 */
div { color: blue;
}
​
/* 类选择器 */
.class-name { color: red;
}
​
/* ID选择器 */
#element-id { color: green;
}

19. 属性选择器

/* 选择有特定属性的元素 */
input[type="text"] { border: 1px solid #ccc;
}

20. 后代选择器（重要）

/* 全后代选择器（所有后代） */
div p { color: red;
}
​
/* 直接后代选择器（仅子代） */
div > p { color: blue;
}

21. 兄弟选择器

/* 相邻兄弟选择器（紧接在后面的第一个兄弟） */
h1 + p { margin-top: 0;
}
​
/* 通用兄弟选择器（后面所有兄弟） */
h1 ~ p { color: gray;
}

22. 选择器组（重要）

/* 并集选择器（多个选择器应用相同样式） */
h1, h2, h3 { color: navy;
}
​
/* 交集选择器（同时满足多个条件） */
p.special { font-weight: bold;
}

23. 伪类（重要）

概念： 伪类用于定义元素的特殊状态

/* 链接未访问状态 */
a:link { color: blue;
}
​
/* 链接已访问状态 */
a:visited { color: purple;
}
​
/* 鼠标悬停状态（重要） */
a:hover { color: red; text-decoration: underline;
}
​
/* 激活状态（鼠标按下未释放） */
a:active { color: green;
}
​
/* 获得焦点状态 */
input:focus { border-color: blue; outline: none;
}