003-css外观属性(color、行间距、水平居中、首行缩进、字间距、文字阴影)

一、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);
}

则这时的效果是:


有了模糊距离,效果更好,会使阴影的边缘锐化,模糊一点,效果更佳。当然根据个人喜好。

猜你喜欢

转载自blog.csdn.net/sunshine_0880/article/details/80010644
今日推荐