语法

/* comment */

此语法用于单行和多行注释。
现在让我们看一个使用注释的例子。

添加 CSS 注释的示例:

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      p {
        line-height: 2em;/*1em = 16px */
      }
    </style>
  </head>
  <body>
    <p>Some paragraph.</p>
    <p>This paragraph is written with 2em line-height.</p>
  </body>
</html>

许多设计人员正在分解部分并将样式表协调成小的、易于理解的部分,以便在阅读时可以快速调查。
我们通常会看到注释前后都有一系列标点符号,在页面上创建大量清晰的中断,以便于查看。
这是一个例子。

添加带有明确中断的 CSS 注释的示例:

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      a {
        display: block;
        width: 190px;
        height: 45px;
        /***

        This is a style for the logo.

        ***/
        background: url('//static/img/logo.png') no-repeat center center
      }
    </style>
  </head>
  <body>
    <h1>Comment Example</h1>
    <a href="https://www.onitroad.com/"></a>
  </body>
</html>

虽然添加过多的注释可能会影响的下载速度和实际性能,但我们必须毫不犹豫地应用它们。
大规模减少的影响需要多行注释。
这一切都归结为平衡,就像网络结构的许多部分一样。

现在,让我们看另一个例子。

在标点符号前后添加 CSS 注释的示例:

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      a {
        display: block;
        width: 190px;
        height: 45px;
       /*---------------------- Logo ------------------------*/
        background: url('//static/img/logo.png') no-repeat center center
      }
    </style>
  </head>
  <body>
    <h1>Comment</h1>
    <a href="https://www.onitroad.com/"></a>
  </body>
</html>

每个都由结构、功能和风格的元素组成。
级联样式表 (CSS) 用于定义的外观(“外观和感觉”)。

此类样式与 HTML 结构分开处理,以便可以轻松更新和应用 Web 标准。

样式表的问题在于样式表可能会因多个网页的大小和复杂性而变得相当长和复杂。
现在尤其如此,媒体查询是响应式样式设计的重要组成部分,有助于确保无论设备如何,都可以看起来如此。

仅这些媒体查询就可以为 CSS 文档提供大量新样式,从而使使用它变得更加困难。
其中CSS 注释可以成为设计者和开发者必不可少的帮助。

CSS 注释用于提供有关代码的解释性信息。
我们还可以使用它来暂时禁用 CSS 代码的某些部分。
它在调试或者调整网页格式时非常有用。
设计注释对文档的布局没有影响。
无法显示注释,因为它们被浏览器忽略。
他们解释了可能令人困惑的功能,轻松阻止代码块运行,并为代码的功能和含义创建文档。

在编写 CSS 代码时使用注释对编码人员和任何可能使用它的人都有帮助。
设计人员通常使用它们来注释或者关闭某些代码区域,以查看如果该区域不是页面的一部分会发生什么。
无需对我们编写的每一段代码进行注释。
但是,准确的注释会有所帮助。

如何添加和使用 CSS 注释

格式正确的注释可以向那些以前可能不熟悉代码的人描述样式表的重要方面。
注释对于之前在上工作过但最近没有工作过的人也非常有用;网页设计师通常在各种上工作,并且很难记住从一种到以下的设计技巧。

注释可以放在样式表中任何允许空白的地方。
它们可用于单行或者跨越多行。

通过添加 /*开始注释,并通过添加 */关闭注释。

日期:2020-06-02 22:14:53 来源:oir作者:oir