CSS文本属性

最新推荐文章于 2024-05-24 12:14:48 发布

judyge

最新推荐文章于 2024-05-24 12:14:48 发布

阅读量460

点赞数

分类专栏： js与前端

js与前端专栏收录该内容

863 篇文章 5 订阅

订阅专栏

文本对齐属性(text-align)

这个属性用来设定文本的对齐方式。有以下值：
• left (居左，缺省值)
• right (居右)
• center (居中)
• justify (两端对齐)

[html]view plaincopy 
   
 <html>  
 <head>  
 <title>文本对齐属性 text-align</title>  
 <style type="text/css">  
 .p1{text-align:left}  
 .p2 {text-align:right}  
 .p3{text-align:center}  
   
 </style>  
 </head>  
   
 <body>  
   
 <p class = "p1">这段的本文对齐属性(text-align)值为居左。</p>  
 <p class = "p2">这段的本文对齐属性(text-align)值为居右。</p>  
 <p class = "p3">这段的本文对齐属性(text-align)值为居中。</p>  
   
   
 </body>  
 </html>  

文本修饰属性(text-decoration)
这个属性主要设定文本划线的属性。有以下值：
• none (无，缺省值)
• underline (下划线)
• overline (上划线)

• line-through (当中划线)

[html]view plaincopy 
   
 <html>  
 <head>  
 <title>文本修饰属性 text-decoration</title>  
 <style type="text/css">  
 .p1{text-decoration: none}  
 .p2 {text-decoration: underline}  
 .p3{text-decoration: line-through}  
 .p4 {text-decoration:overline}  
 </style>  
 </head>  
   
 <body>  
 <p class = "p1">文本修饰属性(text-decoration)的缺省值是none。</p>  
 <p class = "p2">这段的文本修饰属性(text-decoration)值是underline。</p>  
 <p class = "p3">这段的文本修饰属性(text-decoration)值是line-through。</p>  
 <p class = "p4">这段的文本修饰属性(text-decoration)值是overline。</p>  
   
 </body>  
 </html>  

文本缩进属性(text-indent)
这个属性设定文本首行缩进。其值有以下设定方法：
• length (长度，可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px))
• percentage (百分比，相当于父对象宽度的百分比)

[html]view plaincopy 
   
 <html>  
 <head>  
 <title>文本缩进属性 text-indent</title>  
 <style type="text/css">  
 .p1 {text-indent: 2em} /*2em表示缩进两个字符*/  
 .d1 {width:300px}  
 .p2 {text-indent:50%}  
 </style>  
 </head>  
   
 <body>  
 <p>下面两端都设定CSS文本缩进属性(text-indent)，第一段用长度方法设值，第二段用百分比方法设值。</p>  
   
 <p class = "p1">芙蓉姐姐说道：“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会被众人的目光无情地揪出来。我总是很焦点。我那张耐看的脸，配上那副火爆得让男人流鼻血的身体，就注定了我前半生的悲剧。”</p>  
   
 <div class = "d1">  
 <p class = p2>芙蓉姐姐说道：“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会被众人的目光无情地揪出来。我总是很焦点。我那张耐看的脸，配上那副火爆得让男人流鼻血的身体，就注定了我前半生的悲剧。”</p>  
 </div>  
   
 </body>  
 </html>  

行高属性(line-height)

这个属性设定每行之间的距离。其值有以下设定方法：
• normal (缺省值)
• length (长度，可以用绝对单位(cm, mm, in, pt,pc)或者相对单位 (em, ex, px))

• percentage (百分比，相当于父对象高度的百分比)

在font属性里缩写line-height值紧跟着font-size值，使用斜杠隔开<font-size>/<line-height>

[html]view plaincopy 
   
 <html>  
 <head>  
 <title>行高属性 line-height</title>  
 <style type="text/css">  
 .p1 {line-height:30px}  
 .p2 {line-height:30px}  
 </style>  
 </head>  
   
 <body>  
 <p class = "p1">这个段落的CSS行高属性(line-hight)值为30px，即每行之间的距离是30个像素。</p>  
   
 <p class = "p2">这个段落的CSS行高属性(line-hight)值为50px，即每行之间的距离是50个像素。</p>  
   
 </body>  
 </html>  

文字间距属性(letter-spacing)
这个属性用来设定文字之间的距离。
• normal (缺省值)
• length (长度，可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px))

[html]view plaincopy 
   
 <html>  
 <head>  
 <title>文字间距属性 letter-spacing</title>  
 <style type="text/css">  
 .p1 {letter-spacing: 3px}  
 </style>  
 </head>  
   
 <body>  
   
 <p>这段没有设置文字间距属性(letter-spacing)。</p>  
 <p class = "p1">这段设定文字间距属性(letter-spacing)值为3像素。</p>  
   
 </body>  
 </html>  

颜色属性(color)

用颜色属性(color)可以改变文本的字体颜色。

[html]view plaincopy 
   
 .p1{color:gray}  

judyge

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS文本属性

文本对齐属性(text-align)这个属性用来设定文本的对齐方式。有以下值：• left (居左，缺省值) • right (居右) • center (居中) • justify (两端对齐)[html] view plain copy html> head> title>文本对齐属性 text-align
复制链接

扫一扫