CSS 語法

2018-05-15 17:26 更新
先決條件: 基本計算機知識，安裝的基本軟件，基本知識 developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files\">處理文件，HTML基礎(chǔ)(學習 HTML簡介)，以及 CSS的工作原理的想法。
目的: 詳細學習CSS的基本語法結(jié)構(gòu)。

注意:CSS是一種聲明性語言，它使其語法相當容易，直觀易懂。 此外，它還有一個非常漂亮的錯誤恢復系統(tǒng)，允許你犯錯誤，而不破壞一切 - 例如不明白的聲明一般被忽略。 缺點是，可能更難理解錯誤來自哪里。 閱讀，所有將最終變得清楚。

一串詞匯

在最基本的層面上，CSS包含兩個構(gòu)件:

  • Properties: Human-readable identifiers that indicate which stylistic features (e.g. font, width, background color) you want to change.
  • Values: Each specified property is given a value, which indicates how you want to change those stylistic features (e.g. what you want to change the font, width or background color to.)

與值配對的屬性稱為 CSS聲明 。 CSS聲明放在 CSS聲明塊中。 最后，CSS聲明塊與選擇器配對以產(chǎn)生 CSS規(guī)則集(或 CSS規(guī)則)。

在理論和書面解釋過于深入之前，讓我們看一個具體的例子(我們在前面的文章中看到了非常相似的東西)。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>

    <ul>
      <li>This is</li>
      <li>a list</li>
    </ul>
  </body>
</html>

和CSS文件:

h1 {
  colour: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

p, li {
  text-decoration: underline;
}

組合這兩個給我們以下結(jié)果:

讓我們更詳細地看一下語法。

CSS聲明

將CSS屬性設(shè)置為特定值是CSS語言的核心功能。 CSS引擎計算哪些聲明適用于頁面的每個單個元素，以便適當?shù)夭季趾惋L格化。 重要的是要記住，CSS中的屬性和值都區(qū)分大小寫。 每個對中的屬性和值由冒號分隔(:)。

alt ="">

在CSS中有超過 300個不同的屬性，并且?guī)缀跤袩o數(shù)個不同的值。 不是所有的屬性和值對都是允許的; 每個屬性都有為其定義的有效值的特定列表。

重要:如果某個屬性未知或某個值對于某個屬性無效，則聲明將被視為無效，并被瀏覽器的CSS引擎完全忽略。

重要:在CSS(和其他網(wǎng)絡(luò)標準)中，已經(jīng)同意美國拼寫作為遵守不確定性出現(xiàn)的標準。 例如， color (如上面的代碼所示)應(yīng)該總是拼寫 color 。 color 將無法工作。

Active learning: Spot the declarations

在上面的示例中，有五個單獨的CSS聲明。 你能識別無效的聲明并找出為什么它無效嗎？

CSS聲明塊

聲明分組在塊中，每組聲明由開頭的大括號( {)和結(jié)束的(} )

聲明塊中包含的每個聲明必須用分號(; )分隔，否則代碼將無法工作(或至少會給出意外的結(jié)果)。 )塊的最后一個聲明不需要以分號結(jié)尾，雖然它通常被認為是好的樣式，因為它阻止了在用另一個擴展塊時忘記添加它 宣言。

"。 alt ="">

注意:塊有時可以嵌套; 在這種情況下，打開和關(guān)閉括號必須邏輯嵌套，與嵌套HTML元素的標簽相同。 您會遇到的最常見的例子是 @ - rules，，它們以@標識符開頭，例如 @media ， @ font-face >，etc(見下面的CSS語句)。

注意:聲明塊可能為空 - 這是完全有效的。

Active learning: Where are the declaration blocks?

在上面的示例中，您是否已經(jīng)能夠識別三個單獨的CSS聲明塊？

CSS規(guī)則

我們?nèi)鄙僖粋€部分的謎題 - 我們需要討論如何告訴我們的聲明塊應(yīng)該應(yīng)用哪些元素。 這是通過為每個聲明塊添加一個 selector 來實現(xiàn)的 - 該模式匹配頁面上的某些元素。 相關(guān)的聲明將僅應(yīng)用于這些元素。 選擇器加上聲明塊稱為規(guī)則集，或者通常只是一個規(guī)則。

alt ="">

選擇器可以變得非常復雜 - 您可以使規(guī)則匹配多個元素，包括用逗號分隔的多個選擇器(一個組，)和選擇器可以鏈接在一起，例如，我想選擇任何具有類"blah "，但只有當它在一個article元素內(nèi)，并且只有當它被鼠標指針懸停時。 不要擔心，隨著您對CSS的經(jīng)驗越來越豐富，我們將在下一篇文章選擇器中詳細解釋選擇器。

元素可以由幾個選擇器匹配，因此幾個規(guī)則可以多次設(shè)置給定屬性。 CSS定義哪個優(yōu)先于其他優(yōu)先級，必須應(yīng)用:這被稱為級聯(lián)算法，您將在 ">級聯(lián)和繼承。

重要:如果鏈或組中的單個基本選擇器無效，例如使用未知偽元素或偽類時，整個選擇器組無效， 因此整個規(guī)則是無效的，因此被忽略。

Active learning: Spot the group of selectors

在我們的示例中，您是否能夠識別將應(yīng)用于兩個不同選擇器的規(guī)則？

CSS語句

