css注释_CSS注释示例–如何注释CSS

css注释

Comments are used in CSS to explain a block of code or to make temporary changes during development. The commented code doesn’t execute.

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

Both single and multi-line comments in CSS begin with /* and end with */, and you can add as many comments to your stylesheet as you like. For example:

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

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

You can also make your comments more readable by stylizing them:

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

/*
***
* 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 (Organizing CSS with comments)

In larger projects, CSS files can quickly grow in size and become difficult to maintain. It can be helpful to organize your CSS into distinct sections with a table of contents to make it easier to find certain rules in the future:

在较大的项目中，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语法和选择器 (A little bit more about CSS: CSS Syntax and Selectors)

When we talk about the syntax of CSS, we’re talking about how things are laid out. There are rules about what goes where, both so you can write CSS consistently and a program (like a browser) can interpret it and apply it to the page correctly.

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

There are two main ways to write CSS.

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

内联CSS (Inline CSS)

Specifics on CSS Specificity: CSS Tricks

有关CSS特殊性的细节： CSS技巧

Inline CSS applies styling to a single element and its children, until another style overriding the first is encountered.

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

To apply inline CSS, add the “style” attribute to an HTML element that you’d like to modify. Inside quotes, include a semicolon-delimited list of key/value pairs (each in turn separated by a colon) indicating styles to set.

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

Here’s an example of inline CSS. The words “One” and “Two” will have a background color of yellow and text color of red. The word “Three” has a new style that overrides the first, and will have a background color of green and text color of cyan. In the example, we’re applying styles to <div> tags, but you can apply a style to any HTML element.

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

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

内部CSS (Internal CSS)

While writing an inline style is a quick way to change a single element, there’s a more efficient way to apply the same style to many elements of the page at once.

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

The internal CSS has its styles specified in the <style> tag, and it is embedded in the <head> tag.

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

Here’s an example that has a similar effect as the “inline” example above, except the CSS has been extracted to its own area. The words “One” and “Two” will match the div selector and be red text on a yellow background. The words “Three” and “Four” will match the div selector too, but they also match the .nested_div selector which applies to any HTML element that references that class. This more specific selector overrides the first, and they end up appearing as cyan text on a green background.

这是一个与上述“内联”示例具有相似效果的示例，只是CSS已被提取到其自己的区域。单词“ One”和“ Two”将与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>

The selectors shown above are extremely simple, but they can get quite complex. For example, it’s possible to apply styles only to nested elements; that is, an element that’s a child of another element.

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

Here’s an example where we’re specifying a style that should only be applied to div elements that are a direct child of other div elements. The result is that “Two” and “Three” will appear as red text on a yellow background, but “One” and “Four” will remain unaffected (and most likely black text on a white background).

这里就是我们指定只应适用于一种风格的例子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 (External CSS)

All the styling has its own document which is linked in the <head> tag. The extension of the linked file is .css

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

翻译自: https://www.freecodecamp.org/news/comments-in-css/

css注释