第6章_CSS样式基础

授课语音

CSS 字体与文本样式

一、字体设置

1. font-family 属性

font-family 属性用于设置文本的字体。你可以指定一个字体名称，或者使用字体系列。

p {
    font-family: "Arial", sans-serif; /* 设置字体为Arial，若不可用则使用无衬线字体 */
}

解释：

"Arial"：首选字体，如果浏览器没有安装该字体，使用后面的sans-serif系列字体。

常见的字体系列：

serif：有衬线的字体（如Times New Roman）。
sans-serif：无衬线字体（如Arial）。
monospace：等宽字体（如Courier）。

2. font-size 属性

font-size 属性用于设置字体的大小。可以使用像素(px)、百分比(%)、em、rem等单位。

h1 {
    font-size: 36px; /* 设置字体大小为36px */
}

解释：

px：像素单位，通常用于精确控制字体大小。
em：相对于父元素字体大小的倍数。
rem：相对于根元素<html>字体大小的倍数。
%：相对于父元素字体大小的百分比。

3. font-weight 属性

font-weight 属性用于设置字体的粗细。常用的值有normal（正常）和bold（加粗），也可以使用数字值（100到900之间）。

h2 {
    font-weight: bold; /* 设置字体为加粗 */
}

解释：

normal：正常字体重量（常规）。
bold：加粗字体。
数字值：100到900，400为正常，700为加粗。

4. font-style 属性

font-style 属性用于设置字体样式，常见的值有normal（正常）、italic（斜体）、oblique（倾斜）。

em {
    font-style: italic; /* 设置字体为斜体 */
}

解释：

normal：正常字体样式。
italic：斜体字体。
oblique：倾斜字体（比斜体效果轻微）。

5. line-height 属性

line-height 属性用于设置文本行高，控制行与行之间的间距。

p {
    line-height: 1.6; /* 设置行高为1.6倍的字体大小 */
}

解释：

数值（如1.6）表示倍数。通常设置为字体大小的1.2至1.6倍，确保文本不会显得拥挤。

二、文本对齐与修饰

1. text-align 属性

text-align 属性用于设置文本的对齐方式。常见值有left、right、center和justify。

h1 {
    text-align: center; /* 将标题文本居中对齐 */
}

解释：

left：文本左对齐（默认值）。
right：文本右对齐。
center：文本居中对齐。
justify：文本两端对齐。

2. text-transform 属性

text-transform 属性用于设置文本的大小写转换。常见值有uppercase（全大写）、lowercase（全小写）和capitalize（首字母大写）。

h2 {
    text-transform: uppercase; /* 将文本转换为大写 */
}

解释：

uppercase：将文本转换为大写。
lowercase：将文本转换为小写。
capitalize：将每个单词的首字母转为大写。

3. text-decoration 属性

text-decoration 属性用于设置文本的修饰效果，常见值有none、underline、overline、line-through。

a {
    text-decoration: underline; /* 为链接文本添加下划线 */
}

解释：

none：没有修饰（默认值）。
underline：文本下划线。
overline：文本上划线。
line-through：文本中划线。

4. letter-spacing 属性

letter-spacing 属性用于设置文本字符之间的间距。

h3 {
    letter-spacing: 2px; /* 设置字符间距为2像素 */
}

解释：

letter-spacing：控制字符间距，单位可以是px、em等。

三、文本阴影

1. text-shadow 属性

text-shadow 属性用于为文本添加阴影效果。它可以接受多个值：阴影的水平偏移量、垂直偏移量、模糊半径和阴影的颜色。

h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 添加一个偏移为2px，模糊半径为4px的阴影 */
}

解释：

2px：阴影的水平偏移量。
2px：阴影的垂直偏移量。
4px：模糊半径，值越大，阴影越模糊。
rgba(0, 0, 0, 0.3)：阴影的颜色，使用RGBA可以设置透明度。

四、文本溢出与省略号

1. text-overflow 属性

text-overflow 属性用于处理文本溢出。常见值有clip（默认，裁剪文本）和ellipsis（显示省略号）。

p {
    white-space: nowrap; /* 禁止文本换行 */
    overflow: hidden; /* 隐藏溢出的文本 */
    text-overflow: ellipsis; /* 用省略号表示溢出的文本 */
}

解释：

white-space: nowrap：禁止文本换行。
overflow: hidden：隐藏溢出的文本。
text-overflow: ellipsis：溢出文本时，显示省略号。

五、字体与文本的常见组合

h1 {
    font-family: "Georgia", serif;
    font-size: 48px;
    font-weight: bold;
    color: #333;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

p {
    font-family: "Arial", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    text-align: justify;
    text-decoration: underline;
}

解释：