学生网页作业制作必须掌握CSS3文本样式汇总[下]_CSS

本章主要探讨 HTML5 中 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

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

值	说明
none	让本身有划线装饰的文本取消掉
underline	让文本的底部出现一条下划线
overline	让文本的头部出现一条上划线
line-through	让文本的中部出现一条删除划线
blink	让文本进行闪烁，基本不支持了

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

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 新增的功能，高版本才支持。

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”

四：练习源码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用CSS3选择器汇总（下）</title>
<meta name="author" content="云切图">
<link rel="stylesheet" href="css/base.css">
</head>
<body>
<dl>
    <dt>1.text-decoration</dt>
    <style type="text/css">
        .dd_01 ul li:first-child{text-decoration: none;}
        .dd_01 ul li:nth-child(2){text-decoration:underline;}
        .dd_01 ul li:nth-child(3){text-decoration:overline;}
        .dd_01 ul li:nth-child(4){text-decoration:line-through;}
        .dd_01 ul li:nth-child(5){text-decoration:blink;}  
    </style>
    <dd>
        <ul>
            <li>让本身有划线装饰的文本取消掉</li>
            <li>让文本的底部出现一条下划线</li>
            <li>让文本的头部出现一条上划线</li>
            <li>让文本的中部出现一条删除划线</li>
            <li>让文本进行闪烁，基本不支持了</li>
        </ul>
    </dd>
</dl>

<dl>
    <dt>2.text-transform</dt>
    <style type="text/css">
        .dd_02 ul li:nth-child(1){ text-transform: none; } /*默认状态*/
        .dd_02 ul li:nth-child(2){ text-transform: capitalize; } /*首字母大写*/
        .dd_02 ul li:nth-child(3){ text-transform: uppercase; } /*小写转大写*/
        .dd_02 ul li:nth-child(4){ text-transform: lowercase; } /*大写转小写*/
    </style>
    <dd>
        <ul>
            <li>my name is renhaibo</li>
            <li>my name is renhaibo</li>
            <li>my name is renhaibo</li>
            <li>MY NAME IS RENHAIBO</li>
        </ul>  
    </dd>
</dl>

<dl>
    <dt>3.text-shadow</dt>
    <style>
        .dd_03 p{ text-shadow: 0px 5px 3px #999; font-size:30px; font-weight: bold;}
    </style>
    <dd>
        <p>PHP课堂</p>
    </dd>
</dl>

<dl>
    <dt>1.text-align</dt>
    <style>
        .dd_04 ul{width:170px; background: green; }
        .dd_04 ul li{width:100%; height: auto; overflow: hidden;}
        .dd_04 ul li:nth-child(1){ text-align: left; }
        .dd_04 ul li:nth-child(2){ text-align: center; }
        .dd_04 ul li:nth-child(3){ text-align: right; }
        .dd_04 ul li:nth-child(4){ text-align: justify; }
        .dd_04 ul li:nth-child(5){ text-align: start; }
        .dd_04 ul li:nth-child(6){ text-align: end; }
        </style>
    <dd>
        <ul>
            <li>靠左对齐，默认</li>
            <li>居中对齐</li>
            <li>靠右对齐</li>
            <li>内容两端对齐,内容两端对齐</li>
            <li>让文本处于开始的边界</li>
            <li>让文本处于结束的边界</li>
        </ul>
    </dd>
</dl>

<dl>
    <dt>2.white-space</dt>
    <style>
        .dd_05 li{width: 300px; background: green; margin-bottom: 10px;}
        .dd_05 ul li:nth-child(1){white-space: normal;}
        .dd_05 ul li:nth-child(2){white-space: nowrap;}
        .dd_05 ul li:nth-child(3){white-space: pre;}
        .dd_05 ul li:nth-child(4){white-space: pre-line;}
        .dd_05 ul li:nth-child(5){white-space: pre-wrap;}
    </style>
    <dd>
        <ul>
            <li>默认值，空白符被压缩，文本自动换行</li>
            <li>          空白符被压缩，文本不换行----------------------</li>
            <li>          空白符被保留，遇到换行符则换行</li>
            <li>          空白符被压缩，文本会在排满或遇换行符换行</li>
            <li>          空白符被保留，文本会在排满或遇换行符换行</li>
        </ul>
    </dd>
</dl>

<dl>
    <dt>3.letter-spacing word-spacing</dt>
    <style>
        .dd_06 p{ margin: 5px 0; }
        .dd_06 p.p1{ letter-spacing: 20px; } /*解释：设置文本之间的间距。*/
        .dd_06 p.p2{ word-spacing: 40px; } /*解释：设置英文单子之间的间距。*/
        /*解释：设置段落行高。*/
        .dd_06 p.p3{
            width:100px; height: 30px; line-height: 30px; 
            background: green; text-align: center; 
        }
        /*解释：让过长的英文单词断开。*/
        .dd_06 p.p4{ width:160px; background: red;  word-wrap: break-word;}
        .dd_06 p.p5{ width:160px; background: green; text-indent: 2em;}
    </style>
    <dd>
        <p>每天阅读一篇</p>
        <p>my name is css</p>
        <p>网站首页</p>
        <p>mynameisdescription</p>
        <p>每天阅读一篇</p>
    </dd>
</dl>
</body>
</html>