概述
文章目录
- 文本样式
- color
- direction
- line-height
- letter-spacing
- text-align
- text-indent
- text-decoration
- text-transform
- white-space
- word-spacing
- 字体样式
- 列表
- 无序列表
- 有序列表
- 定义列表
- 列表样式
- 表格
- 表格
- 表格样式
- 表格样式
文本样式
[外链图片转存失败(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
。
最后
以上就是俭朴荔枝为你收集整理的HTML基础文本样式字体样式列表表格的全部内容,希望文章能够帮你解决HTML基础文本样式字体样式列表表格所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复