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注釋
