HTML基础

文本样式

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

color

文本颜色

属性名	color
属性值	预定义的颜色名 | 十六进制值的颜色值 | RGB颜色值
默认值	在不同浏览器中，默认值可能不同，但是在大部分浏览器中默认值为黑色。
描述	设置文本的颜色

direction

文本方向

属性名	direction
属性值	ltr | rtl
默认值	ltr
描述	设置文本的方向

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

line-height

文本行高

属性名	line-height
属性值	normal |数字 | 长度值 | 百分百
默认值	normal
描述	设置文本的行高

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

letter-spacing

字符间距

属性名	letter-spacing
属性值	normal | 长度值
默认值	normal
描述	增加或减少字符间的空白（字符间距）

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

text-align

属性名	text-align
属性值	left | right | center | justify
默认值	如果文本方向为ltr，则默认值为left；如果文本方向为rtl，则默认值为right
描述	设置文本在水平方向上的对齐方式

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

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

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

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

text-indent

文本缩进

属性名	text-indent
属性值	长度值 | 百分比
默认值	0
描述	设置首行文本的缩进

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

text-decoration

文本修饰

属性名	text-decoration
属性值	none | underline | overline | line-through | blink
默认值	none
描述	对文本进行修饰

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

text-transform

文本的大小写

属性名	text-transform
属性值	capitalize | uppercase | lowercase | none
默认值	none
描述	控制文本的大小写

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

white-space

如何处理元素内的空白

属性名	white-space
属性值	normal | pre | nowrap | pre-wrap | pre-line
默认值	normal
描述	设置如何处理元素内的空白

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

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

值	空白符	换行符	自动换行
pre-line	合并	保留	允许
normal	合并	忽略	允许
nowrap	合并	忽略	不允许
pre	保留	保留	不允许
pre-wrap	保留	保留	允许

word-spacing

单词间距

属性名	word-spacing
属性值	normal | length
默认值	normal
描述	增加或减少单词间的空白(即字间隔)

• **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 的粗细是相对于上级父元素的继承值而言的。具体情况参考下图：

Inherited value	bolder	lighter
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

列表

无序列表

<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>	定义表格标题。
<thead>	定义表格的页眉。
<tbody>	定义表格的主体。
<tfoot>	定义表格的页脚。
<th>	定义表格的表头。
<tr>	定义表格的行。
<td>	定义表格单元格。

    <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。