Css基本样式————文本
一、CSS文本属性可定义文本外观
二、通过文本属性，可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进
三、常用属性：
color 文本颜色
|
1
2
3
4
5
6
|
body{
color: aqua;
}
<
body
>
<
p
>查看颜色</
p
>
</
body
>
|
这里给body设置color,在p标签中可以看到效果
说明color这个属性是可以继承的
direction 文本方向
line-height 行高
letter-spacing 字符间距
text-align 对齐元素中的文本
|
1
2
3
4
5
6
7
|
p{
color: red;
text-align: right;
}
<
body
>
<
p
>Hello World</
p
>
</
body
>
|
text-decoration 向文本中添加修饰
text-indent 缩进元素中文本的首行
|
1
2
3
4
5
6
7
8
9
10
11
12
|
h3{
text-indent: 2em;
}
<
body
>
<
div
>
<
h3
>静夜思</
h3
>
<
p
>床前明月光</
p
>
<
p
>疑是地上霜</
p
>
<
p
>举头望明月</
p
>
<
p
>低头思故乡</
p
>
</
div
>
</
body
>
|
也可以按百分比缩进
text-transform 元素中的字母
|
1
2
3
4
5
6
7
8
9
10
|
p{
text-transform: capitalize;
}
<
body
>
<
div
>
<
p
>there is a beautiful girl</
p
>
<
p
>a so lovely girl</
p
>
<
p
>i always tell myself "never give up,never give up, never give up!"</
p
>
</
div
>
</
body
>
|
capitalize:把所有单词的首字母大写
lowercase：全部变小写
uppercase：全部变大写
inherit(中文意思为“继承”):默认方式（不改变原文内容）
unicode-bidi 设置文本方向
white-sapce 元素中空白的处理方式
word-spacing 字间距
四、CSS3文本效果：
text-shadow:向文本添加阴影
|
1
2
3
4
5
6
7
8
9
10
|
p{
text-shadow: 5px 5px 5px #FF0000;
}
<
body
>
<
div
>
<
p
>there is a beautiful girl</
p
>
<
p
>a so lovely girl</
p
>
<
p
>i always tell myself "never give up,never give up, never give up!"</
p
>
</
div
>
</
body
>
|
text-shadow需要设置4个值
第一个值：相对于原本文字距左的距离
第二个值：距当前文本上方的位置
第三个值：清晰度
第四个值：背景颜色
word-wrpa:规定文本的换行规则
|
1
2
3
4
|
p{
width: 100px;
text-wrap: normal;
}
|
width:100px; 设置p元素整体宽度为100
text-wrap:normal; 自动换行
此外还有一个功能
如果<p></p>内写的是英文，"text-wrap"这个属性不会把当前的文字本文转自yeleven 51CTO博客，原文链接:http://blog.51cto.com/11317783/1771941