知识点三、样式的层叠性:运行以下代码,可以发现,文字的最终颜色为绿色,字体为:simsun;字体大小为:12px;
那为什么,样式里同样写了div的属性,可为什么字体不是红色?但却是继承了字体为12像素的大小呢?原因是因为样式的层叠性。
层叠指的是样式的优先级,当产生冲突时以优先级高的为准。1. 开发者样式>读者样式>浏览器样式(除非使用!important标记 )2. id选择符>(伪)类选择符>元素选择符3. 权重相同时取后面定义的样式
所以.box这个类选择器就比div这个元素选择器的优先级要高,但是.box同属div元素,所以文字的颜色是绿色,同时也继承了字体大小为12像素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{padding: 0;margin:0;}
.box{
color:green;
font-family: "simsun";
}
div{
color:red;
font-size: 12px;
}
</style>
</head>
<body>
<div class="box">我恨帅气,我很温柔,也很理智。</div>
</body>
</html>
知识点四、首行缩进:利用文字样式text-indent:1em;可以对文本进行首行缩进。缩进的单位可以是px、em等常用数值单位。em是该文本的实际像素。
<style>
p{width: 500px;text-indent: 2em;font-size: 12px;}
</style>
知识点五、词间距:Word-spacing。使用这个属性我们可以定义或者设置单词之间的距离 。
<style>
p{word-spacing: 20px;}/*词间距*/
</style>
知识点六、PRe标签:预格式化文本标签。使用此标签可以把代码中的空格和换行直接显示到页面上。但是 < 、 > 和 & 等特殊文字需要用 < 、 > 和 & 的方式记述。
<pre>
空格 可以 保留,换行符也可以
保留。
</pre>
新闻热点
疑难解答