你的位置:首页 > 网页设计

[网页设计]第 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

p {  text-decoration: underline;}

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

说明

none

让本身有划线装饰的文本取消掉

underline

让文本的底部出现一条下划线


overline

让文本的头部出现一条上划线

line-through

让文本的中部出现一条删除划线

blink

让文本进行闪烁,基本不支持了

 

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

a {  text-decoration: none;}

 

2.text-transform

p {  text-transform: uppercase;}

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

说明

none

将已被转换大小写的值恢复到默认状态

capitalize

将英文单词首字母大写

uppercase

将英文转换为大写字母

lowercase

将英文转换为小写字母

 

3.text-shadow

p {  text-shadow: 5px 5px 3px black;}

解释:给文本添加阴影。其中四个值,第一个值:水平偏移;第二个值:垂直偏移;第三个值:阴影模糊度(可选);第四个值:阴影颜色(可选)。

 

三.文本控制

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

1.text-align

p {  text-align: center;}

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


说明

left

靠左对齐,默认

 right

 靠右对齐

center

居中对齐

 justify

 内容两端对齐

start

让文本处于结束的边界

 end

 让文本处于结束的边界

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

 

2.white-space

p {  white-space: nowrap;}

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

说明

normal

默认值,空白符被压缩,文本自动换行

nowrap

空白符被压缩,文本不换行

pre

空白符被保留,遇到换行符则换行

pre-line

空白符被压缩,文本会在排满或遇换行符换行

pre-wrap

空白符被保留,文本会在排满或遇换行符换行

 

3.letter-spacing

p {  letter-spacing: 4px;}

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

说明

normal

设置默认间距

长度值

比如:“数字”+“px”

  

4.word-spacing

p {  word-spacing: 14px;}

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

说明

normal

设置默认间距

长度值

比如:“数字”+“px”

 


5.line-height

p {  line-height: 200%;}

解释:设置段落行高。

说明

normal

设置默认间距

长度值

比如:“数字”+“px”

数值

比如:1,2,3

%

比如:200%

 

6.word-wrap

p {  word-wrap: break-word;}

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

说明

normal

单词不断开

break-word

断开单词

 

7.text-indent

p {  text-indent: 20px;}

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

说明

normal

设置默认间距

长度值

比如:“数字”+“px”