閱讀(1.7k) 書簽贊(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ǔ)知識(了解 HTML簡介)。
目的:	要了解CSS是什么，以及它是如何工作的基本水平。

什么是 CSS?

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

一個(gè)網(wǎng)頁文檔通常是用標(biāo)記語言結(jié)構(gòu)化的文本文件?— HTML 是最常用的標(biāo)記語言, 但你依然可以遇見一些其他的標(biāo)記語言，比如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è)計(jì)成例如在計(jì)算機(jī)屏幕，投影儀或打印機(jī)上可視地呈現(xiàn)文檔。

CSS如何影響HTML？?

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

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

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

一個(gè)基礎(chǔ)CSS示例

上面的描述可能意義不明確，所以讓我們通過提出一個(gè)快速示例來確保清楚描述的。首先，我們使用一個(gè)簡單的HTML文檔，包含一個(gè) <h1> 元素和一個(gè)?<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)在讓我們看一個(gè)非常簡單的CSS示例，其中包含兩個(gè)規(guī)則:

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

p {
  color: red;
}

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

第一個(gè)聲明設(shè)置文本的顏色是藍(lán)色；
第二個(gè)聲明將背景顏色設(shè)置為黃色；
第三個(gè)聲明在標(biāo)題周圍放置一個(gè)1像素寬的邊框，實(shí)線(不是虛線、點(diǎn)線等)，邊框顏色是黑色。

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

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

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

主動學(xué)習(xí):編寫第一個(gè)CSS

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

如果寫錯(cuò)了，你可以隨時(shí)點(diǎn)擊 "重置"?按鈕重置。如果你真的不知道怎么寫，點(diǎn)擊顯示結(jié)果按鈕看到一個(gè)可行的回答。

Playable code

<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Input</h2>
  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><h1>Hello World!</h1>

<p>This is a paragraph.</p>

<ul>
  <li>This is</li>
  <li>A list</li>
</ul></textarea>

  <h2>CSS Input</h2>
  <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">h1 {

}

p {

}

li {

}</textarea>

  <h2>Output</h2>
  <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div>
  <div class="controls">
?   <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
    <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;">
  </div>
</div>

var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

var styleElem = document.createElement('style');
var headElem = document.querySelector('head');
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", function() {
? htmlInput.value = htmlCode;
? cssInput.value = cssCode;
? drawOutput();
});

solution.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = 'h1 {\n  color: blue;\n  background-color: yellow;\n  border: 1px solid black;\n}\n\np {\n  color: red;\n}\n\nli {\n  text-shadow: 2px 2px 3px purple;\n}';
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

1191549"height ="800"class ="live-sample-frame sample-code-frame">

CSS實(shí)際上如何工作？

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

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

關(guān)于 DOM

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

了解DOM有助于您設(shè)計(jì)，調(diào)試和維護(hù)CSS，因?yàn)镈OM是您的CSS和文檔的內(nèi)容滿足。

DOM表示

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

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

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

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

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

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

= 1191549"height ="55"class ="live-sample-frame sample-code-frame">

p {margin:0;}

應(yīng)用 CSS 到 DOM

假設(shè)我們在文檔中添加了一些CSS，以便對其進(jìn)行風(fēng)格化。同樣，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)建一個(gè)DOM，然后解析CSS。由于CSS中唯一可用的規(guī)則有一個(gè) span 選擇器，它將應(yīng)用該規(guī)則到三個(gè)跨度中的每一個(gè)。更新的輸出如下:

= 1191549"height ="55"class ="live-sample-frame sample-code-frame">

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

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

外部樣式表

你已經(jīng)在這篇文章看到了外部樣式表，但是并不知道它的名字。外部樣式表是你的CSS寫在一個(gè)單獨(dú)的擴(kuò)展名為.css的文件中，并從HTML <link> 元素中引用它，此時(shí)?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;
}

這種方法是最好的，因?yàn)槟憧梢允褂靡粋€(gè)樣式表來設(shè)置多個(gè)文檔的樣式，并且更新的時(shí)候只需要在一個(gè)地方更新CSS。

內(nèi)部樣式表

內(nèi)部樣式表是指不使用外部 CSS 文件，而是將你的 CSS 放置在包含在 HTML head?內(nèi)的 <style>?元素中。此時(shí)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>

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

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

內(nèi)聯(lián)樣式是僅影響一個(gè)元素的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>

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

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

下一步

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

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

← CSS 介紹

CSS 語法 →

寫筆記

我要補(bǔ)充