CSS全称为Cascading Style Shee:层叠样式表,CSS的出现,使网页的内容和样式得以分离,达到了简化页面元素修饰,美化代码的目的,也进一步提高了网站的可维护性,方便网站快速重构,实现了网站定期换肤的功能。
在CSS中子标记会继承父标记的样式设置,并可以在父标记样式的基础上加以修改,但是并不是所有属性都会自动传递给子标记,例如:边框属性就是非继承性的。
层叠特性和继承不一样,可以理解为“样式冲突”的解决方案,即对于同一内容设置了多个不同类型样式产生冲突时的处理,CSS规定以下优先级:行内样式>id样式>class样式>标记样式。
我们来看效果:
下边是源代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的继承与层叠</title>
<style type="text/css">
body{font-size:12px;}
.c1{font-size:28px; color:#9400D3; font-family:黑体;}
#p1,#p2{font-family:幼圆,楷体,隶书,宋体; color:#2F4F4F; font-size:48px;}
</style>
</head>
<body>
这是body的文本内容:
<p>第一段 子标记p继承了父标记body的样式</p >
<p class="c1">第二、三、四段都设置了class="c1"</p >
<p class="c1" id="p1">第三段设置了id="p1",于是覆盖了CSS对class="c1"的样式设置</p >
<p class="c1" id="p2" style="font-family:隶书; font-size:58px; color:#CD5555;">这是第四行,设置了行内样式</p >
</body>
</html>
CSS的body中设置了字体大小12px,子标记p进行了继承。
2、3、4段都设置了class=“c1”样式,第二段的样式发生了改变(按照class=“c1”)。
3、4段又进行了id=“p1”、“p2”的样式设置,第三段的id样式设置就覆盖了原来的class样式。
4段又用CSS进行了行内样式设置,使字体增大、字体变为隶书、颜色也变为了红色。
通过上边的这个例子,我们看到了CSS中样式设置的优先级,这就是CSS的继承和层叠。