CSS中使用注释来解释代码块或在开发过程中进行临时更改。注释的代码不执行。

网站建设

网站建设

CSS中的单行和多行注释都以开头/*和结尾*/，并且您可以根据需要在样式表中添加任意数量的注释。例如：

/* This is a single line comment*/
.group:after {
  content: "";
  display: table;
  clear: both;
}

/*
  This is
  a multi-line
  comment
*/

您还可以通过设置样式的方式使注释更具可读性：

/*
***
* SECTION FOR H2 STYLE 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
*/

用注释组织CSS

在较大的项目中，CSS文件的大小会迅速增加，并且变得难以维护。将您的CSS组织成带有目录的不同部分可能会有所帮助，以使将来查找某些规则更加容易：

/* 
*  CSS TABLE OF CONTENTS
*   
*  1.0 - Reset
*  2.0 - Fonts
*  3.0 - Globals
*  4.0 - Color Palette
*  5.0 - Header
*  6.0 - Body
*    6.1 - Sliders
*    6.2 - Imagery
*  7.0 - Footer
*/

/*** 1.0 - Reset ***/

/*** 2.0 - Fonts ***/

/*** 3.0 - Globals ***/

/*** 4.0 - Color Palette ***/

/*** 5.0 - Header ***/

/*** 6.0 - Body ***/
h2 {
  font-size: 1.2em;
  font-family: "Ubuntu", serif;
  text-transform: uppercase;
}

/*** 5.1 - Sliders ***/

/*** 5.2 - Imagery ***/

/*** 7.0 - Footer ***/

有关CSS的更多信息：CSS语法和选择器

当我们谈论CSS的语法时，我们在谈论事物的布局。关于去哪里有规则，因此都可以一致地编写CSS，并且程序（如浏览器）可以解释CSS并将其正确地应用于页面。

编写CSS的主要方法有两种。

内联CSS

内联CSS将样式应用于单个元素及其子元素，直到遇到另一个覆盖第一个样式的样式为止。

要应用内联CSS，请将“样式”属性添加到您要修改的HTML元素中。在引号内，包括用分号分隔的键/值对列表（每个键/值对依次由冒号分隔），以指示要设置的样式。

这是内联CSS的示例。单词“一个”和“第二”将具有黄色的背景色和红色的文本色。“三”一词具有替代第一个的新样式，将具有绿色的背景颜色和青色的文本颜色。在示例中，我们将样式应用于<div>标签，但是您可以将样式应用于任何HTML元素。

<div style="color:red; background:yellow">
  One
  <div>
    Two
  </div>
  <div style="color:cyan; background:green">
    Three
  </div>
</div>

内部CSS

尽管编写内联样式是更改单个元素的快速方法，但是有一种更有效的方法可将同一样式同时应用于页面的许多元素。

内部CSS在<style>标记中指定了其样式，并将其嵌入在<head>标记中。

这是一个与上述“内联”示例具有相似效果的示例，不同之处在于CSS已被提取到其自己的区域。单词“一个”和“两个”将与div选择器匹配，并在黄色背景上为红色文本。单词“三”和“四”也将与div选择器匹配，但它们也与.nested_div应用于引用该类的任何HTML元素的选择器匹配。这个更具体的选择器会覆盖第一个选择器，最终它们在绿色背景上显示为青色文本。

<style type="text/css">
  div { color: red; background: yellow; }
  .nested_div { color: cyan; background: green; }
</style>

<div>
  One
  <div>
    Two
  </div>
  <div class="nested_div">
    Three
  </div>
  <div class="nested_div">
    Four
  </div>
</div>

上面显示的选择器非常简单，但是会变得非常复杂。例如，可以仅将样式应用于嵌套元素；也就是说，一个元素是另一个元素的子元素。

在下面的示例中，我们指定了一种样式，该样式仅应应用于div其他div元素的直接子元素。结果是“两个”和“三个”将在黄色背景上显示为红色文本，但“一个”和“四个”将不受影响（并且很可能在白色背景上显示为黑色文本）。

<style type="text/css">
  div > div { color: red; background: yellow; }
</style>

<div>
  One
  <div>
    Two
  </div>
  <div>
    Three
  </div>
</div>
<div>
  Four
</div>

外部CSS

所有样式都有自己的文档，该文档链接在<head>标记中。链接文件的扩展名是.css