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?

CSS是一種用于指定如何向用戶呈現(xiàn)文檔的語言 —如何指定他們的風格,布局 etc.

一個網(wǎng)頁文檔通常是用標記語言結(jié)構(gòu)化的文本文件?— HTML 是最常用的標記語言, 但你依然可以遇見一些其他的標記語言,比如SVG或者XML|?SVG or XML.

向用戶呈現(xiàn)文檔意味著將文檔轉(zhuǎn)換為適合受眾群體的可用表單。 瀏覽器,例如 .org / zh-CN / docs / Glossary / Mozilla_Firefox"class ="glossaryLink"> Firefox class ="glossaryLink"> Chrome Internet Explorer , 被設(shè)計成例如在計算機屏幕,投影儀或打印機上可視地呈現(xiàn)文檔。

CSS如何影響HTML??

Web瀏覽器將CSS規(guī)則應(yīng)用于文檔以影響它們的顯示方式。 CSS規(guī)則由以下形成:

  • 一組?屬性 的集合,它的內(nèi)容表示?HTML 的內(nèi)容如何呈現(xiàn)。比如,我想讓元素的寬度是其父元素的50%,元素背景是紅色。
  • 一個 選擇器,它選擇了要應(yīng)用這些屬性值的元素。比如,我想要應(yīng)用我的CSS規(guī)則到HTML文檔中的所有段落。

樣式表中包含的一組CSS規(guī)則確定了網(wǎng)頁的外觀,你將在下一篇文章中了解更多關(guān)于CSS語法的內(nèi)容?— CSS Syntax.

一個基礎(chǔ)CSS示例

上面的描述可能意義不明確,所以讓我們通過提出一個快速示例來確保清楚描述的。首先,我們使用一個簡單的HTML文檔,包含一個 <h1> 元素和一個?<p> 元素((注意到,使用 <link> 元素將樣式表應(yīng)用到 HTML):

<!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>
  </body>
</html>

現(xiàn)在讓我們看一個非常簡單的CSS示例,其中包含兩個規(guī)則:

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

p {
  color: red;
}

第一條規(guī)則使用?h1?選擇器開始,這意味著它將其屬性值應(yīng)用到?<h1> 元素,它包含三個屬性及其值(每個屬性/值對稱為聲明):

  1. 第一個聲明設(shè)置文本的顏色是藍色;
  2. 第二個聲明將背景顏色設(shè)置為黃色;
  3. 第三個聲明在標題周圍放置一個1像素寬的邊框,實線(不是虛線、點線等),邊框顏色是黑色。

第二個規(guī)則從 p 選擇器開始,這意味著規(guī)則僅僅對?<p> 元素生效。它包含一條設(shè)置字體顏色為紅色的聲明。

在Web瀏覽器中,上面的代碼將產(chǎn)生以下輸出:

這不怎么好看,但是說明了?CSS 是如何工作的。

主動學習:編寫第一個CSS

現(xiàn)在我們給你一個機會來編寫自己的一點CSS。你可以使用下面的實時可編輯示例的輸入?yún)^(qū)域,有一些簡單的HTML元素和一些CSS屬性,用類似于上面看到的方式,試著添加一些簡單的樣式聲明到你的CSS,來定義?HTML 的樣式。

如果寫錯了,你可以隨時點擊 "重置"?按鈕重置。如果你真的不知道怎么寫,點擊顯示結(jié)果按鈕看到一個可行的回答。

CSS實際上如何工作?

當瀏覽器顯示文檔時,它將文檔的內(nèi)容與其樣式信息組合。它分兩個階段處理文檔:

  1. 瀏覽器轉(zhuǎn)化 HTMLCSS 成?DOM (文檔對象模型). DOM表示計算機內(nèi)存中的文檔。它把文檔的樣式和內(nèi)容融合在一起。
  2. 瀏覽器展現(xiàn) DOM 的內(nèi)容。

關(guān)于 DOM

DOM具有樹狀結(jié)構(gòu)。 標記語言中的每個元素,屬性和文字都將成為 DOM節(jié)點 / a>。 節(jié)點由它們與其他DOM節(jié)點的關(guān)系定義。 一些元素是子節(jié)點的父節(jié)點,子節(jié)點具有兄弟節(jié)點。

了解DOM有助于您設(shè)計,調(diào)試和維護CSS,因為DOM是您的CSS和文檔的內(nèi)容滿足。

DOM表示

而不是一個漫長而無聊的解釋,讓我們舉一個例子來看看DOM和CSS如何一起工作。

讓我們假設(shè)下面的HTML代碼:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

在DOM中,與我們的< p> 元素相對應(yīng)的節(jié)點是父節(jié)點。 它的孩子是一個文本節(jié)點和對應(yīng)于我們的< span> 元素的節(jié)點。 SPAN 節(jié)點也是父節(jié)點,文本節(jié)點作為子節(jié)點:

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"

這是瀏覽器如何解釋先前的HTML片段 - 渲染上面的DOM樹,然后在瀏覽器中輸出它:

應(yīng)用 CSS 到 DOM

假設(shè)我們在文檔中添加了一些CSS,以便對其進行風格化。 同樣,HTML如下:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

如果我們應(yīng)用以下CSS:

span {
  border: 1px solid black;
  background-color: lime;
}

瀏覽器將解析HTML并從中創(chuàng)建一個DOM,然后解析CSS。 由于CSS中唯一可用的規(guī)則有一個 span 選擇器,它將應(yīng)用該規(guī)則到三個跨度中的每一個。 更新的輸出如下:

如何將CSS應(yīng)用到HTML

有三種不同的方式將CSS應(yīng)用于HTML文檔,有的方式比其他方式更有用。在這里,我們將簡要回顧一下每一種方式:

外部樣式表

你已經(jīng)在這篇文章看到了外部樣式表,但是并不知道它的名字。外部樣式表是你的CSS寫在一個單獨的擴展名為.css的文件中,并從HTML <link> 元素中引用它,此時?HTML 文件看起來像這樣:

<!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>
  </body>
</html>

增加以下 CSS?文件

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

p {
  color: red;
}

這種方法是最好的,因為你可以使用一個樣式表來設(shè)置多個文檔的樣式,并且更新的時候只需要在一個地方更新CSS。

內(nèi)部樣式表

內(nèi)部樣式表是指不使用外部 CSS 文件,而是將你的 CSS 放置在包含在 HTML head?內(nèi)的 <style>?元素中。此時HTML看起來像這樣:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

這在某些情況下很有用(也許你正在使用一個內(nèi)容管理系統(tǒng),不能直接修改CSS文件),但它不如外部樣式表高效,在網(wǎng)站中,CSS將需要在每個頁面重復,并且更新的時候需要更改的多個頁面。

內(nèi)聯(lián)樣式

內(nèi)聯(lián)樣式是僅影響一個元素的CSS聲明,被 style 屬性包括著:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

在非必要的情況下不要這么做,這樣很難維護(你可能在每個文檔的多個地方需要更新多次同樣的信息),并且它將 CSS 的樣式和 HTML 結(jié)構(gòu)混合在一起,使CSS難以閱讀和理解。保持不同類型的代碼分離和純凈使得開發(fā)和維護代碼更為容易。

您唯一使用內(nèi)聯(lián)樣式是當您的工作環(huán)境是受限制性的(也許您的CMS只允許您編輯HTML主體)。

下一步

到了這里你應(yīng)該理解了 CSS 的基本工作原理和你的瀏覽器如何處理 CSS。接下來你將會學習 CSS 語法 (CSS syntax).

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

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號