文本样式

[外链图片转存失败(img-EHEBoTpr-1568192131791)(./images/text.png)]

color

文本颜色

direction

文本方向

• ltr：指的是 left to right 表示从左到右。
• rtl：指的是 right to left ，表示从右到左。

line-height

文本行高

• normal：默认值，行高由浏览器自动处理。
• 数字：行高 = 数字 * 字体大小，例如，line-height: 2;font-size: 16px;，则行高等于：2 * 16px = 32px
• 长度值：使用长度值设置行高，例如，line-height: 32px。
• 百分比：基于当前字体大小的百分比。

letter-spacing

字符间距

• **normal：**默认间隔
• **长度值：**用长度值指定间隔。可以为负值。

text-align

• **left：**内容左对齐。

• **center：**内容居中对齐。

• **right：**内容右对齐。

• **justify：**内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理。

text-indent

文本缩进

**长度值：**用长度值指定文本的缩进。可以为负值。
**百分比：**用百分比指定文本的缩进。百分比是相对于包含块的宽度。可以为负值。

text-decoration

文本修饰

• **none：**指定文字无装饰
• **underline：**指定文字的装饰是下划线
• **overline：**指定文字的装饰是上划线
• **line-through：**指定文字的装饰是贯穿线
• **bink：**设置闪烁的字体，但大部分浏览器都不支持该属性值

text-transform

文本的大小写

• **none：**无转换
• **capitalize：**将每个单词的第一个字母转换成大写
• **uppercase：**将每个单词转换成大写
• **lowercase：**将每个单词转换成小写

white-space

如何处理元素内的空白

• **normal：**默认处理方式。空白会被浏览器忽略
• **pre：**用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。
• **nowrap：**强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。
• **pre-wrap：**用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
• **pre-line：**保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。

下面的表格给总结了 white-space 属性的行为：

word-spacing

单词间距

• **normal：**默认间隔
• **length：**用长度值指定间隔。可以为负值。

字体样式

CSS 字体属性定义了文本的字体系列、大小、加粗、风格（例如斜体）和变形（例如小型大写字母）。

font-size 设置字体大小

• font-size，设置字体的大小。
• font-family：设置使用哪种字体，可以设置某个具体的字体，还可以设置某个字体系列的名字。
• font-style：设置字体风格，默认值为normal，italic是用来指定使用斜体版本，oblique强制将字体倾斜。
• font-variant：设置小号的大写字母，只对英文有效，作为了解内容。
• font-weight：设置字体的粗细。normal bold bolder lighter 100~900。
• font：字体属性的简写。

bolder 和 lighter 的粗细是相对于上级父元素的继承值而言的。具体情况参考下图：

列表

无序列表

<ul>：定义无序列表，并且只能包含<li>子元素。
<li>：定义列表项，可以包含与<div>完全类似的内容，所以可以包含较多类型的子元素。

<ul>
<li>无序列表项</li>
<li>无序列表项</li>
<li>无序列表项</li>
</ul>

有序列表

<ol>：定义有序列表。
<li>：定义列表项，可以包含与<div>完全类似的内容，所以可以包含较多类型的子元素。

<ol>
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
</ol>

定义列表

<dl>：定义列表
<dt>：定义术语
<dd>：定义描述

<dl>
<dt>质数</dt>
<dd>质数又称素数。一个大于1的自然数，除了1和它自身外，不能被其他自然数整除的数叫做质数。</dd>
</dl>

列表样式

• list-style-type：设置列表项之前的标识。
• list-style-image：设置图片为列表的标识。
• list-style-position：设置列表项标识是否属于列表项的内容，outside、inside。
• list-style：列表样式的简写。

表格

表格

<table>
<caption>表头</caption>
<thead>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表尾</td>
<td>表尾</td>
<td>表尾</td>
<td>表尾</td>
<td>表尾</td>
<td>表尾</td>
</tr>
</tfoot>
</table>

表格样式

• border-collapse：合并单元格之间的空隙，默认值是separate, collapse。
• border-spacing：控制单元格之间的空隙，只有在border-collapse: separate;有作用。
• empty-cells：是否显示空的单元格，默认值是show， hide。
• caption-side：设置表格标题的位置，默认值是top，bottom。

表格样式

• border-collapse：合并单元格之间的空隙，默认值是separate, collapse。
• border-spacing：控制单元格之间的空隙，只有在border-collapse: separate;有作用。
• empty-cells：是否显示空的单元格，默认值是show， hide。
• caption-side：设置表格标题的位置，默认值是top，bottom。

最后

以上就是俭朴荔枝最近收集整理的关于HTML基础文本样式字体样式列表表格的全部内容，更多相关HTML基础文本样式字体样式列表表格内容请搜索靠谱客的其他文章。