• :绿叶现版本暂时不再更新维护,全新版本已经在开发中,新系列图书(暂时8本,后面再续)也将于12月后陆续出版,敬请期待~

3.7 CSS注释

一、CSS注释简介

跟HTML一样,为了代码方便理解、方便查找或者方便以后你对自己代码进行修改,我们经常要在CSS中一些关键代码旁做一下注释。

语法:

/*注释的内容*/

说明:

“/*”表示注释的开始,“*/”表示注释的结束。

在这里需要注意一下HTML注释和CSS注释方式的不同,大家不要搞混了。对于HTML注释,大家可以回去查看对比一下。

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS注释</title>
    <style type="text/css">
        /*使用元素选择器,定义所有p元素属性*/
        p
        {
            font-family:微软雅黑; /*字体类型为微软雅黑*/
            font-size:15px;       /*字体大小为14px*/
            color: #E17508;       /*字体颜色为#E17508*/
            font-weight:bold;     /*字体粗细为bold*/
        }
        /*使用id选择器,定义个别样式*/
       #p2
       {
           color:red;             /*字体颜色为red*/
       }
    </style>
</head>
<body>
    <p id="p1">HTML控制网页的结构</p>
    <p id="p2">CSS控制网页的外观</p>
    <p id="p3">JavaScript控制网页的行为</p>
</body>
</html>

在浏览器预览效果如下:

CSS注释

分析:

这个例子使用的CSS选择器是“元素选择器”和“id选择器”,元素选择器能把所有同类的元素选中并进行CSS样式的设置,id选择器能针对某一个元素进行CSS样式设置。

在这里,我们又给大家穿插了一个小技巧。浏览器解释CSS是有一定顺序的,如果对某一个元素先后都定义了同一个属性,在浏览器中以“后定义的那个属性值”为准。例如上面例子就是这样,id为p2的p元素在元素选择器已经定义了一次“color: #E17508;”,在id选择器又定义了一次“color: red;”,因此“后定义的color值”就会覆盖“前定义的color值”,浏览器显示的效果就是红色了。

在绿叶学习网的教程中,对于有些难独立成章节的小技巧,我们会穿插到各个章节中去,很多都是在别的教程没办法学到的,或者说在别的教程没有那么多。大家别忘了平常要积累一下喔。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取更多学习资源和配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:593173594(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部