一、CSS文本属性可定义文本外观


二、通过文本属性,可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进


三、常用属性:

color文本颜色

body{color:aqua;}<body><p>查看颜色</p></body>

这里给body设置color,在p标签中可以看到效果

说明color这个属性是可以继承的

direction文本方向

line-height行高

letter-spacing字符间距

text-align对齐元素中的文本

p{color:red;text-align:right;}<body><p>HelloWorld</p></body>

text-decoration向文本中添加修饰

text-indent缩进元素中文本的首行

h4{text-indent:2em;}<body><div><h4>静夜思</h4><p>床前明月光</p><p>疑是地上霜</p><p>举头望明月</p><p>低头思故乡</p></div></body>

也可以按百分比缩进

text-transform元素中的字母

p{text-transform:capitalize;}<body><div><p>thereisabeautifulgirl</p><p>asolovelygirl</p><p>ialwaystellmyself"nevergiveup,nevergiveup,nevergiveup!"</p></div></body>

capitalize:把所有单词的首字母大写

lowercase:全部变小写

uppercase:全部变大写

inherit(中文意思为“继承”):默认方式(不改变原文内容)

unicode-bidi设置文本方向

white-sapce元素中空白的处理方式

word-spacing字间距


四、CSS3文本效果:

text-shadow:向文本添加阴影

p{text-shadow:5px5px5px#FF0000;}<body><div><p>thereisabeautifulgirl</p><p>asolovelygirl</p><p>ialwaystellmyself"nevergiveup,nevergiveup,nevergiveup!"</p></div></body>

text-shadow需要设置4个值

第一个值:相对于原本文字距左的距离

第二个值:距当前文本上方的位置

第三个值:清晰度

第四个值:背景颜色

word-wrpa:规定文本的换行规则

p{width:100px;text-wrap:normal;}

width:100px;设置p元素整体宽度为100

text-wrap:normal;自动换行

此外还有一个功能

如果<p></p>内写的是英文,"text-wrap"这个属性不会把当前的文字拆开(这个效果非常不错)