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;
}实际应用示例：
<p class="none-example">这段文字没有装饰线</p>
<p class="underline-example">这段文字有下划线</p>
<p class="overline-example">这段文字有上划线</p>
<p class="line-through-example">这段文字有删除线</p>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;
}实际应用示例：
<div class="center-align">
<p>这段文字会居中对齐</p>
<img src="image.jpg" alt="示例图片">
</div>重要特性：
-
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;
}