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

DAY 04 CSS文本,字体属性以及选择器

news 2025/9/28 5:52:20

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;
}