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中使用注釋來解釋代碼塊或在開發(fā)過程中進行臨時更改。 注釋的代碼不執(zhí)行。
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中的單行和多行注釋都以/*開頭，并以*/結(jié)尾，并且您可以根據(jù)需要在樣式表中添加任意數(shù)量的注釋。 例如：
/* 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:
您還可以通過設(shè)置樣式的風(fēng)格來使注釋更具可讀性：
/* *** * 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組織成帶有目錄的不同部分可能會有所幫助，以便將來更輕松地查找某些規(guī)則：
/* * 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 ***/有關(guān)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.
當我們談?wù)揅SS的語法時，我們在談?wù)撌挛锏牟季帧?關(guān)于去哪里有規(guī)則，因此都可以一致地編寫CSS，并且程序(如瀏覽器)可以解釋CSS并將其正確地應(yīng)用于頁面。
There are two main ways to write CSS.
編寫CSS的主要方法有兩種。
內(nèi)聯(lián)CSS (Inline CSS)
Specifics on CSS Specificity: CSS Tricks
有關(guān)CSS特殊性的細節(jié)： CSS技巧
Inline CSS applies styling to a single element and its children, until another style overriding the first is encountered.
內(nèi)聯(lián)CSS將樣式應(yīng)用于單個元素及其子元素，直到遇到另一個覆蓋第一個樣式的樣式。
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.
要應(yīng)用內(nèi)聯(lián)CSS，請將“樣式”屬性添加到您要修改HTML元素中。 在引號內(nèi)，包括用分號分隔的鍵/值對列表(每個鍵/值對依次由冒號分隔)，以指示要設(shè)置的樣式。
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.
這是內(nèi)聯(lián)CSS的示例。 單詞“一個”和“第二”將具有黃色的背景色和紅色的文本色。 “三”一詞具有新的樣式，該樣式將覆蓋第一個樣式，并且將具有綠色的背景顏色和青色的文本顏色。 在示例中，我們將樣式應(yīng)用于<div>標記，但是您可以將樣式應(yīng)用于任何HTML元素。
<div style="color:red; background:yellow">One<div>Two</div><div style="color:cyan; background:green">Three</div> </div>內(nèi)部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.
雖然編寫內(nèi)聯(lián)樣式是更改單個元素的快速方法，但是有一種更有效的方法可將同一樣式同時應(yīng)用于頁面的許多元素。
The internal CSS has its styles specified in the <style> tag, and it is embedded in the <head> tag.
內(nèi)部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.
這是一個與上述“內(nèi)聯(lián)”示例具有相似效果的示例，只是CSS已被提取到其自己的區(qū)域。 單詞“ 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.
上面顯示的選擇器非常簡單，但是會變得非常復(fù)雜。 例如，可以僅將樣式應(yīng)用于嵌套元素； 也就是說，一個元素是另一個元素的子元素。
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).
這里就是我們指定只應(yīng)適用于一種風(fēng)格的例子div是其他的直接子元素div元素。 結(jié)果是“兩個”和“三個”將在黃色背景上顯示為紅色文本，但“一個”和“四個”將不受影響(并且很可能在白色背景上顯示為黑色文本)。
<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注釋
總結(jié)
以上是生活随笔為你收集整理的css注释_CSS注释示例–如何注释CSS的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 梦到属龙的男性什么意思
- 下一篇： angular示例_用示例解释Angul