文本样式
color
文本颜色
属性名 | color |
---|---|
属性值 | 预定义的颜色名 | 十六进制值的颜色值 | RGB颜色值 |
默认值 | 依赖用户代理 |
描述 | 设置文本的颜色 |
direction
文本方向(
属性名 | direction |
---|---|
属性值 | ltr | rtl |
默认值 | ltr |
描述 | 设置文本的方向 |
line-height
文本行高
属性名 | line-height |
---|---|
属性值 | normal |数字 | 长度 | 百分百 |
默认值 | normal |
描述 | 设置文本的行高 |
letter-spacing
字符间距
属性名 | letter-spacing |
---|---|
属性值 | normal | 长度 |
默认值 | normal |
描述 | 增加或减少字符间的空白(字符间距) |
- normal:默认间隔
- length:用长度值指定间隔。可以为负值。
text-align
属性名 | text-align |
---|---|
属性值 | left | right | center | justify |
默认值 | 如果文本方向为ltr,则默认值为left;如果文本方向为rtl,则默认值为right |
描述 | 设置文本在水平方向上的对齐方式 |
- left:内容左对齐。
- center:内容居中对齐。
- right:内容右对齐。
- justify:内容两端对齐,但对于强制打断的行(被打断的这一行)及最后一行(包括仅有一行文本的情况,因为它既是第一行也是最后一行)不做处理。
text-indent
文本缩进
属性名 | text-indent |
---|---|
属性值 | | |
默认值 | 0 |
描述 | 设置首行文本的缩进 |
length:用长度值指定文本的缩进。可以为负值。 percentage:用百分比指定文本的缩进。百分比是相对于包含块的宽度。可以为负值。
text-decoration
文本修饰
属性名 | text-decoration |
---|---|
属性值 | none | [ underline || overline || line-through || blink ] |
默认值 | none |
描述 | 对文本进行修饰 |
- none:指定文字无装饰
- underline:指定文字的装饰是下划线
- overline:指定文字的装饰是上划线
- line-through:指定文字的装饰是贯穿线
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:保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换行。
word-spacing
单词间距
属性名 | word-spacing |
---|---|
属性值 | normal | |
默认值 | normal |
描述 | 增加或减少单词间的空白(即字间隔) |
- normal:默认间隔
- length:用长度值指定间隔。可以为负值。
字体样式
-
font-size
,设置字体的大小,最常用的值是长度(14px) -
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
。