本文主要内容:css的层叠特性--继承性; 感谢:前沿科技!
如果您打算使用本文涉及到的教程,那么请您先浏览《本站公告》
否则请您离开本文或本站,如果您执意使用本教程请自行承担相关后果~!
谢谢合作~!
关于css的层叠特性--继承性
公式:行内样式 > ID样式 > 类别样式 > 标记样式
下面我们例子说明:
源代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css的层叠特性--继承性</title>
<style type="text/css">
<!--
.red {
font-size: 12px;
color: red;
}
#line {
font-size: 14px;
color: blue;
}
.purple {
font-size: 16px;
color: purple;
}
#line2 {
font-size: 24px;
color: #FFFF00;
}
-->
</style>
</head>
<body>
<p>我是一个段落</p>
<p class="red">引用类别样式的段落</p>
<p id="line">引用ID样式的段落</p>
<p id="line" class="red">同时引用ID和类别样式的段落,看看显示那个?</p>
<p class="purple red">同时引用两个类别样式的段落,看看显示那个?</p>
<p id="line line2">同时引用两个ID样式的段落,看看显示那个?</p>
<p style="color:#FF6666" class="red">看看显示那个?</p>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css的层叠特性--继承性</title>
<style type="text/css">
<!--
.red {
font-size: 12px;
color: red;
}
#line {
font-size: 14px;
color: blue;
}
.purple {
font-size: 16px;
color: purple;
}
#line2 {
font-size: 24px;
color: #FFFF00;
}
-->
</style>
</head>
<body>
<p>我是一个段落</p>
<p class="red">引用类别样式的段落</p>
<p id="line">引用ID样式的段落</p>
<p id="line" class="red">同时引用ID和类别样式的段落,看看显示那个?</p>
<p class="purple red">同时引用两个类别样式的段落,看看显示那个?</p>
<p id="line line2">同时引用两个ID样式的段落,看看显示那个?</p>
<p style="color:#FF6666" class="red">看看显示那个?</p>
</body>
</html>