[CSS]-4-css文本样式
引言
这篇文章介绍如何使用CSS控制页面中的文字样式。
文章目录
- 0×1.固定字体大小
- 0×2.相对字体大小
- 0×3.小型大写字母
- 0×4.配置样式冲突
- 0×5.文字倾斜效果
- 0×6.文字加粗效果
- 0×7.字体选择器
- 0×8.字体综合配置
- 0×9.使用外部统一字体
- 0×10.下划线，上划线，删除线
- 0×11.去掉超链接默认下划线
- 0×12.英文字母大小写转换
- 0×13.给文本添加阴影效果
- 0×14.文本对齐方式
- a.居中对齐
- b.居右对齐
- c.两端对齐
- d.css3居左居右对齐
- 0×15.文本空白处理
- 0×16.文本字符间距
- 0×17.行间距
- 0×18.长单词自动换行
- 0×19.段落首行缩进
- 0×20.文本裁剪与省略标识
- 0×21.文字描边
0×1.固定字体大小
除了上一篇文章中介绍的文字大小设置方法外，css还提供了一种固定的文字大小配置方案，这些方法并不是很常用，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>固定字体大小实例</title>
<style type="text/css">
<!--字体从小到大排列，从表面上看，xx-small和x-small的字体大小差不多-->
#p1{
font-size: xx-small;
}
#p2{
font-size: x-small;
}
#p3{
font-size: small;
}
#p4{
font-size: medium;
}
#p5{
font-size: large;
}
#p6{
font-size: x-large;
}
#p7{
font-size: xx-large;
}
</style>
</head>
<body>
<p id="p1">www.qingsword.com</p>
<p id="p2">www.qingsword.com</p>
<p id="p3">www.qingsword.com</p>
<p id="p4">www.qingsword.com</p>
<p id="p5">www.qingsword.com</p>
<p id="p6">www.qingsword.com</p>
<p id="p7">www.qingsword.com</p>
</body>
</html>
显示效果：
www.qingsword.com
www.qingsword.com
www.qingsword.com
www.qingsword.com
www.qingsword.com
www.qingsword.com
www.qingsword.com
0×2.相对字体大小
除了上一篇文章中介绍的使用em和百分比实现相对大小外，还有两种固定的相对字体大小配置方法，以及一种可变的相对字体大小配置方法，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>相对字体大小实例</title>
<style type="text/css">
<!--分别配置html标签和body标签的字体大小-->
html{
font-size: 10px;
}
body{
font-size: 15px;
}
<!--相对于id为p2的标签的父系标签（本例为body），其字体小于父系标签配置的字体，如果父系标签没有配置字体大小，则相对于本地浏览器默认字体大小-->
#p2{
font-size: smaller;
}
<!--大于其父系标签配置的字体大小，如果父系标签没有配置字体大小，同上-->
#p3{
font-size: larger;
}
<!--em是相对本标签或其父系font-size属性，rem仅相对于html标签，所以p4的字体大小应该是3*10=30px-->
#p4{
font-size: 3rem;
}
</style>
</head>
<body>
<!--p1没有配置字体大小，使用其父系body中设置的大小15px-->
<p id="p1">www.qingsword.com</p>
<p id="p2">www.qingsword.com</p>
<p id="p3">www.qingsword.com</p>
<p id="p4">www.qingsword.com</p>
</body>
</html>
显示效果：
www.qingsword.com
www.qingsword.com
www.qingsword.com
www.qingsword.com
0×3.小型大写字母
让小写字母以小型大写字母显示，有些东西，语言很难解释清楚，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>小型大写字母实例</title>
<style type="text/css">
<!--配置p1中的英文字母以小型大写字母显示，可以明显看到，英文网址和后面的汉字的高度不一致，如果是大型大写字母，两者的高度应该一致-->
#p1{
font-size: 20px;
font-variant: small-caps;
}
</style>
</head>
<body>
<!--根据css配置，转换成小型大写字母显示-->
<p id="p1">www.qingsword.com 晴刃</p>
<!--正常的大写字母-->
<p>WWW.QINGSWORD.COM 晴刃</p>
</body>
</html>
显示效果：
www.qingsword.com 晴刃
WWW.QINGSWORD.COM 晴刃
0×4.配置样式冲突
子标签的CSS样式如果不想继承父元素都可以使用样式冲突来清除父元素的样式属性，样式冲突的原理是基于CSS优先级的，在本系列第一篇文章中已经介绍过，用高优先级的样式去覆盖低优先级的样式，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>样式冲突实例</title>
<style type="text/css">
<!--在p标签中包含了一个span标签，span标签中包含了英文网址，现在p标签和span标签同时配置了font-variant属性，p标签中设置了小型大写字母的属性，根据css选择优先级，span标签中的英文网址不会转换成小型大写字母形式，而是保持默认的小写字母形式，css中大多数的属性都有normal这个值（如果有），可以使用他来让某个标签的某个属性不跟随其父级样式，保持默认状态-->
#p1{
font-variant: small-caps;
}
span{
font-variant: normal;
}
</style>
</head>
<body>
<p id="p1"><span>www.qingsword.com</span> 晴刃</p>
</body>
</html>
显示效果：
www.qingsword.com 晴刃
0×5.文字倾斜效果
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>文字倾斜效果实例</title>
<style type="text/css">
<!--让p中的文字倾斜显示-->
#p1{
font-style: italic;
}
</style>
</head>
<body>
<p id="p1">www.qingsword.com 晴刃</p>
</body>
</html>
显示效果：
www.qingsword.com 晴刃
0×6.文字加粗效果
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>文字加粗效果实例</title>
<style type="text/css">
<!--使p中的文字加粗显示-->
#p1{
font-weight: bold;
}
</style>
</head>
<body>
<p id="p1">www.qingsword.com 晴刃</p>
</body>
</html>
显示效果：
www.qingsword.com 晴刃
0×7.字体选择器
font-family是css中最常用的一个属性，用于设置标签区块的字体，现在常用来设置整个网站页面所使用的字体（例如微软雅黑，宋体，等宽黑体等等），请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>字体选择器实例</title>
<style type="text/css">
<!--系统会到自己的字体库里面逐项寻找下面的字体，Helvetica类字体拥有最高优先级其次是Arial，然后是微软雅黑，以此类推，如果字体列表里面匹配不到下面的所有字体，则会使用系统默认的字体样式-->
#p1{
font-family: "Helvetica Neue", Helvetica, Arial,"微软雅黑","Microsoft Yahei","Microsoft Yahei UI", SimHei, "\5B8B\4F53", simsun, sans-serif;
}
</style>
</head>
<body>
<!--你可能会发现这和本站其他的段落文字字体没有什么区别，是这样的，因为上面这个字体选择器就是本站的全局字体选择器-->
<p id="p1">www.qingsword.com 晴刃</p>
</body>
</html>
显示效果：
www.qingsword.com 晴刃
0×8.字体综合配置
上面介绍的几种字体配置实际上可以罗列在font属性里面，格式如下：
font:[是否倾斜|是否加粗|是否转小型大写] 字体大小 字体样式;
前面三个属性为可选，字体大小和字体样式为必选参数，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>字体综合配置实例</title>
<style type="text/css">
<!--按照上文介绍的格式配置每个属性，属性和属性之间用空格隔开，本例直接在font属性中配置p中的文字为斜体加粗，并且将其中的英文转化成小型大写字母，字体大小25px，最后是字体样式-->
#p1{
font: italic bold small-caps 25px 微软雅黑,sans-serif;
}
</style>
</head>
<body>
<p id="p1">www.qingsword.com 晴刃</p>
</body>
</html>
显示效果：
www.qingsword.com 晴刃
Ps：注意，使用这种综合配置时，字体样式可以使用逗号分隔不同字体，但字体名称不能使用引号，否则配置会失效。
0×9.使用外部统一字体
上面的字体选择器中，我们罗列了用户计算机中可能存在的字体列表，但有时候我们自己设计了某种漂亮的字体，如果想让客户端显示出这种字体，可以使用"服务器端字体"，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>服务端字体配置实例</title>
<style type="text/css">
<!--配置p1的字体为我们自定义的字体"qingsword"-->
#p1{
font-family: "qingsword";
}
<!--使用font-face来自定义字体，font-family后面是我们自定义的字体名称，src:url("字体文件的相对或绝对路径")，本例假设"UnPilgiBold.ttf"这个字体和这段html文档在相同的目录下-->
@font-face{
font-family: "qingsword";
src:url("UnPilgiBold.ttf");
}
</style>
</head>
<body>
<p id="p1">www.qingsword.com 晴刃</p>
</body>
</html>
0×10.下划线，上划线，删除线
在本站HTML系列文章的"内联元素"中演示过删除线和下划线，当时使用了HTML的两个固定标签，那并不是推荐的方式，推荐使用css来实现这些功能，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>上划线,下划线,删除线配置实例</title>
<style type="text/css">
<!--下划线-->
#p1{
text-decoration: underline;
}
<!--上划线-->
#p2{
text-decoration: overline;
}
<!--删除线-->
#p3{
text-decoration: line-through;
}
</style>
</head>
<body>
<p id="p1">www.qingsword.com</p>
<p id="p2">www.qingsword.com</p>
<p id="p3">www.qingsword.com</p>
</body>
</html>
显示效果：
www.qingsword.com
www.qingsword.com
www.qingsword.com
0×11.去掉超链接默认下划线
默认情况下超链接的文字都会显示一个下划线，但有时候为了美观，我们不希望显示这个下划线，可以通过css来实现，和上面的例子使用的是同一个属性text-decoration，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>去掉超链接下划线实例</title>
<style type="text/css">
<!--使用none参数，不显示a标签的下划线-->
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="http://www.qingsword.com" title="晴刃">www.qingsword.com</a>
</body>
</html>
显示效果：
0×12.英文字母大小写转换
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>英文字母大小写转换实例</title>
<style type="text/css">
<!--将id为p1的标签中的内容转换成大写字母-->
#p1{
text-transform: uppercase;
}
<!--转换成小写字母-->
#p2{
text-transform: lowercase;
}
<!--每个英文单词的首字母大写-->
#p3{
text-transform: capitalize;
}
</style>
</head>
<body>
<p id="p1">www.qingsword.com</a>
<p id="p2">WWW.QINGSWORD.COM</a>
<p id="p3">qing sword</p>
</body>
</html>
显示效果：
WWW.QINGSWORD.COM
www.qingsword.com
Qing Sword
0×13.给文本添加阴影效果
text-shadow属性能够给文本添加阴影效果，这是css3新增加的属性之一，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>文本阴影实例</title>
<style type="text/css">
<!--text-shadow第一个参数让阴影向下偏移4像素，第二个参数让阴影向右偏移3像素，第三个参数是阴影模糊2像素，最后是阴影的颜色，前两个参数为必选参数，后两个参数为可选参数-->
#p1{
font-size: 30px;
text-shadow: 4px 3px 2px pink;
}
<!--如果想让阴影往反方向偏移，可以使用"负号"，本例p2中的阴影向上偏移4像素，向左偏移3像素，3像素的阴影模糊-->
#p2{
font-size: 30px;
text-shadow: -4px -3px 3px yellow;
}
</style>
</head>
<body>
<p id="p1">www.qingsword.com 晴刃</a>
<p id="p2">www.qingsword.com 晴刃</a>
</body>
</html>
显示效果：
www.qingsword.com 晴刃
www.qingsword.com 晴刃
Ps：注意：IE需要≥10以上的版本才支持这个属性。
0×14.文本对齐方式
a.居中对齐
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>文本居中对齐实例</title>
<style type="text/css">
<!--将p标签背景设置成粉色，将其中的文字设置成黑色并且居中对齐-->
#p1{
background-color: pink;
text-align: center;
color: black;
}
</style>
</head>
<body>
<p id="p1">www.qingsword.com</a>
</body>
</html>
显示效果：
www.qingsword.com
b.居右对齐
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>文本居右对齐实例</title>
<style type="text/css">
<!--文字居右对齐-->
#p1{
background-color: pink;
text-align: right;
color: black;
}
</style>
</head>
<body>
<p id="p1">www.qingsword.com</a>
</body>
</html>
显示效果：
www.qingsword.com
c.两端对齐
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>两端对齐实例</title>
<style type="text/css">
<!--设置p标签的宽度是170，然后使用两段对齐-->
#p1{
width: 170px;
background-color: pink;
text-align: justify;
color: black;
}
</style>
</head>
<body>
<p id="p1">qing sword qing sword qing sword qing sword qing sword</p>
</body>
</html>
显示效果：
qing sword qing sword qing sword qing sword qing sword
使用两端对齐后，p中的每一行空格都被均匀的分配，使得显示的每一行两端都是顶格对齐的：qing sword qing sword qing sword qing sword qing sword
d.css3居左居右对齐
这是css3中新增的属性值，和css2中的默认居左对齐以及居右对齐的显示效果相同：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>css3居左居右对齐实例</title>
<style type="text/css">
<!--"text-align: end;"属性使得p中的文本移动到块的末尾处，如果是"text-align: start;"则是移动到块的开始处-->
#p1{
background-color: pink;
text-align: end;
color: black;
}
</style>
</head>
<body>
<p id="p1">www.qingsword.com</p>
</body>
</html>
显示效果：
www.qingsword.com
0×15.文本空白处理
默认情况下，浏览器处理文本空白的时候，将字符之间的多个空白当做一个空白处理，将超出块元素或浏览器宽度的文本自动换行：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>空白处理方式实例</title>
<style type="text/css">
#d1{
background-color: pink;
color: black;
width:100px;
height:100px;
}
</style>
</head>
<body>
<!--代码中在"晴"和"刃"字之间有多个空格，但浏览器解释器在显示这段代码时，会自动将多个空格合并成一个空格，这是默认对空格的处理方式，另外，当内容文字的长度超过了其容器（div）设置的宽度（100px）时，超出的文本将会被自动换行（长单词除外）-->
<div id="d1">晴 刃|qingsword 晴 刃|qingsword</div>
</body>
</html>
显示效果：
下面的css配置可以让div容器中的文字不自动换行，并且保留div容器文字间的空格（有多少空格，就显示多少个空格）：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>空白处理方式实例</title>
<style type="text/css">
<!--"white-space: pre;"属性告诉浏览器解释器，d1中的文字保留其原有的格式（保留空格，并且不会自动换行，超出的部分会越过其容器的边界），如果这个属性的值设置成"white-space: nowrap;"则仅仅是不自动换行，但空格还是会被合并成一个空格-->
#d1{
background-color: pink;
color: red;
width:100px;
height:100px;
white-space: pre;
}
</style>
</head>
<body>
<div id="d1">晴 刃|qingsword 晴 刃|qingsword</div>
</body>
</html>
显示效果：
white-space属性除了上面介绍的两个值之外，还有两个值：pre-line空白符被压缩，文本会在遇到容器边界时自动换行；pre-wrap空白符被保留，文本会在遇到容器边界时自动换行；
0×16.文本字符间距
这是页面设计中最常用的css属性之一，默认情况下页面的一段文字，单个字符与字符之间是紧挨着的，通过配置文字字符间距，可以增加字符与字符之间的距离，让文字不那么紧凑更易美观和便于阅读：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>文本字符间距实例</title>
<style type="text/css">
<!--第一个p标签，文字间距为5px-->
#p1{
letter-spacing: 5px;
}
<!--第二个p标签，使用浏览器默认的间距-->
#p2{
letter-spacing: normal;
}
</style>
</head>
<body>
<p id="p1">文字间距为5px，www.qingsword.com</p>
<p id="p2">默认的文字间距，www.qingsword.com</p>
</body>
</html>
显示效果：
文字间距为5px，www.qingsword.com
默认的文字间距，www.qingsword.com
0×17.行间距
文字的间距是单个文字前后保持的距离，而行间距则是每行之间保持的距离，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>行间距实例</title>
<style type="text/css">
<!--使用line-height属性设置行间距，值可以使用像素值，也可以使用比例值（百分比），比例值是根据font-size的值来确定大小的（font-size值乘以比例值或百分比得到最终px值），本例配置行间距为40px-->
#p1{
line-height: 40px;
width: 200px;
background-color: pink;
color: black;
}
</style>
</head>
<body>
<p id="p1">HTML5，CSS3，www.qingsword.com，晴刃，HTML5，CSS3，www.qingsword.com，晴刃</p>
</body>
</html>
显示效果：
HTML5，CSS3，www.qingsword.com，晴刃，HTML5，CSS3，www.qingsword.com，晴刃
0×18.长单词自动换行
默认情况下，一个块状标签中的文字到达标签宽度边界的时候，都会自动换行，但是如果这段文字中包含很长的单词或网址，这些内容到达边界时将会越过其容器的边界，如果想要让这些过长的单词或网址自动换行，需要配置word-wrap属性，这是css3新增的属性，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>长单词自动换行实例</title>
<style type="text/css">
<!--第一个p标签，宽度是100px，小于其中网址的长度，因为网址是一串连续的字符串，所以浏览器解释器将其当做一个"长单词"来识别-->
#p1{
width: 100px;
height: 100px;
color: red;
background-color: pink;
}
<!--配置强制换行属性"word-wrap: break-word;"，这个属性告诉浏览器解释器，当长单词遇到其容器边界时自动换行显示-->
#p2{
width: 100px;
height: 100px;
color: red;
background-color: pink;
word-wrap: break-word;
}
</style>
</head>
<body>
<p id="p1">www.qingsword.com</p>
<p id="p2">www.qingsword.com</p>
</body>
</html>
显示效果：
www.qingsword.com
www.qingsword.com
Ps：word-wrap有两个常用的属性值，分别为break-word和break-all，两者都将一个单词看做一个整体，当容器中一行的末尾遇到一个长单词并且容器末尾长度容纳不下这个长单词的长度时，这个长单词会被放置到下一行显示，所不同的是，如果一个单词特别长，长到容器的一整行都容纳不下时，break-word会从容器末尾处截断这个长单词，并且将剩余部分放置到下一行中显示，而break-all则不会截断，剩余部分会超出容器的边界显示。
0×19.段落首行缩进
段落首行缩进一般用于文章每一段的起始处，就像书本那样，每段前面会有两个文字距离的缩进空格，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>首行缩进实例</title>
<style type="text/css">
<!--使用text-indent属性，让每个p标签的行首都缩进30px-->
p{
text-indent: 30px;
width: 250px;
word-wrap: break-word;
background-color: pink;
color: black;
}
</style>
</head>
<body>
<p>Physics is a good framework for thinking，Boil things down to their fundamental truths and reason up from there。</p>
<p>I would like to die on Mars，Just not on impact。</p>
</body>
</html>
显示效果：
Physics is a good framework for thinking，Boil things down to their fundamental truths and reason up from there。
I would like to die on Mars，Just not on impact。
0×20.文本裁剪与省略标识
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>文本裁剪与省略实例</title>
<style type="text/css">
p{
width: 250px;
color: black;
background-color: pink;
white-space: nowrap; <!--仅显示成一行-->
overflow: hidden; <!--截取多余部分-->
text-overflow:ellipsis; <!--超出的部分用...代替-->
}
</style>
</head>
<body>
<p>Physics is a good framework for thinking，Boil things down to their fundamental truths and reason up from there。</p>
<p>I would like to die on Mars，Just not on impact。</p>
</body>
</html>
显示效果：
0×21.文字描边
这是CSS3目前还处于实验阶段的属性，需要在属性值前添加浏览器厂商前缀标识符才能够正常使用：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>文字描边属性实例</title>
<style type="text/css">
<!--webkit是谷歌浏览器内核识别前缀，moz为火狐浏览器内核识别前缀，ms为IE浏览器，目前（2016）还只有google浏览器支持这个测试属性-->
p{
-webkit-text-stroke:2px yellow;
-moz-text-stroke:2px yellow;
-ms-text-stroke:2px yellow;
}
</style>
</head>
<body>
<p>I would like to die on Mars，Just not on impact。</p>
</body>
</html>
显示效果：
I would like to die on Mars，Just not on impact。
请使用谷歌浏览器打开本页，如果你看到上面的这段英文并没有变成金色，说明当前使用的浏览器并不支持这个属性。