• :一大波赠书活动正式来袭!满足条件的小伙伴每人赠送一本书,只限前100名!小伙伴们赶紧到碗里来!查看详情

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值”,浏览器显示的效果就是红色了。

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

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

如果你想要获取更多学习资料,或者在学习过程中遇到疑问想要得到跟教程一样最优质的解答,请通过以下方式关注我们:

(1)官方微博:

(2)新手Q群:69660533(暗号:lvye)(建议初学前端的加)

(3)官方Q群:457631216(暗号:lvye)(建议有JS基础的加)

(4)绿叶论坛:进入论坛

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

回到顶部