CSS外观(文本)属性
1.color:文本颜色
color属性用于定义文本的颜色,其取值方式有如下3种:
1.预定义的颜色值,如red,green,blue等。
2.十六进制,如#FF0000,#FF6600,#29D794等。实际工作中,十六进制是最常用的定义颜色的方式。
3.RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
需要注意的是,如果使用RGB代码的百分比颜色值,取值为0时也不能省略百分号,必须写为0%。
2.line-height:行间距
一般情况下,行距比字号大7.8像素左右就可以了。
示例:
<style>
span{
color: #ff0000;
font-size: 20px;
line-height: 28px;
}
</style>
<span>
在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会,当时俱乐部给出的解释是李虎由于身体欠佳,去医院接受治疗。然而今日李虎出现在俱乐部时,向记者否认了这一说法,并且坦言已经向俱乐部提出了辞呈。
</span>
前:
后:
3.text-align:水平对齐方式
text-align属性用于设置文本内容的水平对齐,相当于html中的align对齐属性。其可用属性值如下:
left:左对齐(默认值)
right:右对齐
center:居中对齐
注意:是让盒子里面的内容水平居中, 而不是让盒子居中对齐
示例:
<style>
h1{
color: #ff0000;
font-size: 20px;
line-height: 28px;
text-align: center;
}
</style>
<h1>
The violent have violent ends.
</h1>
4.text-indent:首行缩进
1em 就是一个字的宽度 如果是汉字的段落, 1em 就是一个汉字的宽度。
示例:
<style>
p{
color: #ff0000;
font-size: 20px;
line-height: 28px;
text-indent: 2em;
/*text-align: center;*/
}
</style>
<p>
在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会,当时俱乐部给出的解释是李虎由于身体欠佳,去医院接受治疗。然而今日李虎出现在俱乐部时,向记者否认了这一说法,并且坦言已经向俱乐部提出了辞呈。
</p>
前:
后:
5.text-decoration:文本的装饰
text-decoration 通常我们用于给链接修改装饰效果示例:
<style>
p{
color: #ff0000;
font-size: 20px;
line-height: 28px;
text-indent: 2em;
/*text-align: center;*/
}
.underline{
text-decoration: underline;
}
.overline{
text-decoration: overline;
}
.line-through{
text-decoration: line-through;
}
.none{
text-decoration: none;
}
</style>
<p class="underline">
The violent delights have violent ends.
</p>
<p class="overline">
The violent delights have violent ends.
</p>
<p class="line-through">
The violent delights have violent ends.
</p>
<a href="#" class="none">
The violent delights have violent ends.
</a>
效果:
text-decoration: none 多用于给超链接文字去掉下划线 |