CSS 4.2 样式-文本
1.文本颜色color
例如:
<style type=“text/css”>
body { color:red;}
p.class { color:green;}
</style>
结果:
2.文本首行缩进text-indent,默认为0,即不进行首行缩进。
①text-indent=数值
例如:
<head>
<style type=“text/css”>
p { text-indent:2em;}
</style></head>
<body>
<p>
这是一个段落
这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落
</p>
</body>
结果:
解释:
首行空格2汉字宽度;回车视为一个空格;
②数值为负数
注:如果对一个段落设置了负值,那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题,建议针对负缩进再设置一个外边距或一些内边距
例如:
p { text-indent:-2em;padding-left:2em;}
结果:
③百分比值???????????
百分数要相对于缩进元素父元素的宽度。换句话说,如果将缩进值设置为 20%,所影响元素的第一行会缩进其父元素宽度的20%。
在下例中,缩进值是父元素的 20%,即100 个像素:
div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>
3.文本对齐text-align,默认左对齐
格式:p{text-align:left或right或center或justify或inherit}
justify两端对齐,inherit(IE不支持)继承父元素参数。
结果:
注:justify在IE中不正确,在火狐看就两端对齐啊,是ie浏览器代码有兼容性问题
4.字间隔word-spacing,默认0
例如:p { word-spacing:1em;}
结果:
注:1em是一汉字的宽度,1汉字=2字母宽度,1字母即1ex。
5.字母间隔letter-spacing,默认0
例如:p { letter-spacing:1em;}
结果:
6.字符转换text-transform,默认none
格式:p { text-transform:none或uppercase或lowercase或capitalize}
解释:uppercase全大写;lowercase全小写;capitalize首字母大写
注:作为一个属性,text-transform可能无关紧要,不过如果您突然决定把所有 h1元素变为大写,这个属性就很有用。不必单独地修改所有 h1元素的内容,只需使用 text-transform为你完成这个修改:h1 {text-transform: uppercase}
7.文本装饰 text-decoration,默认none
格式:p { text-decoration:none或underline或overline或line-through或blink}
underline下划线;overline上划线;line-through贯穿线;blink闪烁
效果:
注1:IE、Chrome或 Safari不支持 "blink"属性值,所以只有在 Firefox和 Opera下支持这 CSS实现在闪动效果。
注2:可以p{text-decoration:underline overline;}叠加,效果上下划线都有。
注3:若body{text-decoration:underline;}p{text-decoration:line-through},结果p会叠加
注4:但是若:p{text-decoration:underline;} p.class{text-decoration:overline;}p.class不会叠加,只有一个属性overline。
注5:但是若:p{text-decoration:underline;} p{text-decoration:underline;} p不会叠加,选择后边的属性定义。
8.处理空白符white-space,默认normal空白会被浏览器忽略。
格式:
white-space:
normal空白会被浏览器忽略。n个空格+n个换行=一个空格
pre保留空白
nowrap禁止自动换行,知道遇到<br/>
pre-wrap保留空白,但是正常地进行换行。
pre-line合并空白,但是保留换行。
inherit规定应该从父元素继承 white-space属性的值
注1:pre与pre-wrap的区别
pre-wrap类似pre,区别在于<pre>标签来显示非常规的格式化内容,或者某类计算机代码所以pre和pre-wrap的区别就在于他们对于一些符号上的支持和规范。
注2:任何的版本的 Internet Explorer (包括IE8)都不支持属性值"inherit"。
9.文本方向direction
格式:direction:rtl(右到左)或ltr(左到右)或inherit
10.行间距line-height
格式:line-height:百分比(默认100%)像素(大多数浏览器中默认行高大约是20px)或数字(默认1)
例如:
line-height:50%等价于10px等价于0.5
line-height:200%等价于40px等价于2
结果: