第 15 章 CSS 文本样式[下] - 水之原

 学习要点：

1.文本总汇

2.文本样式

3.文本控制

 

主讲教师：李炎恢

 

本章主要探讨 HTML5 中 CSS 文本样式，通过文本样式的设置，更改字体的大小、样式以及文本的方位。

 

一．文本总汇

本节课，我们重点了解一下 CSS 文本样式中文本内容的一些设置方法，样式表如下：

属性名	说明	CSS 版本
text-decoration	装饰文本出现各种划线。	1
text-transform	将英文文本转换大小写。	1
text-shadow	给文本添加阴影	3
text-align	设置文本对齐方式	1,3
white-space	排版中的空白处理方式	1
letter-spacing	设置字母之间的间距	1
word-spacing	设置单词之间的间距	1
line-height	设置行高	1
word-wrap	控制段词	3
text-indent	设置文本首行的缩进	1

 

二．文本样式

CSS 文本样式有三种：文本装饰、英文大小写转换和文本阴影。

1.text-decoration

<span style="color: #800000;">p </span>{<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;"> underline</span>;
}

解释：设置文本出现下划线。属性值如下表：

值	说明
none	让本身有划线装饰的文本取消掉
underline	让文本的底部出现一条下划线

overline	让文本的头部出现一条上划线
line-through	让文本的中部出现一条删除划线
blink	让文本进行闪烁，基本不支持了

 

//让本来有下划线的超链接取消 

<span style="color: #800000;">a </span>{<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;"> none</span>;
}

 

2.text-transform

<span style="color: #800000;">p </span>{<span style="color: #ff0000;">
    text-transform</span>:<span style="color: #0000ff;"> uppercase</span>;
}

解释：设置英文文本转换为大小写。

值	说明
none	将已被转换大小写的值恢复到默认状态
capitalize	将英文单词首字母大写
uppercase	将英文转换为大写字母
lowercase	将英文转换为小写字母

 

3.text-shadow

<span style="color: #800000;">p </span>{<span style="color: #ff0000;">
    text-shadow</span>:<span style="color: #0000ff;"> 5px 5px 3px black</span>;
}

解释：给文本添加阴影。其中四个值，第一个值：水平偏移；第二个值：垂直偏移；第三个值：阴影模糊度（可选）；第四个值：阴影颜色（可选）。

 

三．文本控制

CSS 文本样式中还有一组对文本进行访问、形态进行控制的样式。

1.text-align

<span style="color: #800000;">p </span>{<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;
}

解释：指定文本的对齐方式。

值	说明
left	靠左对齐，默认
right	靠右对齐
center	居中对齐
justify	内容两端对齐
start	让文本处于结束的边界
end	让文本处于结束的边界

start 和 end 属于 CSS3 新增的功能，但目前 IE 和 Opera 尚未支持。

 

2.white-space

<span style="color: #800000;">p </span>{<span style="color: #ff0000;">
    white-space</span>:<span style="color: #0000ff;"> nowrap</span>;
}

解释：处理空白排版方式。

值	说明
normal	默认值，空白符被压缩，文本自动换行
nowrap	空白符被压缩，文本不换行
pre	空白符被保留，遇到换行符则换行
pre-line	空白符被压缩，文本会在排满或遇换行符换行
pre-wrap	空白符被保留，文本会在排满或遇换行符换行

 

3.letter-spacing

<span style="color: #800000;">p </span>{<span style="color: #ff0000;">
    letter-spacing</span>:<span style="color: #0000ff;"> 4px</span>;
}

解释：设置文本之间的间距。

值	说明
normal	设置默认间距
长度值	比如：“数字”+“px”

  

4.word-spacing

<span style="color: #800000;">p </span>{<span style="color: #ff0000;">
    word-spacing</span>:<span style="color: #0000ff;"> 14px</span>;
}

解释：设置英文单子之间的间距。

值	说明
normal	设置默认间距
长度值	比如：“数字”+“px”

 

5.line-height

<span style="color: #800000;">p </span>{<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 200%</span>;
}

解释：设置段落行高。

值	说明
normal	设置默认间距
长度值	比如：“数字”+“px”
数值	比如：1,2,3
%	比如：200%

 

6.word-wrap

<span style="color: #800000;">p </span>{<span style="color: #ff0000;">
    word-wrap</span>:<span style="color: #0000ff;"> break-word</span>;
}

解释：让过长的英文单词断开。

值	说明
normal	单词不断开
break-word	断开单词

 

7.text-indent

<span style="color: #800000;">p </span>{<span style="color: #ff0000;">
    text-indent</span>:<span style="color: #0000ff;"> 20px</span>;
}

解释：设置文本首行的缩进。

值	说明
normal	设置默认间距
长度值	比如：“数字”+“px”