1.首行缩进:text-indent
在CSS中,我们可以使用text-indent
属性来定义p元素的首行缩进
语法:
text-indent:像素值;
示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> p { font-size:14px; text-indent: 28px; } </style> </head> <body> <h3>爱莲说</h3> <p>水陆草木之花,可爱者甚蕃。晋陶渊明独爱菊。自李唐来,世人甚爱牡丹。予独爱莲之出淤泥而不染,濯清涟而不妖,中通外直,不蔓不枝,香远益清,亭亭净植,可远观而不可亵玩焉。</p> <p>予谓菊,花之隐逸者也;牡丹,花之富贵者也;莲,花之君子者也。噫!菊之爱,陶后鲜有闻;莲之爱,同予者何人? 牡丹之爱,宜乎众矣。</p> </body> </html>
中文段落首行一般需要缩进两个字的空间。想要实现这个效果,那么text-indent
值应
该是font-size
值的2倍
2.水平对齐:text-align
在CSS中,我们可以使用text-align
属性来控制文本在水平方向上的对齐方式
语法:
text-align:取值;
示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #p1{text-align:left;} #p2{text-align:center;} #p3{text-align:right;} </style> </head> <body> <p id="p1"><strong>左对齐</strong>:勇士</p> <p id="p2"><strong>居中对齐</strong>:勇士</p> <p id="p3"><strong>右对齐</strong>:勇士</p> </body> </html>
3.文本修饰:text-decoration
在CSS中,我们可以使用text-decoration
属性来定义文本的修饰效果(下划线、中划线、顶划线)
语法:
text-decoration:取值;
示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #p1{text-decoration:underline;} #p2{text-decoration:line-through;} #p3{text-decoration:overline;} </style> </head> <body> <p id="p1">这是“下划线”效果</p> <p id="p2">这是“删除线”效果</p> <p id="p3">这是“顶划线”效果</p> </body> </html>
4.大小写:text-transform
在CSS中,我们可以使用text-transform
属性来将文本进行大小写转换
语法:
text-transform:取值;
示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #p1{text-transform:uppercase;} #p2{text-transform:lowercase;} #p3{text-transform:capitalize;} </style> </head> <body> <p id="p1">rome was't built in a day.</p> <p id="p2">rome was't built in a day.</p> <p id="p3">rome was't built in a day.</p> </body> </html>
5.行高:line-height
在CSS中,我们可以使用line-height
属性来控制一行文本的高度
语法:
line-height:像素值;
示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #p1{line-height:15px;} #p2{line-height:20px;} #p3{line-height:25px;} </style> </head> <body> <p id="p1">水陆草木之花,可爱者甚蕃。晋陶渊明独爱菊。自李唐来,世人甚爱牡丹。予独爱莲之出淤泥而不染,濯清涟而不妖,中通外直,不蔓不枝,香远益清,亭亭净植,可远观而不可亵玩焉。</p><hr/> <p id="p2">水陆草木之花,可爱者甚蕃。晋陶渊明独爱菊。自李唐来,世人甚爱牡丹。予独爱莲之出淤泥而不染,濯清涟而不妖,中通外直,不蔓不枝,香远益清,亭亭净植,可远观而不可亵玩焉。</p><hr/> <p id="p3">水陆草木之花,可爱者甚蕃。晋陶渊明独爱菊。自李唐来,世人甚爱牡丹。予独爱莲之出淤泥而不染,濯清涟而不妖,中通外直,不蔓不枝,香远益清,亭亭净植,可远观而不可亵玩焉。</p> </body> </html>
6.间距:letter-spacing、word-spacing
字间距
在CSS中,我们可以使用letter-spacing
属性来控制字与字之间的距离
语法:
letter-spacing:像素值;
示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #p1{letter-spacing:0px;} #p2{letter-spacing:3px;} #p3{letter-spacing:5px;} </style> </head> <body> <p id="p1">Rome was't built in a day.罗马不是一天建成的。</p><hr/> <p id="p2">Rome was't built in a day.罗马不是一天建成的。</p><hr/> <p id="p3">Rome was't built in a day.罗马不是一天建成的。</p> </body> </html>
词间距
在CSS中,我们可以使用word-spacing
属性来定义两个单词之间的距离
语法:
word-spacing:像素值;
示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #p1{word-spacing:0px;} #p2{word-spacing:3px;} #p3{word-spacing:5px;} </style> </head> <body> <p id="p1">Rome was't built in a day.罗马不是一天建成的。</p><hr/> <p id="p2">Rome was't built in a day.罗马不是一天建成的。</p><hr/> <p id="p3">Rome was't built in a day.罗马不是一天建成的。</p> </body> </html>