CSS样式基础
CSS文本属性
重要程度：6 分
<h2>CSS 文本属性</h2>
<p>在 CSS 中，文本属性用于控制 HTML 元素中文本的外观。</p>
<h3>1. color 属性</h3>
<p>color 属性用于设置文本的颜色。</p>
<pre>
<span style="color: red;">color: red;</span>
</pre>
<h3>2. text-align 属性</h3>
<p>text-align 属性用于设置文本的水平对齐方式。</p>
<ul>
<li><span style="text-align: left;">left：左对齐</span></li>
<li><span style="text-align: center;">center：居中对齐</span></li>
<li><span style="text-align: right;">right：右对齐</span></li>
</ul>
<h3>3. text-decoration 属性</h3>
<p>text-decoration 属性用于设置文本的装饰效果。</p>
<ul>
<li><span style="text-decoration: none;">none：无装饰</span></li>
<li><span style="text-decoration: underline;">underline：下划线</span></li>
<li><span style="text-decoration: line-through;">line-through：删除线</span></li>
<li><span style="text-decoration: overline;">overline：上划线</span></li>
</ul>
<h3>4. text-transform 属性</h3>
<p>text-transform 属性用于控制文本的大小写。</p>
<ul>
<li><span style="text-transform: none;">none：默认</span></li>
<li><span style="text-transform: uppercase;">uppercase：全部大写</span></li>
<li><span style="text-transform: lowercase;">lowercase：全部小写</span></li>
<li><span style="text-transform: capitalize;">capitalize：每个单词首字母大写</span></li>
</ul>
<h3>5. letter-spacing 属性</h3>
<p>letter-spacing 属性用于设置字符之间的间距。</p>
<pre>
letter-spacing: 2px;
</pre>
<h3>6. word-spacing 属性</h3>
<p>word-spacing 属性用于设置单词之间的间距。</p>
<pre>
word-spacing: 4px;
</pre>
<h3>7. line-height 属性</h3>
<p>line-height 属性用于设置行间距。</p>
<pre>
line-height: 1.5;
</pre>
<h3>8. white-space 属性</h3>
<p>white-space 属性用于定义如何处理元素内的空白符。</p>
<ul>
<li><span style="white-space: normal;">normal：默认行为，空白会被折叠，文本会换行</span></li>
<li><span style="white-space: pre;">pre：空白符被保留，文本不会自动换行</span></li>
<li><span style="white-space: nowrap;">nowrap：空白符被保留，文本不会换行</span></li>
</ul>
<h3>例题</h3>
<p>假设我们有一个段落，要求如下：</p>
<ul>
<li>文本颜色为蓝色</li>
<li>文本左对齐</li>
<li>文本有下划线</li>
<li>文本全部大写</li>
<li>字符间距为 1px</li>
<li>单词间距为 2px</li>
<li>行间距为 1.5</li>
<li>空白符被保留且文本不换行</li>
</ul>
<pre>
<p style="color: blue; text-align: left; text-decoration: underline; text-transform: uppercase; letter-spacing: 1px; word-spacing: 2px; line-height: 1.5; white-space: pre;">Hello World!</p>
</pre>