跟学习HTML时一样,为了提高代码的可读性和可维护性,方便自己修改以及团队开发,我们也需要经常对CSS中的关键代码做一下注释。
语法:
/* 注释的内容 */
说明:
/*
表示注释的开始,*/
表示注释的结束。需要特别注意一下,CSS注释与HTML注释的语法是不一样的,大家不要搞混了。
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*这是CSS注释*/
p{color:pink;}
</style>
</head>
<body>
<!--这是HTML注释-->
<p>记忆之所以美,是因为有现实的参照。</p>
</body>
</html>
浏览器预览效果如下图所示:
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*使用元素选择器,定义所有p元素样式*/
p
{
font-family:微软雅黑; /*字体类型为微软雅黑*/
font-size:14px; /*字体大小为14px*/
font-weight:bold; /*字体粗细为bold*/
color:red; /*字体颜色为red*/
}
/*使用id选择器,定义个别样式*/
#p2
{
color:blue; /*字体颜色为blue*/
}
</style>
</head>
<body>
<p id="p1">HTML控制网页的结构</p>
<p id="p2">CSS控制网页的外观</p>
<p id="p3">JavaScript控制网页的行为</p>
</body>
</html>
浏览器预览效果如下图所示。
分析:
在这个例子中,我们使用了元素选择器和id选择器。元素选择器能把所有相同元素选中然后定义CSS样式,而id选择器能针对某一个元素定义CSS样式。
这里给大家穿插一个小技巧:浏览器解析CSS是有一定顺序的,在这个例子中,第2个p元素一开始就使用元素选择器定义了一次color:red;,然后又接着用id选择器定义了一次color:blue;。因此后面的会覆盖前面的,最终显示为蓝色。
在本书中,对于难以独立成章节的小技巧,我会穿插到各个章节中。这些小技巧很棒,在其他书上可能没办法学得到,小伙伴们别忘了积累一下喔。
最后的话:在这一章的学习中,大家可能都感觉到个教程的不同之处了。在教程中,我们会根据实际工作开发,然后在各个章节中穿插各种非常棒的技巧。最重要的是,我们会告诉小伙伴们哪些属性该记忆,哪些压根儿用不上,这可以大大提高学习效率。因为笔者我嘛,曾经作为初学者时,有过痛苦的经历。当初都是一头扎进去,什么都学,过一段时间又忘,然后又接着复习。到最后实践的时候,发现很多知识点都用不上!白白浪费了大量时间和精力。希望站长的这些心血与经验,能够为大家节省时间。人生苦短,时间更多应该用来追逐自己喜欢的东西,而不是在一些弯路上白白浪费。