我是靠谱客的博主 俭朴荔枝,最近开发中收集的这篇文章主要介绍HTML基础文本样式字体样式列表表格,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

文章目录

  • 文本样式
    • 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:设置字体风格,默认值为normalitalic是用来指定使用斜体版本,oblique强制将字体倾斜。
  • font-variant:设置小号的大写字母,只对英文有效,作为了解内容。
  • font-weight:设置字体的粗细。normal bold bolder lighter 100~900
  • font:字体属性的简写。

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

Inherited valuebolderlighter
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700

列表

无序列表

<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:设置列表项标识是否属于列表项的内容,outsideinside
  • 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:是否显示空的单元格,默认值是showhide
  • caption-side:设置表格标题的位置,默认值是topbottom
表尾 表尾 ```

表格样式

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

最后

以上就是俭朴荔枝为你收集整理的HTML基础文本样式字体样式列表表格的全部内容,希望文章能够帮你解决HTML基础文本样式字体样式列表表格所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(47)

评论列表共有 0 条评论

立即
投稿
返回
顶部