CSS規(guī)則是樣式表的主要構(gòu)建塊 - 您將在CSS中看到的最常見的塊。 但是還有其他類型的塊，你會偶爾遇到 - CSS規(guī)則是一種所謂的CSS語句。 其他類型如下:

  • At-rules are used in CSS to convey metadata, conditional information, or other descriptive information. They start with an at sign (@), followed by an identifier to say what kind of rule it is, then a syntax block of some kind, ending with a semi-colon (;). Each type of at-rule, defined by the identifier, will have its own internal syntax and semantics. Examples include: Specific? syntax example: 
    @import 'custom.css';
    This at-rule imports another CSS file into the current CSS.
  • Nested statements are a specific subset of at-rule, the syntax of which is a nested block of CSS rules that will only be applied to the document if a specific condition is matched:
    • The @media at-rule content is applied only if the device which runs the browser matches the expressed condition;
    • the @supports at-rule content is applied only if the browser actually supports the tested feature;
    • the @document at-rule content is applied only if the current page matches some conditions.
    Specific syntax example 
    @media (min-width: 801px) {
  body {
    margin: 0 auto;
    width: 800px;
  }
}
    The above nested statement only applies the nested rule when the page's width exceeds 800 pixels.

您將在課程中的適當位置了解有關(guān)某些類型的規(guī)則/嵌套語句的更多信息。

重要:任何不是規(guī)則集，規(guī)則或嵌套語句的語句都是無效的，因此會被忽略。

超越語法:使CSS可讀

正如你所看到的，CSS語法不難寫:你寫了一些規(guī)則，如果你寫錯了，它們將被忽略。 然而，即使這是有效的，有一些最佳實踐值得知道，使您的CSS代碼更容易使用和維護。

空白空間

空白表示實際空格，制表符和新行。 您可以添加空格以使您的樣式表更易讀。

以與HTML相同的方式，瀏覽器傾向于忽略CSS中的大部分空格; 很多空白只是在幫助可讀性。 在我們的第一個例子中，我們有每個聲明(和規(guī)則的開始/結(jié)束)在自己的線上 - 這可以說是一個很好的方式來編寫CSS，因為它使維護和理解容易:

body {
  font : 1em/150% Helvetica, Arial, sans-serif;
  padding : 1em;
  margin : 0 auto;
  max-width : 33em;
}

@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

div p, #id:first-line {
  background-color: red;
  background-style: none
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

你可以編寫完全相同的CSS像這樣，大部分的空白被刪除 - 這在功能上與第一個例子相同，但我相信你會同意，它有點難以閱讀:

body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) { body {font-size: 130%;} }

h1 {font-size: 1.5em;}

div p, #id:first-line {background-color: red; background-style: none}
div p {margin: 0; padding: 1em;}
div p + p {padding-top: 0;}

你選擇的代碼布局通常是個人偏好，雖然當你開始在團隊中工作時，你可能會發(fā)現(xiàn)現(xiàn)有的團隊有自己的風格指南，指定一個約定遵守。

你需要在CSS中小心的空格是屬性及其值的空格。 例如，以下是有效的CSS:

margin: 0 auto;
padding-left: 10px;

但以下是無效的:

margin: 0auto;
padding- left: 10px;

因為 0auto 未被識別為margin屬性的有效值( 0 和 auto 是兩個單獨的值)，并且瀏覽器無法識別 padding - 作為有效屬性。 因此，你應(yīng)該總是確保通過至少一個空格將不同的值彼此分開，但是將屬性名/值保持在一起作為一個不間斷的字符串。

注釋

與HTML一樣，我們鼓勵您在CSS中進行評論，幫助您了解代碼在幾個月后回來的工作原理，并幫助其他人理解它。 注釋對于臨時注釋掉代碼的某些部分以用于測試也是有用的，例如，如果您試圖找到代碼的哪一部分導致錯誤。

CSS中的注釋以 / * 開頭，以 * / 結(jié)尾。

/* Handle basic element styling */
/* -------------------------------------------------------------------------------------------- */
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) {
  /* Let's special case the global font size. On large screen or window,
     we increase the font size for better readability */
  body {font-size: 130%;}
}

h1 {font-size: 1.5em;}

/* Handle specific elements nested in the DOM  */
/* -------------------------------------------------------------------------------------------- */
div p, #id:first-line {background-color: red; background-style: none}
div p                 {margin          :   0; padding         : 1em;}
div p + p             {padding-top     :   0;                       }

速記

font ， / background"> 背景 ， padding ， a href ="/ zh-CN / docs / Web / CSS / border"> border 和 > margin 稱為速記屬性 - 這是因為它們允許您在一行中設(shè)置多個屬性值，從而節(jié)省時間， 處理。

例如，此行:

/* in shorthand like padding and margin, the values are applied
   in the order top, right, bottom, left. There are also other 
   shorthand types, for example two values, which set for example
   the padding for top/bottom, then left/right */
padding: 10px 15px 15px 5px;

這是同樣的事情，所有這些:

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

而這行:

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

做同樣的事情，所有這些:

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;

我們不會嘗試詳盡地教這些內(nèi)容 - 您會在課程中遇到很多示例，建議您在我們的 / zh-CN / docs / Web / CSS / Reference"> CSS參考以了解更多。

下一步是什么

在這一點上，您現(xiàn)在應(yīng)該理解編寫易于隨時間維護的工作樣式表所需的CSS語法的基本原理。 在下一篇文章中，我們將深入探討 CSS選擇器，查看可用的不同和它們的工作原理。

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號