CSS 文本样式

CSS文本样式是相对于内容进行的样式修饰。由于在层叠关系中,内容要高于背景。所以文本样式相对而言更加重要。

CSS控制文本属性:

1、设置文本缩进:text-indent:length(长度单位)可以负值

2、文本水平对齐方式:text-align:left左,center居中,right右

3、空白处理: white-space:nowrap(nowrap强制在一行中显示,pre换行和空格保留,normal自动换行)

4、大小写控制:text-transform:(capitalize每个单词的第一个字母大写,uppercase每个字母都大写,loowercase每个字母都小写,none正常大小)

5、文本垂直对齐方式:vertical-align:(sub设置文本为下标,super设置文本为上标 , top与顶端对齐 ,text-bottom与低端对齐)

6、文字颜色:color设置文字的颜色

首行缩进

定义 :首行缩进是将段落的第一行缩进,这是常用的文本格式化效果。一般地,中文写作时开头空两格,类似于此。

[注意]该属性可以为负值

text-indent   

       值: <length> | <percentage> | inherit

  初始值: 0

  应用于: 块级元素(包括block和inline-block)

  继承性: 有

  百分数: 相对于包含块的宽度

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p {text-indent:50px;}
</style>
</head>
<body>
<p>亚冠联赛是亚洲最高等级的俱乐部赛事,相当于欧洲的欧洲冠军联赛及南美洲的南美解放者杯,高于亚足联杯和亚足联主席杯,
获得冠军的球队将代表亚洲参加当年12月举行的国际足联世界俱乐部杯。期待恒大在世俱杯中为中国足球争光添彩。</p>
</body>
</html>

水平对齐

定义:水平对齐是影响一个元素中的文本的水平对齐方式。

text-align

  值: left | center | right | justify | inherit

  初始值: left

  应用于: 块级元素(包括block和inline-block)

  继承性: 有

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>格式</title> 
<style>  
.center  
{  
margin:auto;  
width:70%;  
background-color:#b0e0e6;  
}  
</style>  
</head>  
   
<body>  
<div class="center">  
<p>亚冠联赛是亚洲最高等级的俱乐部赛事,相当于欧洲的欧洲冠军联赛及南美洲的南美解放者杯,高于亚足联杯和亚足联主席杯,</p>  
<p>获得冠军的球队将代表亚洲参加当年12月举行的国际足联世界俱乐部杯。期待恒大在世俱杯中为中国足球争光添彩。</p>  
</div>  
</body>  
</html>

文本转换

文本转换用于处理英文的大小写转换

text-transform

  值: uppercase(全大写) | lowercase(全小写) | capitalize(首字母大写) | none | inherit

  初始值: none

  应用于: 所有元素

  继承性: 有

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>转换</title> 
<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body>
<p class="uppercase">hello css</p>
<p class="lowercase">hello css</p>
<p class="capitalize">hello css</p>
</html>

文本修饰

定义:文本修饰用于为文本提供修饰线

  [注意]文本修饰线的颜色与文本颜色相同

text-decoration

  值: none | [underline(下划线) || overline(上划线) || line-through(中划线)] | inherit

  初始值: none

  应用于: 所有元素

  继承性: 无

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>文本修饰</title> 
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>
</head>
<body>
<h1>这是用来进行文本修饰的</h1>
<h2>这是用来进行文本修饰的</h2>
<h3>这是用来进行文本修饰的</h3>
</body>
</html>


继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS控制文本</title> </head> <style type="text/css"> #one{text-indent:2em;} #two{text-align:center; white-space:pre; text-transform:uppercase;} span{vertical-align:super;} #t2{width:100px; vertical-align:middle;} </style> <body> <p id="one">0.5秒三分绝杀!波特兰上演波什时刻 第N次拯救热火</p> <h1 id="two">玩命暴扣扳平+助攻绝杀三分 <span>热火</span>太幸运有这fkasfjklas fklasdj颗队魂</h1> <p>热火今夜还一功臣必须赞 11分不多但却分分是金!</p> <p>詹波为小弟恶犯叫屈 当事人他都起飞了!肯定假摔</p> <p>斯帅称客战开拓者奥登不打 波什:他很快就可复出</p> <p id="t2"> 斯帅称客战开拓者奥登不打 波什:他很快就可复出 </p> </body> </html>
提交重置代码