样式继承:

<html>
<head>
<title>样式继承</title>
<style type="text/css">
.s{
border-bottom:2px solid red;
font-size:30px;
font-weight:bold;
color:red;
height:60px;
line-height:60px;
padding-left:20px;
}
.title {
margin-left:20px;
font-size:20px;
color:red;
line-height:35px;
}
.content {
margin-left:20px;
border:1px solid red;
font-size:18px;
font-weight:normal;
color:blue;
width:95%
line-height:20px;
background-color:#bfa;
padding:10px;
padding-left:20px;
}
/*超链接*/
a:link {
color:red;
}
a:visited{
color:gray;
text-decoration:none;
font-size:12px;
}
a:hover {
color:green;
}
a:active {
color:black;
}
</style>
</head>
<body>
<div class="s">样式继承</div>
<div class="title">
1.超链接
<div class="content">
<a href="http://www.baidu.com">www.baidu.com</a>
</div>
</div>
<div class="title">
2.样式继承
<div class="content">
div content
<div style="color:yellow;">div</div>
</div>
</div>
</body>
</html>

结果:

css样式继承 第7节-LMLPHP

05-11 11:16