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的继承和层叠。
675
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
