专注Java教育14年 全国咨询/投诉热线:400-8080-105
动力节点LOGO图
始于2009,口口相传的Java黄埔军校
首页 hot资讯 浅谈CSS文本格式

浅谈CSS文本格式

更新时间:2021-03-31 17:37:47 来源:动力节点 浏览929次

CSS(层叠样式表)不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS文本格式主要分为:文本颜色(color)、文本对齐方式、文本修饰、文本阴影、文本缩进、文本间距、字间距、文本空白处理、文本转换。下面我们来逐一讲解:
1.文本对齐方式:text-align属性有四个值:left,center,right,justify(两端对齐);属性默认值为auto。
2.文本修饰:text-decoration 属性用来设置或删除文本的修饰。

主要是用来删除超链接的下划线,也可以使用其他值来设置文本的修饰;

text-decoration:overline,设置文本上划线。

text-decoration:line-through; 设置文本中间划线。

text-decoration:underline; 设置文本下划线。
3.文本阴影:text-shadow: x y shadow color;

其中 x 是水平阴影的偏移值,

y 是垂直阴影的偏移值,

shadow 用于指定阴影的模糊值,即模糊效果的作用距离,不允许负值。

color 指定阴影的颜色。该属性有两个作用,产生阴影和模糊主体。
4.文本缩进:用来指定文本的首行缩进,允许为负值,如果值是负数,第一行则向左缩进。

CSS表示为:text-indent:2em,em 是相对文字大小的单位,1em 就是1个文字大小,2em 就是两个文字大小。
5.文本间距:行高,也就是文本行的高度。例如:line-height:22px;
6.字间距:letter-spacing 和 word-spacing 这两个属性都可用来增加或减少文本间的空白,即字间距。

不同的是:
letter-spacing 属性设置字符间距,而 word-spacing 属性设置单词间距。
注意:word-spacing 属性对中文无效,因此在设置中文的字间距时请使用 letter-spacing 属性。
letter-spacing 和 text-align:justify 是两个冲突的属性,不能同时使用;

text-align:justify 是设置内容根据宽度自动调整字间距,使各行的长度恰好相等,实现文本两端对齐效果,

而 letter-spacing 是指定一个固定的字间距。
7.文本空白处理:white-space 属性指定元素内的空白如何处理,默认值为 normal 空白会被浏览器忽略。
该属性还有4个值:

nowrap 文本不会换行,禁止换行,文本会在同一行上继续,直到遇到 <br> 标签为止。
pre 空白会被浏览器保留,这种方式类似 HTML 中的 <pre> 标签,用于定义预格式文本。
pre-wrap 指定保留空白符序列,但是正常地进行换行。
pre-line 指定合并空白符序列,但是保留换行符,并允许自动换行。
8.文本转换:text-transform 属性控制文本中的字母。

是用来指定在一个文本中的大写和小写字母,可用于将所有字句变成大写或小写字母,或每个单词的首字母大写。
text-transform:capitalize, 定义文本中的每个单词以大写字母开头。
text-transform:uppercase,定义文本仅有大写字母。
text-transform:lowercase,定义文本仅有小写字母。
以上就是对CSS文本格式的非常详细的讲解,包含了CSS文本格式中的各个细分的细节。在本站的CSS教程中,对CSS布局和CSS属性都有很好的讲解,要学习CSS技术的小伙伴千万不要错过。

提交申请后,顾问老师会电话与您沟通安排学习

免费课程推荐 >>
技术文档推荐 >>