閱讀(1.9k) 書簽贊(0) 我要糾錯(cuò)

CSS 語法

2018-05-15 17:26 更新

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

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

一串詞匯

在最基本的層面上，CSS包含兩個(gè)構(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ī)則)。

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

<!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;
}

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

讓我們更詳細(xì)地看一下語法。

CSS聲明

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

alt ="">

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

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

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

Active learning: Spot the declarations

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

CSS聲明塊

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

聲明塊中包含的每個(gè)聲明必須用分號(; )分隔，否則代碼將無法工作(或至少會給出意外的結(jié)果)。 )塊的最后一個(gè)聲明不需要以分號結(jié)尾，雖然它通常被認(rèn)為是好的樣式，因?yàn)樗柚沽嗽谟昧硪粋€(gè)擴(kuò)展塊時(shí)忘記添加它宣言。

"。 alt ="">

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

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

Active learning: Where are the declaration blocks?

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

CSS規(guī)則

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

alt ="">

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

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

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

Active learning: Spot the group of selectors

在我們的示例中，您是否能夠識別將應(yīng)用于兩個(gè)不同選擇器的規(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:
- @charset and @import (metadata)
- @media or @document (conditional information, also called nested statements, see below.)
- @font-face (descriptive information)
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.

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

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

超越語法:使CSS可讀

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

空白空間

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

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

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像這樣，大部分的空白被刪除 - 這在功能上與第一個(gè)例子相同，但我相信你會同意，它有點(diǎn)難以閱讀:

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;}

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

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

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

但以下是無效的:

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

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

注釋

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

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 稱為速記屬性 - 這是因?yàn)樗鼈冊试S您在一行中設(shè)置多個(gè)屬性值，從而節(jié)省時(shí)間，處理。

例如，此行:

/* 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參考以了解更多。

下一步是什么

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

以上內(nèi)容是否對您有幫助：

← CSS如何工作

Fundamental CSS comprehension →

寫筆記

我要補(bǔ)充