欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-05 12:31:56
...

学习要点:

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”