视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
CSS常用文本样式实例介绍
2020-11-27 16:41:34 责编:小采
文档


CSS文本样式是相对于内容进行的样式修饰。由于在层叠关系中,内容要高于背景。所以文本样式相对而言更加重要。有些人对文本和字体样式之间的不同不太了解,简单地讲,文本是内容,而字体则用于显示这个内容。本文将详细介绍文本相关样式。

css text-indent首行缩进

定义:首行缩进是将段落的第一行缩进,这是常用的文本格式化效果。一般地,中文写作时开头空两格,类似于此。

注意:该属性可以为负值

text-indent值: | | inherit

text-indent初始值: 0

text-indent应用于: 块级元素(包括block和inline-block)

text-indent继承性: 有

text-indent百分数: 相对于包含块的宽度

CSS text-indent 实例

缩进段落的第一行50像素:








文本缩进属性是用来指定文本的第一行的缩进。 p {text-indent:50px;}p {text-indent:50px;} p {text-indent:50px;}p {text-indent:50px;}

在线运行

参考阅读:CSS text-indent

css text-align 水平对齐

text-align定义:水平对齐是影响一个元素中的文本的水平对齐方式。

text-align值: left | center | right | justify | inherit

text-align初始值: left

text-align应用于: 块级元素(包括block和inline-block)

text-align继承性: 有

css text-align实例

h1, h2, 和 h3元素设置文本的对齐方式:








CSS text-align 实例

2015 年 3 月 14 号

“当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界, 我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最 后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到: 如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下, 我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。”

注意: 重置浏览器窗口大小查看 "justify" 是如何工作的。

在线运行

参考阅读:CSS text-align

css word-spacing字间隔

字间隔是指单词间距,用来设置文字或单词之间的间距。实际上,"字"表示的是任何非空白符字符组成的串,并由某种空白符包围

[注意]单词之间用空格分开,单词之间的间距 = word-spacing + 空格大小

[注意]字间隔可为负值

word-spacing值: | normal | inherit

word-spacing初始值: normal(默认为0)

word-spacing应用于: 所有元素

word-spacing继承性: 有

css word-spacing实例:

指定段字之间的空间,应该是30像素:








This is some text. This is some text.

在线运行

参考阅读:CSS word-spacing

css letter-spacing字母间隔

字母间隔是指字符间距

[注意]字母间隔可为负值

letter-spacing值: | normal | inherit

letter-spacing初始值: normal(默认为0)

letter-spacing应用于: 所有元素

letter-spacing继承性: 有

CSS letter-spacing 实例

设置为h1和h2元素的字母间距:








This is heading 1

This is heading 2

在线运行

参考阅读:CSS letter-spacing

css text-transform文本转换 

text-transform文本转换用于处理英文的大小写转换

text-transform值: uppercase(全大写) | lowercase(全小写) | capitalize(首字母大写) | none | inherit

text-transform初始值: none

text-transform应用于: 所有元素

text-transform继承性: 有

CSS text-transform 实例

转换不同元素中的文本:








This is some text.

This is some text.

This is some text.

在线运行

参考阅读:CSS text-transform

css text-decoration文本修饰

text-decoration文本修饰用于为文本提供修饰线

[注意]text-decoration文本修饰线的颜色与文本颜色相同

text-decoration值: none | [underline(下划线) || overline(上划线) || line-through(中划线)] | inherit

text-decoration初始值: none

text-decoration应用于: 所有元素

text-decoration继承性: 无

CSS text-decoration 实例

设置h1,h2,h3和h4元素文本装饰:








This is heading 1

This is heading 2

This is heading 3

在线运行

参考阅读:CSS text-decoration

下载本文
显示全文
专题