跟学习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;。因此后面的会覆盖前面的,最终显示为蓝色。

在本书中,对于难以独立成章节的小技巧,我会穿插到各个章节中。这些小技巧很棒,在其他书上可能没办法学得到,小伙伴们别忘了积累一下喔。

最后的话:在这一章的学习中,大家可能都感觉到个教程的不同之处了。在教程中,我们会根据实际工作开发,然后在各个章节中穿插各种非常棒的技巧。最重要的是,我们会告诉小伙伴们哪些属性该记忆,哪些压根儿用不上,这可以大大提高学习效率。因为笔者我嘛,曾经作为初学者时,有过痛苦的经历。当初都是一头扎进去,什么都学,过一段时间又忘,然后又接着复习。到最后实践的时候,发现很多知识点都用不上!白白浪费了大量时间和精力。希望站长的这些心血与经验,能够为大家节省时间。人生苦短,时间更多应该用来追逐自己喜欢的东西,而不是在一些弯路上白白浪费。