前端CSS基础5（修饰文本样式的各种元素和属性）

前端CSS基础5（修饰文本样式的各种元素及属性）

常用文本属性

常用文本属性

color: 设置文本颜色。
font-family: 指定字体系列。
font-size: 设置字体大小。
font-weight: 控制字体粗细。
font-style: 定义字体风格，如斜体。
这些内容上期已有，不再赘述。
点击此蓝色字体链接进行学习哟

text-align: 指定文本对齐方式（水平）（left, right, center, justify）。
left：文本左对齐。
right：文本右对齐。
center：文本居中对齐。
justify：文本两端对齐。

p {text-align: center;
}

text-decoration: 添加文本装饰，如下划线、删除线等。
下划线：

a {text-decoration: underline;
}

dottd虚线或者wavy波浪线，下划的红色虚线，注意无顺序要求和需要空格隔开

a {text-decoration: underline dotted red;/*dottd虚线或者wavy波浪线，下划的红色虚线，注意顺序和空格隔开*/
}

删除线：

del {text-decoration: line-through;
}

上划线：

span {text-decoration: overline;
}

两条线：

p {text-decoration: underline overline;
}

line-height: 设置行高
line-height 属性可接受的常见值类型：
绝对单位（px、pt、cm、em等）
相对单位（百分比）
无单位数值（数字），常用这种，一般参考自身font-size的倍数（二倍行距）
normal（与元素的字体相关，通常默认值为1.2）
行高最小为0

p {line-height: 1.5;
}

line-height（行高）和 height（高度）的区别和属性
区别
line-height（行高）和 height（高度）是两个不同的CSS属性。
line-height 用于控制单行文本的行间距，即文字基线之间的垂直距离。
height 用于设置元素的高度，可以是块级元素或行内元素的高度。
联系：

line-height 可以影响元素内文本行的垂直对齐和整体美观性，而 height 则定义了元素自身的高度。
在某些情况下，line-height 的值可以影响元素的实际高度。例如，当一个元素只包含单行文字时，line-height 和 height 可能会相互影响，以确保文字垂直居中显示或达到设计要求的效果。
此外，在一些布局中，可以使用 line-height 这一属性来控制元素的高度，因为它也会影响元素的最终高度表现。

letter-spacing: 调整字符（单词）间距。

h1 {letter-spacing: 2px;
}

word-spacing: 调整单词间距。

p {word-spacing: 5px;
}

text-transform: 控制文本转换，如大写、小写等。
大写字母

h2 {text-transform: uppercase;
}

小写字母

p {text-transform: lowercase;
}

text-shadow: 添加文本阴影效果。

h3 {text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

在 text-shadow 属性中，数字与单位的含义如下：

第一个数字（2px）：表示阴影水平偏移量，即阴影水平方向上的位置偏移量。
第二个数字（2px）：表示阴影垂直偏移量，即阴影垂直方向上的位置偏移量。
第三个数字（4px）：表示阴影模糊半径，即阴影边缘的模糊程度。
rgba(0, 0, 0, 0.5)：表示阴影颜色和透明度。这里的颜色是黑色 (0, 0, 0)，透明度为 0.5。
因此，在你提供的代码示例中，text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 表示为文本添加了一个水平偏移为2像素，垂直偏移为2像素，模糊半径为4像素，颜色为黑色且透明度为0.5的阴影效果。
text-indent：文本缩进

p {text-indent: 10px;
}
p {font-size:5pxtext-indent: 10px;
}
/*缩进两个单元，一般是font-size的二倍*/

这些属性可以帮助你控制文本的外观和样式，使你能够创建各种视觉效果。

文本对齐（垂直）可以用height和Line-height进行垂直文本对齐

居中将 line-height 设置为与容器高度相同line-height=height。这样文本就会垂直居中显示在容器中。

.container {height: 100px; /* 设置容器的高度 */line-height: 100px; /* 设置行高等于容器高度 */text-align: center; /* 文本水平居中对齐 */border: 1px solid black; /* 可视化展示容器边界 */
}<div class="container">Your centered text here.
</div>

顶部：无需任何属性
底部：只能对于单行文字：line-height=(height*2)-font-size-x。
x是根据字体族，动态决定的一个值。

文本垂直对齐使用vertical-align 属性

vertical-align 属性用于控制行内元素或表格单元格中的内容在垂直方向上的对齐方式。
基本用法：
vertical-align: baseline;：默认值，使元素基线与父元素的基线对齐。
vertical-align: top;：使元素的顶部与行框的顶部对齐。
vertical-align: middle;：使元素垂直居中对齐。
vertical-align: bottom;：使元素的底部与行框的底部对齐。
其他常用值：
vertical-align: sub;：将元素的基线与父元素的下标基线对齐。
vertical-align: super;：将元素的基线与父元素的上标基线对齐。
vertical-align: text-top;：使元素的顶部与父元素字体的顶部对齐。
vertical-align: text-bottom;：使元素的底部与父元素字体的底部对齐。
vertical-align: inherit;：继承父元素的 vertical-align 值。
适用范围：