mozilla
您的搜索结果

    创建可读性良好的CSS

    这是开始学CSS系列教程的第6部分; 本节讨论了CSS语言自身的样式及语法。你可以更改CSS示例文件的代码外观,来使其更具可读性。

    资料:创建可读性良好的 CSS

    你可以通过添加空白字符和注释来提高样式表的可读性。你也可以把不同的选择器放到一组中来,这样同一样式可以应用到这一组中。

    空白字符

    空白字符是指空格、tab字符和换行。你可以通过添加这些空白字符来让提高样式表的可读性。

    对页面而言,空白字符也是页面的一个组成部分,它的效果就是创造了边距、分割,还有行和列间的空白。

    如果你的样式表中一行只有一条规则,那这是使用空白字符最少的情况。但是,对于复杂的样式表而言,这可能不便于阅读,而且维护起来也比较困难。

    样式表的书写风格可以根据你自己的喜好来选择。但是,如果你开发的项目需要分享给他人,那就很有必要来制定一些书写规范。

    示例

    有人喜欢我们这里使用的紧凑的书写风格,但是如果规则较长的时候就需要来进行分割:

    .carrot {color: orange; text-decoration: underline; font-style: italic;}
    

    也有人喜欢下面这种每行只写一个属性-值的风格:

    .carrot
    {
    color: orange;
    text-decoration: underline;
    font-style: italic;
    }
    

    还有人喜欢缩进(两个空格、四个空格,或者tab键是最常用的方式):

    .carrot {
      color: orange;
      text-decoration: underline;
      font-style: italic;
    }
    

    还有人喜欢这种垂直对齐的方式(这种方式比较难维护):

    .carrot
        {
        color           : orange;
        text-decoration : underline;
        font-style      : italic;
        }
    

    有些人混合使用空白字符来提高可读性:

    .vegetable         { color: green; min-height:  5px; min-width:  5px }
    .vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
    .vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }
    

    而且,在使用的空白字符的时候,有人喜欢用tab键,有人喜欢使用空格。

    注释

    CSS注释以/* 开始,以 */结束。

    你可以在样式表中写些实际意义的注释,也可以是为了测试的目的而写的临时性的注释内容。

    对于样式表中的注释内容一定要写在注释标签内,这样浏览器在解析的时候会忽略注释。一定要注意注释的起始标签。样式表的其他部分始终要符合语法规则。

    示例
    /* style for initial letter C in first paragraph */
    .carrot {
      color:            orange;
      text-decoration:  underline;
      font-style:       italic;
      }
    

    选取器组

    当很多元素具有相同的样式时,你就需要定义一个选择器组,组内用逗号分隔。这样声明的样式就会应用到组内所有的选择器上。

    在样式表的其他地方,你也可以单独对这些选择器重新设置样式,这些样式会应用到相应的选择器上。

    示例

    这条规则将 <h1>, <h2>, 和 <h3> 匹配到的元素设置为相同颜色。

    将定义颜色的规则写在一个地方是正确的,因为有些时候,这个颜色值可能需要统一修改。

    /* color for headings */
    h1, h2, h3 {color: navy;}
    

    实践:添加注释来提高展现力

    1. 编辑你的样式表,将下面的几条规则添加进去(规则顺序可以任意设置):
      strong {color: red;}
      .carrot {color: orange;}
      .spinach {color: green;}
      #first {font-style: italic;}
      p {color: blue;}
      
    2. 为了让代码变得可读性更高,你需要通过分析其中的联系来对代码重新排序,并选择你认为最合适的方式来添加一些空白字符和注释。
    3. 保存文件并刷新浏览器页面,要确保你更改后代码不影响原来的显示效果:
      Cascading Style Sheets
      Cascading Style Sheets
    挑战

    给样式表中的部分内容添加注释来让文档的第一个字母颜色变为红色,但是注意不要改变其他任何内容:

    Cascading Style Sheets
    Cascading Style Sheets

    (这个不止一种解决方案。)

    一种解决方法:
    其中一种解决办法就是给.carrot添加注释:
    .carrot {
      color: orange;
    }
    
    A more specific selector, p#second also works. Hide solution
    查看解决方案

    接下来是什么?

    本节中,你的示例样式使用了 italic 文本以及 underlined 文本。 下一节将描述更多的方式来 详细指定文本的外观 。

    文档标签和贡献者

    此页面的贡献者有: reygreen1, Synyan, ziyunfei, aztack, neutrous, teoli
    最后编辑者: Synyan,