CSS的注释与继承
CSS的注释
CSS代码和其他编程语言都一样,养成良好的习惯对提高代码的可读性,以及后期的维护都非常的重要。
CSS中注释语句位于/*和*/之间,内容可以是单行注释,也可以是多行注释。
<span style="font-size:24px;">/*this is a CSS1 comment*/
/*this is a CSS2 comment,and it
can be several lines long without
any problem whatsoever*/</span>
在<style>之间加上<!--和-->将CSS包含其中,是因为避免老式浏览器不支持CSS,直接将CSS代码显示在浏览器上。
CSS的继承
CSS中的继承并不是像C++或者是Java中的继承,就是将各个HTML标记看作是一个个容器,其中被包含的小容器会继承包含它的大容器的风格样式。
父子关系,所有的CSS语句都是基于各个标记之间的父子关系的。
<span style="font-size:24px;"><html>
<head>
<title>
父子关系
</title>
<base target="_blank">
<style>
<!--
h1{
color:red;
text-decoration:underline;
}
h1 em{
color:#004400;
font-size:40px;
}
</style>
</head>
<body>
<h1>祖国的首都<em>北京</em></h1>
<p>欢迎来到祖国的首都<em>北京</em>,这里是全国<strong>政治、<a href="economic.html"><em>经济</em></a>、文化</strong>的中心</p>
<ul>
<li>在这里,你可以
<ul>
<li>感受大自然的美丽</li>
<li>体验生活的节奏</li>
<li>领略首都的激情与活力</li>
</ul>
</li>
<li>你还可以:
<ol>
<li>去八达岭爬长城</li>
<li>去香山看红叶</li>
<li>去王府井逛夜市</li>
</ol>
</li>
</ul>
<p>如果您有任何问题,欢迎<a herf="contactus">联系我们</a></p>
</body>
</html></span>
CSS继承是指,子标记会继承父标记的所有样式风格,并可以在父标记样式风格的基础上加以修改,产生新的样式,并且,子标记的样式风格完全不会影响父标记。
<span style="font-size:24px;"><html>
<head>
<title>父子关系</title>
<style>
<!--
.li1{
color:red;
}
.li2{
color:blue;
}
-->
</style>
</head>
<body>
<ul>
<li class="li1">关系1
<ul>
<li>页面父子关系复杂时</li>
<li>页面父子关系复杂时</li>
<li>这里省略20个嵌套……</li>
</ul>
<ol>
<li>页面父子关系复杂时</li>
<li>页面父子关系复杂时</li>
<li>这里省略20个嵌套……</li>
</ol>
</li>
<li class="li2">关系2
<ul>
<li>页面父子关系复杂时</li>
<li>页面父子关系复杂时</li>
<li>这里省略20个嵌套……</li>
</ul>
<ol>
<li>页面父子关系复杂时</li>
<li>页面父子关系复杂时</li>
<li>这里省略20个嵌套……</li>
</ol>
</li>
</ul>
</body>
</html>
</span>
CSS继承一直贯穿整个CSS设计的始终,每个标记都遵循着CSS继承的概念,可以大大的减少代码编写量,提高可读性。