Day_6.(2)

来源：互联网发布：java开发bi方向编辑：程序博客网时间：2024/05/19 13:15

知识点三、样式的层叠性：运行以下代码，可以发现，文字的最终颜色为绿色，字体为：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>

0 0