揭秘CSS(第 1 版)
1.3.2 CSS注释语法
阅读(

概述

CSS简介

CSS开发环境

CSS语法

样式规则语法

CSS注释语法

一个样式表创建完成后,再过几个星期、几个月,甚至几年后,再回过头来进行修改时,你可能怎么也想不明白以前为什么要创建这个样式,以及它到底有什么作用。对于任何项目,都是如此。

因此,在构建网站时,应该提示自己做了什么,以及这么做的原因。庆幸的是,可以通过CSS注释,把这些提示信息嵌入到式表中。

CSS注释,只不过是用“/*”和“*/”包围起来的内容。注释的内容不会被浏览器读取或执行,而它确为你提供了有益的提示。假如你创建了下面的样式,来解决IE的双边距bug:

* html .fl {
    display: inline;
}

在编写这个样式的时候,你很清楚它的作用,但 3 个月后,你还记得清楚吗?添加注释,让你或者需要在这个网站上工作的其他人,了解该样式的作用及创建它的原因。如:

/* 修复IE双边距bug */
* html .fl {
    display: inline;
}

注释可以是单行的,如果注释的内容很长,也可以跨越多行。注释可以独占一行,也可以放在声明块或声明语句中。注释可以出现在CSS代码的任何位置,但是,不能把注释放在另一个注释里面,即注释不能嵌套。以下都是合法的注释:

/* reset */
body, p, img, ul, ol {
    margin: 0;
    padding: 0;
}
body {
    /* width: 90%;
    height: 100%; */
    font-size: 14px  /* 62.5% */;  /* 16px * 62.5% = 10px */
    background: #ccc;
}

如果CSS文件非常长,那么寻找特定的样式会很困难。一种改进方法是使用大的注释块,来把CSS文件分隔成多个逻辑部分,并在注释块的头部添加一个标志。这样,搜索这个标志和注释头中的前几个字母,就可以立即找到要寻找的部分。

/*------------ @ reset ------------*/
/*------------ @ general ----------*/
/*------------ @ hack -------------*/

并非所有东西都能够很自然的非常明确的块,这需要开发人员进行判断。总之,代码分隔得越细致、越合理,就越容易理解,而且能够更快地找到要寻找的规则,日后维护起来也越轻松。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验