一、color颜色
color用于定义文本颜色,取值方式有三种:
① 英文单词red、green。。。
② RGB值,如rgb(255,0,0)。
③ 十六进制,如,#000000就是黑色(可以简写成#000)。
二、line-height 行间距
有竖直居中的效果。
语法:
line-height: 26px;
在没有使用行间距的效果的时候:
使用之后:
很明显,行与行之间的间距变宽了,比没有使用之前看着更加舒适。
那么对于竖直居中的效果,比如一个块级元素里写一行字。
代码部分:
<div>
些成功的强者不是没有眼泪,而是可以含着眼泪向前跑。
</div>
div {
height: 400px;
width: 400px;
background-color: skyblue;
}
那么效果就是(左图):
如果添加行间距的属性:
line-height: 400px;
那么效果就会变成右图的样子,实现文字垂直居中。
三、text-align 水平对齐方式
有三个值:
像上面的例子,如果在div里添加文字水平居中的属性,效果就会变成一下的样子:
四、text-indent 首行缩进
对于汉字文章,单位推荐是em,1em=1个汉字的宽度。
语法:
text-indent: 2em;
效果(借用上面的例子):
五、字间距
1. 字间距letter-spacing
默认值是normal。字符与字符之间的空白,英文与中文均有效。
2. 单词间距word-spacing
默认值是normal。英文单词之间的间距,中文无效。
注意:如果两者都用英文,会有什么的效果?
<p class="pp">hasdhahdahdahd hadhahda ahdshad ahsdhad</p>
首先是letter-spacing
.pp {
word-spacing: 10px;
}
效果(图片宽800):
其次是word-spacing
.pp {
letter-spacing: 10px;
}
效果是(宽800):
很明显,word-spacing对字母之间也产生间距,不建议适用于文章中。
六、颜色半透明名rgba()
语法:
rgba(x,y,z,a);
x,y,z是0-255之间的数字,闭区间。a是[0,1]之间的数,表示透明度,越接近1,透明度越低。
七、文字阴影text-shadow
水平位置和垂直位置就是阴影相对于文字的坐标,向右为x正轴,向下为y正轴。
如:
<p class="shadow">成功的强者不是没有眼泪</p>
.shadow {
font-size: 40px;
font-weight: bold;
text-shadow: 5px 5px 0px rgba(0,0,0,0.5);
}
此时的模糊距离先是0,效果是:
此时加上模糊距离,模糊距离为5px.
.shadow {
font-size: 40px;
font-weight: bold;
text-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}
则这时的效果是:
有了模糊距离,效果更好,会使阴影的边缘锐化,模糊一点,效果更佳。当然根据个人喜好。