文本样式
字体样式主要涉及字符本身的显示效果，而文本样式主要涉及多个字符的排班效果。CSS在命名属性时，使用font前缀和text前缀来区分字体和文本属性。
1.文本对齐
CSS使用text-align属性来定义文本的水平对齐方式
- left：表示默认值
- right：表示右对齐
- center：表示居中对齐
- justify：表示两段对齐
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .center{ 8 text-align: center;/*居中对齐*/ 9 } 10 .right{ 11 text-align: right;/*居中对齐*/ 12 } 13 </style> 14 </head> 15 <body> 16 <p align="center">昨夜西风凋碧树，独上高楼，望尽天涯路</p> 17 <p align="right">text-align: justify;</p> 18 </body> 19 </html>
2.垂直对齐
CSS使用vertical-align属性来定义文本垂直对齐问题
- baseline 默认。元素放置在父元素的基线上。
- sub 垂直对齐文本的下标。
- super 垂直对齐文本的上标
- top 把元素的顶端与行中最高元素的顶端对齐
- text-top 把元素的顶端与父元素字体的顶端对齐
- middle 把此元素放置在父元素的中部。
- bottom 把元素的底端与行中最低的元素的顶端对齐。
- text-bottom 把元素的底端与父元素字体的底端对齐。
- length
- % 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
- inherit 规定应该从父元素继承 vertical-align 属性的值。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .super{ 8 vertical-align: super; 9 } 10 </style> 11 </head> 12 <body> 13 <p>vertical-align 表示垂直<span class="super">对齐</span>属性</p> 14 </body> 15 </html>
3.字距和词距
CSS使用letter-spacing属性定义字距，使用word-spacing属性定义词距
定义词距时，以空格为基准进行调节，如果多个单次被连在一起，则被word-spacing视为一个单次；如果汉子被空格分隔，则分隔的多个汉子就被视为不同的单次，word-spacing属性此时有效
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .lspacing{ 8 letter-spacing:10px; 9 } 10 .wspacing{ 11 word-spacing: 30px; 12 } 13 </style> 14 </head> 15 <body> 16 <p class="lspacing">letter spacing word spacing（字间距）</p> 17 <p class="wspacing">letter spacing word spacing（词间距）</p> 18 </body> 19 </html>
4.定义行高
行高也称为行距，是段落文本行与文本行之间的距离。CSS使用line-height属性定义行高
- normal：表示默认值，一般为12.em，最佳设置范围：1.2em~1.8em
- length：表示百分比数字，或者由浮点数字和单位标识符组成的长度值，允许为负值。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .p1{ 8 line-height: 1em;; 9 } 10 .p2{ 11 line-height: 2em; 12 } 13 </style> 14 </head> 15 <body> 16 <p class="p1">百度百科是一部内容开放、自由的网络百科全书,旨在创造一个涵盖所有领域知识,服务所有互联网用户的中文知识性百科全书。在这里你可以参与词条编辑,分享贡献你的知识</p> 17 <p class="p2">百度百科是百度公司推出的一部内容开放、自由的网络百科全书平台。其测试版于2006年4月20日上线，正式版在2008年4月21日发布，截至2018年2月，百度百科已经收录了超过1520万词条，参与词条编辑的网友超过644万人</p> 18 </body> 19 </html>
5.定义缩进
CSS使用text-indent属性定义首行缩进
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 p{ 8 text-indent: 2em; 9 } 10 </style> 11 </head> 12 <body> 13 <p>百度百科是一部内容开放、自由的网络百科全书,旨在创造一个涵盖所有领域知识,服务所有互联网用户的中文知识性百科全书。在这里你可以参与词条编辑,分享贡献你的知识</p> 14 </body> 15 </html>
CSS3新增文本样式
1.文本阴影
CSS3中，可以使用text-shadow属性给页面上的文字添加阴影效果，
多色阴影，可以使用逗号进行分割。
- none：无阴影。
- <length>①：第一个长度值用来设置对象的阴影水平偏移值。可以为负值
- <length>②：第二个长度值用来设置对象的阴影垂直偏移值。可以为负值
- <length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值。
- <color>：设置对象的阴影的颜色。
text-shadow 属性的第一个值表示水平位移；第二个值表示垂直位移，正值偏右或偏下，负值偏左或偏上；第三个值表示模糊半径；第四个值表示阴影的颜色(可选)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .one{ 8 text-align: center; 9 font:bold 60px helvetica,arial,sans-serif; 10 color: #999; 11 text-shadow: 0.1em 0.1em 0.1em #333; /*右下角文本阴影效果*/ 12 } 13 .two{ 14 text-align: center; 15 font:bold 60px helvetica,arial,sans-serif; 16 color: #999; 17 text-shadow: 0.1em -0.1em 0.1em #333; /*右上角文本阴影效果*/ 18 } 19 .three{ 20 text-align: center; 21 font:bold 60px helvetica,arial,sans-serif; 22 color: #999; 23 text-shadow: -0.1em 0.1em 0.1em #333; /*左下角文本阴影效果*/ 24 } 25 .four{ 26 text-align: center; 27 font:bold 60px helvetica,arial,sans-serif; 28 color: #999; 29 text-shadow: -0.1em -0.1em 0.1em #333; /*左上角文本阴影效果*/ 30 } 31 </style> 32 </head> 33 <body> 34 <p class="one"> 右下角文本阴影效果</p> 35 <p class="two"> 右上角文本阴影效果</p> 36 <p class="three"> 左下角文本阴影效果</p> 37 <p class="four"> 左上角文本阴影效果</p> 38 </body> 39 </html>
定义火焰文字
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 body{ 8 background: #000; 9 } 10 p{ 11 text-align: center; 12 font: bold 60px helvetica,arial,sans-serifn; 13 color: red; 14 text-shadow: 0 0 4px white, 15 0 -5px 4px #ff3, 16 2px -10px 6px #fd3, 17 -2px -15px 11px #f80, 18 2px -25px 18px #f20; 19 } 20 </style> 21 </head> 22 <body> 23 <p>文本阴影：text-shadow</p> 24 </body> 25 </html>
定义立体文字（凸起）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 body{ 8 background: #000; 9 } 10 p{ 11 text-align: center; 12 padding: 24px; 13 margin: 0; 14 font-family: helvetica,arial,sans-serif; 15 font-size: 80px; 16 font-weight: bold; 17 color: #D1D1D1; 18 background: #CCC; 19 text-shadow: -1px -1px white, 20 1px 1px #333; 21 ; 22 } 23 </style> 24 </head> 25 <body> 26 <p>文本阴影：text-shadow</p> 27 </body> 28 </html>
定义立体文字（凹下）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 body{ 8 background: #000; 9 } 10 p{ 11 text-align: center; 12 padding: 24px; 13 margin: 0; 14 font-family: helvetica,arial,sans-serif; 15 font-size: 80px; 16 font-weight: bold; 17 color: #D1D1D1; 18 background: #CCC; 19 text-shadow: 1px 1px white, 20 -1px -1px #333; 21 ; 22 } 23 </style> 24 </head> 25 <body> 26 <p>文本阴影：text-shadow</p> 27 </body> 28 </html>
定义文字描边
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 body{ 8 background: #000; 9 } 10 p{ 11 text-align: center; 12 padding: 24px; 13 margin: 0; 14 font-family: helvetica,arial,sans-serif; 15 font-size: 80px; 16 font-weight: bold; 17 color: #D1D1D1; 18 background: #CCC; 19 text-shadow: -1px 0 black, 20 0 1px black, 21 1px 0 black, 22 0 -1px black 23 } 24 </style> 25 </head> 26 <body> 27 <p>文本阴影：text-shadow</p> 28 </body> 29 </html>
发光字体
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 body{ 8 background: #000; 9 } 10 p{ 11 text-align: center; 12 padding: 24px; 13 margin: 0; 14 font-family: helvetica,arial,sans-serif; 15 font-size: 80px; 16 font-weight: bold; 17 color: #D1D1D1; 18 background: #CCC; 19 text-shadow: 0 0 0.2em #F87, 20 0 0 0.2em #F87; 21 } 22 </style> 23 </head> 24 <body> 25 <p>文本阴影：text-shadow</p> 26 </body> 27 </html>
溢出文本
CSS3新增text-overflow属性，该属性可以设置超长文本省略显示。
- clip：属性值表示不显示省略标记（...）而是简单的裁切。
- ellipsis：属性值表示当对象内文本溢出时显示省略标记(...)，省略标记插入的位置是最后一个字符。
- ellipsis-word：表示当对象内文本溢出时显示省略标记(...)，省略标记插入的位置是最好一个词
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 dl{ 8 width: 240px; 9 border: solid 1px #ccc; 10 } 11 dd{ 12 width: 220px; 13 white-space: nowrap;/*不进行换行*/ 14 overflow: hidden;/*隐藏超出文本*/ 15 text-overflow: ellipsis;/*省略标记(...)*/ 16 } 17 </style> 18 </head> 19 <body> 20 <dl> 21 <dt>互联网</dt> 22 <dd>Intel内部经验：做酷炫拽的智能硬件，你需要考虑到这几点</dd> 23 </dl> 24 </body> 25 </html>
2.文本换行
CSS3使用word-break属性定义文本自动换行
- line-break 专门负责控制日文换行。
- word-wrap属性可以控制换行。当属性取值break-word时，强制换行。
- word-break属性主要针对亚洲语言和非洲语言进行控制换行。
- white-space属性具有格式化文本作用。当属性取值为nowrap时，表示强制在同一行内显示所有文本
3.添加动态内容
content属性属于内容生成和替换模块。
- normal：默认值
- string：插入文本内容。
- attr()：插入元素的属性值
- uri()：插入一个外部资源，如图像、音频、视频或浏览器支持的任何资源。
- counter()：计数器，用于插入排序标识。
- none：无任何内容