前言

現(xiàn)在我們來(lái)學(xué)習(xí)一些基礎(chǔ)的 HTML/ CSS 知識(shí)。希望閱讀完這篇文章能達(dá)到編寫(xiě)簡(jiǎn)單頁(yè)面的程度。

目錄：

1. HTML/ CSS 的發(fā)明；
2. HTML 基礎(chǔ)；
3. CSS 基礎(chǔ)；
4. 頁(yè)面是如何渲染的；

Part 1. HTML/ CSS 的發(fā)明

1989 年 3 月，互聯(lián)網(wǎng)還只屬于少數(shù)人。

同年，蒂姆·伯納斯·李（Tim Berners-Lee）提出了一種能讓遠(yuǎn)隔兩地的研究者們共享知識(shí)的設(shè)想。

這一想法的實(shí)踐促使了萬(wàn)維網(wǎng)的誕生。它基于現(xiàn)有的 TCP/IP 協(xié)議構(gòu)建，包括 4 個(gè)部分：

• 一種表示超文本文檔的文本格式，即超文本標(biāo)記語(yǔ)言（HTML）；
• 一種用于交換這些文檔的簡(jiǎn)單協(xié)議，即 HyperText 傳輸協(xié)議（HTTP）；
• 一個(gè)客戶端可以顯示這些文檔，第一個(gè) Web 瀏覽器稱(chēng)為 WorldWideWeb。
• 一個(gè)可以訪問(wèn)文檔的服務(wù)器；

這四部分在 1990 年底完成。雖然此時(shí) Web 頁(yè)面只能顯示單純的文本內(nèi)容，瀏覽器也只能顯示呆板的文字信息，不過(guò)這已經(jīng)基本滿足了建立 Web 站點(diǎn)的初衷，實(shí)現(xiàn)了信息資源共享。

從 HTML 被發(fā)明開(kāi)始，樣式就以各種形式存在。不同的瀏覽器結(jié)合它們各自的樣式語(yǔ)言為用戶提供頁(yè)面效果的控制。

隨著 HTML 的成長(zhǎng)，為了滿足頁(yè)面設(shè)計(jì)者的要求，HTML 添加了很多顯示功能。但是隨著這些功能的增加，HTML 變的越來(lái)越雜亂，而且 HTML 頁(yè)面也越來(lái)越臃腫。于是 CSS 便誕生了。

1995 年 www 網(wǎng)絡(luò)會(huì)議上 CSS 被提出。同年，W3C 組織成立，層疊樣式表的開(kāi)發(fā)就此走上正軌。

HTML 負(fù)責(zé)網(wǎng)頁(yè)內(nèi)容，CSS 負(fù)責(zé)內(nèi)容的基本樣式。

Part 2. HTML 基礎(chǔ)

什么是 HTML

HTML 是 Hper Text Markup Language 的簡(jiǎn)稱(chēng)，即超文本標(biāo)記語(yǔ)言。它就像我們熟知的 Word 一樣，只不過(guò)它適用于 Web。

HTML 同 Word 一樣提供了標(biāo)題、段落、列表、表格、圖像、粗體、斜體等文本來(lái)構(gòu)建文檔。關(guān)鍵區(qū)別在于 Word 中的格式文本是可視的，而 HTML 代碼純粹是語(yǔ)義的。

HTML 基礎(chǔ)

像任何語(yǔ)言一樣，HTML 帶有一組規(guī)則。這些規(guī)則相對(duì)簡(jiǎn)單，就是要界定界限——知道從哪里開(kāi)始，從哪里結(jié)束。

例如，HTML 表示的段落將被寫(xiě)為：

說(shuō)明：

• 一對(duì)尖括號(hào) （</ >）中間的就是 HTML 標(biāo)簽。
• 不同的標(biāo)簽有不同的含義。這里的 p 代表了一個(gè)段落的意思；
• HTML 標(biāo)簽通常成對(duì)出現(xiàn)，開(kāi)始標(biāo)簽（opening tag）<p>定義了段落的開(kāi)始，結(jié)束標(biāo)簽（closing tag）</p>定義了結(jié)束；
• 開(kāi)始和結(jié)束標(biāo)簽之間唯一的區(qū)別就是標(biāo)簽名稱(chēng)前的斜杠 /；
• 當(dāng)您把開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽以及兩者之間所有內(nèi)容組合在一起時(shí)，就獲得了一個(gè) HTML 元素；
• 標(biāo)簽（尖括號(hào)內(nèi)的內(nèi)容都）不會(huì)被顯示，僅僅用于區(qū)分內(nèi)容的語(yǔ)義并提供一些默認(rèn)的樣式；

在哪里寫(xiě) HTML？

就像我們熟知的 .txt 文本文件一樣， HTML 文檔（后綴為 .html）也可以使用任意文本編輯器打開(kāi)。

打開(kāi)您的任一文本編輯器，然后復(fù)制并粘貼以下內(nèi)容：

<p>這是我的第一個(gè)網(wǎng)頁(yè)</p>

將文件另存為 my-first-webpage.html ，然后使用瀏覽器將其打開(kāi)，您就會(huì)看到：

但實(shí)際上，我們一般會(huì)選擇更加專(zhuān)業(yè)的軟件：

屬性

屬性就像綁定到 HTML 元素的額外信息一樣。它們寫(xiě)在 HTML 標(biāo)簽內(nèi)，所以，瀏覽器也不會(huì)顯示它們。

例如，href 屬性就是用來(lái)定義 a 標(biāo)簽跳轉(zhuǎn)目標(biāo)鏈接的屬性：

<a href="https://www.wmyskxz.com/">點(diǎn)擊會(huì)跳轉(zhuǎn)到我的主頁(yè)</a>

有 16 個(gè) HTML 屬性可用于任何 HTML 元素，所有這些都是可選的。

我們最常用的就是 class 屬性（用于 CSS）。

一些 HTML 元素具有強(qiáng)制屬性。例如，插入圖片時(shí)，必須使用 src （source）屬性來(lái)提供圖像的位置：

<img src="#" alt="Description of the image">

考慮到 <img> 標(biāo)簽的意義，強(qiáng)制性的要求設(shè)置顯示圖像的路徑，是有意義的。

注釋

如果你有一些不想顯示但是又想提醒代碼閱讀者的一些事情，通?？梢蕴砑幼⑨?。

HTML 注釋以 <!-- 開(kāi)始，以 --> 結(jié)束。如下所示：

<!-- This is an HTML comment -->
<!-- This is a multi-line HTML comment 
     that spans across more than one line -->
<p>This is a normal piece of text.</p>

您還可以注釋掉部分 HTML 代碼來(lái)進(jìn)行調(diào)試，如下所示：

<!-- Hiding this image for testing
<img src="images/smiley.png" alt="Smiley">
-->

自封閉元素

一些 HTML 元素只有一個(gè)開(kāi)始標(biāo)簽：

<br> <!-- 換行標(biāo)簽 -->
<img src="#" alt="Description"> <!-- 圖像標(biāo)簽 -->
<input type="text"> <!-- 文字輸入標(biāo)簽 -->

因?yàn)樗鼈儧](méi)有結(jié)束標(biāo)簽，因此內(nèi)部不能包含任何內(nèi)容。所以自封閉元素通常帶有一些屬性，以便為它們提供附加信息。

HTML 塊和內(nèi)聯(lián)

在 HTML 中，您主要會(huì)遇到兩種類(lèi)型的 HTML 元素：

塊元素用于通過(guò)將內(nèi)容劃分為連貫的塊來(lái)構(gòu)造頁(yè)面的主要部分。

<p>這是第一段內(nèi)容</p>
<p>這是第二段內(nèi)容</p>

內(nèi)聯(lián)元素旨在區(qū)分文本的一部分，以賦予其特定的功能或含義。內(nèi)聯(lián)元素通常包含一個(gè)或幾個(gè)單詞。

<p>如果感興趣，可以點(diǎn)擊<a href="https://www.wmyskxz.com">這里</a>來(lái)訪問(wèn)我的主頁(yè)</p>

開(kāi)始和結(jié)束標(biāo)簽

所有塊級(jí)元素都有一個(gè)開(kāi)始和結(jié)束標(biāo)簽。

所以，自封閉元素都是內(nèi)聯(lián)元素，僅僅是因?yàn)樗鼈兊恼Z(yǔ)法不允許它們包含任何其他 HTML 元素。

HTML 層次結(jié)構(gòu)

HTML 文檔就像一棵大的家族樹(shù)，上面有父母、兄弟姐妹、孩子、祖先和后代等。

這源于 HTML 元素具有相互嵌套的功能。

嵌套

讓我們編寫(xiě)一個(gè)簡(jiǎn)單的段落，并通過(guò)插入兩個(gè)內(nèi)聯(lián)元素來(lái)區(qū)分文本各個(gè)部分來(lái)對(duì)其進(jìn)行增強(qiáng)：

<p>
  <strong>培根</strong>曾經(jīng)說(shuō)過(guò)：<q>合理安排時(shí)間，就等于節(jié)約時(shí)間</q>。
</p>

結(jié)果：

其中：

• <strong> 對(duì)「培根」這一個(gè)詞語(yǔ)進(jìn)行了強(qiáng)調(diào)；
• <q> 對(duì)「合理安排時(shí)間，就等于節(jié)約時(shí)間」這句話加上了引號(hào)；

使用 <strong> 會(huì)加粗標(biāo)簽內(nèi)的內(nèi)容，這只是瀏覽器的默認(rèn)行為。請(qǐng)注意：您必須根據(jù) HTML 元素的含義而非其外觀來(lái)選擇 HTML 元素。

這種情況下：

• <p> 是 <strong> 和 <q> 標(biāo)簽的父元素；
• <strong> 和 <q> 同為 <p> 元素的子元素；
• <strong> 和 <q> 是同級(jí)元素；

順序

如何嵌套 HTML 文檔取決于打開(kāi)和關(guān)閉標(biāo)簽的位置。

由于 HTML 元素包含打開(kāi)和關(guān)閉標(biāo)簽，以及介于兩個(gè)標(biāo)簽之間的內(nèi)容，一個(gè)子元素的關(guān)閉必須結(jié)束于父元素之前。

<!-- This is INVALID code! :-( -->
<p>
  This HTML code won't work because I the "strong" tag is opened here <strong>but is only closed after the paragraph.
</p></strong>

上述代碼是不合法的，因?yàn)?<strong> 標(biāo)簽打開(kāi)在 <p> 標(biāo)簽之后（因此 <strong> 被認(rèn)為是 <p> 的子元素），所以 <strong> 必須在 <p> 元素關(guān)閉之前關(guān)閉。

<!-- This is valid code. :-) -->
<p>
  This HTML code will work because I the "strong" tag is opened <strong>and closed</strong> properly.
</p>

深度

由于子元素本身可以包含其他子元素，所以可以在 HTML 文檔中編寫(xiě)更深的層次結(jié)構(gòu)。

例如，我們可以編寫(xiě)一段：

<article>
  <h1>題圖故事：光努力是沒(méi)有用的</h1>
  <p>
    漫畫(huà)家蔡志忠有一個(gè)演講，題目叫做<a href="https://www.yuque.com/book-academy/share/shp7tu">《努力是沒(méi)有用的》</a>。讀完這份演講稿，我覺(jué)得他說(shuō)的有道理。
  </p>
  <p>
    有些人非常勤奮，別人休息和娛樂(lè)的時(shí)候，都在工作學(xué)習(xí)。但是努力了一輩子，人生也沒(méi)有顯著的提升，就像報(bào)道里經(jīng)常說(shuō)的：<q>某某在平凡的崗位上，勤勤懇懇工作了一輩子</q>。
  </p>
  <p>
    另一方面，很多成功者似乎也沒(méi)有特別努力，就取得了許多成就，過(guò)上了好日子。蔡志忠以自己為例，他從小就喜歡畫(huà)畫(huà)，然后一直畫(huà)，不知不覺(jué)就成了大漫畫(huà)家，名利雙收，從沒(méi)有覺(jué)得過(guò)得很辛苦。
  </p>
</article>

結(jié)果：

在這種情況下，該 HTML 文檔的家族樹(shù)看起來(lái)會(huì)是這樣：

<h1> 和三個(gè) <p> 是兄弟姐妹；每個(gè) <p> 的父親都是 <article>；每個(gè)元素（除開(kāi) <article>）都是 <article> 的后代；

塊元素和內(nèi)聯(lián)元素嵌套

塊元素可以包含塊元素或內(nèi)聯(lián)元素。

但是，內(nèi)聯(lián)元素只能包含其他內(nèi)聯(lián)元素。（<a> 標(biāo)簽除外）

<!-- This is INVALID code! :-( -->
<strong>
  <p>You can't put a paragraph inside a "strong" tag.
</strong>

但是要記住元素的家族樹(shù)。這種層次結(jié)構(gòu)在 CSS 中很有用。

HTML 是語(yǔ)義的

HTML 標(biāo)記的目的是向文檔傳遞含義。所以不必?fù)?dān)心網(wǎng)頁(yè)的外觀，應(yīng)該關(guān)心每個(gè)標(biāo)簽的含義。

選擇合適匹配的元素

根據(jù)要編寫(xiě)的內(nèi)容，可以選擇與文本含義相匹配的適當(dāng)元素。

不要過(guò)分考慮語(yǔ)義

大約有 100 個(gè)語(yǔ)義 HTML 元素可供選擇。遍歷該列表并為您的內(nèi)容選擇適當(dāng)?shù)?/strong>元素可能會(huì)讓人不知所措。

但是不要花太多時(shí)間擔(dān)心這一點(diǎn)?；旧夏苡煤?strong style="color: rgb(191, 54, 12);">上面的標(biāo)簽就足夠好了。

一個(gè)有效的 HTML 文檔

HTML 文檔需要特定的結(jié)構(gòu)才能生效。

文檔類(lèi)型

提供的第一個(gè)信息就是我們正在編寫(xiě)的 HTML 文檔的類(lèi)型：Doctype。

曾經(jīng)有很多 HTML 版本共存。如今，HTML 5 已經(jīng)成為規(guī)范。

所以，我們要告訴瀏覽器這個(gè) HTML 文檔是 HTML 5 的版本，只需要在最開(kāi)始寫(xiě)上：

<!DOCTYPE html>

注意：HTML 是大小寫(xiě)不敏感的。這意味著你只需要單詞拼寫(xiě)對(duì)就可以了——但仍需要保持規(guī)范。

“

HTML 5 文檔類(lèi)型沒(méi)有提到數(shù)字 “5” 的原因是：W3C 認(rèn)為以前的文檔類(lèi)型定義太混亂了，借機(jī)吧任何 HTML 版本的信息都給簡(jiǎn)化掉了。

<html>  元素

除了 doctype 外，所有 HTML 文檔都必須包裝在一個(gè) <html> 元素內(nèi)：

<!DOCTYPE html>
<html>
  <!-- The rest of your HTML code is here -->
</html>

<head>

<head> 標(biāo)簽相當(dāng)于整個(gè)頁(yè)面（<html> 包裹的內(nèi)容）的屬性。為整個(gè)頁(yè)面提供了附加的額外信息，并且不會(huì)顯示。

例如，文檔的標(biāo)題就包含在 <head> 標(biāo)簽內(nèi)：

<!DOCTYPE html>
<html>
  <head>
    <title>網(wǎng)頁(yè)標(biāo)題</title>
  </head>
</html>

<body>

<body> 使我們編寫(xiě)所有網(wǎng)頁(yè)內(nèi)容的地方。里面的所有內(nèi)容都會(huì)顯示在瀏覽器窗口中。

完整的有效 HTML 文檔

綜合所有這些要求，我們可以編寫(xiě)一個(gè)簡(jiǎn)單有效的 HTML 文檔：

<!DOCTYPE html>
<html>
  <head>
    <title>Java3y</title>
  </head>
  <body>
    <p>歡迎關(guān)注公眾號(hào)：Java3y</p>
  </body>
</html>

瀏覽器視角：

Part 3. CSS 基礎(chǔ)

為什么存在 CSS？

隨著 90 年代網(wǎng)絡(luò)的普及，將特定設(shè)計(jì)應(yīng)用于網(wǎng)站的意圖也隨之增強(qiáng)。Web 開(kāi)發(fā)人員依靠特定的 HTML 標(biāo)簽來(lái)增強(qiáng)網(wǎng)頁(yè)顯示：

• <basefont> 為整個(gè) HTML 文檔定義了一種字體
• <font> 為它包含的文本定義字體，顏色和大小
• <center> 將所有內(nèi)容水平居中
• <big> 增加文字大小
• <strike> 帶有刪除線的渲染文本

也可以使用幾個(gè) HTML 屬性：

• bgcolor 在元素上定義背景色
• text 定義文字顏色
• 幾個(gè)margin屬性可用于在元素的任何一側(cè)添加間隔的空間

但最重要的是，為了創(chuàng)建視覺(jué)上對(duì)齊（通常是彼此定位）的元素，Web 開(kāi)發(fā)人員通常會(huì)使用 <table> 來(lái)設(shè)計(jì)網(wǎng)頁(yè)，因?yàn)樗匀坏靥峁┝艘曈X(jué)網(wǎng)格：

但這種方法很麻煩，原因如下：

• HTML <table> 定義是冗長(zhǎng)的：它們需要很多樣板代碼
• 標(biāo)簽在語(yǔ)義上是錯(cuò)誤的：<table> 應(yīng)該用于多維數(shù)據(jù)
• 更改布局需要更改標(biāo)簽：如果我們想將左列移動(dòng)到右側(cè)，則必須修改 HTML 結(jié)構(gòu)
• 容易出現(xiàn)語(yǔ)法錯(cuò)誤：行和單元格需要按特定順序進(jìn)行排序和嵌套才能有效
• 標(biāo)簽不可讀：表格之間相互嵌套

這就是為什么逐漸放棄使用表進(jìn)行布局的原因，而改用 CSS 的原因。

什么是 CSS?

CSS 是 Cascading Style Sheets 的縮寫(xiě)，即層疊樣式表。其目的是為標(biāo)記語(yǔ)言（如 HTML 或 XML）設(shè)置樣式。因此，CSS 本身一文不值，除非與 HTML 文檔相關(guān)聯(lián)。

CSS 通過(guò)設(shè)置字體、顏色，定義邊距、定位元素、動(dòng)畫(huà)交互等等，使 HTML 文檔栩栩如生。

CSS 是如何工作的?

CSS 的工作方式是選擇一個(gè) HTML 元素（如一個(gè)段落），選擇一個(gè)要更改的屬性（如顏色），并應(yīng)用一個(gè)特定的值（如紅色）：

p {color: red;}

“

"樣式" 一詞可能具有欺騙性。CSS 不僅僅可以用于修改文本的顏色、大小、字體等，還可以用來(lái)定義高度、寬度、內(nèi)部和外部的邊距、位置等。

我在哪里寫(xiě) CSS？

CSS 作為標(biāo)簽屬性

您可以使用 style 屬性直接在 HTML 元素上編寫(xiě) CSS：

<p style="color: red;">This paragraph will be red.</p>

結(jié)果：

<head> 中的 CSS

您也可以在 <head> 中使用 <style> 標(biāo)簽來(lái)使用 CSS：

<html>
  <head>
    <title>Hello World</title>
    <style type="text/css">
      p{ color: red;}
    </style>
  </head>
  <body>
    <p>This paragraph will be red.</p>
  </body>
</html>

結(jié)果：

CSS 在單獨(dú)的文件中

您也可以把 CSS 編寫(xiě)為帶有 .css 擴(kuò)展名的單獨(dú)文件，然后使用 <link> 標(biāo)簽來(lái)將其鏈接到 HTML 中：

p{ color: red;}

<html>
  <head>
    <title>Hello World</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <p>This paragraph will be red.</p>
  </body>
</html>

目錄結(jié)構(gòu)：
Desktop
	├── style.css
	├── my-first-webpage.html

結(jié)果：

這種單獨(dú)使用一個(gè) CSS 文件的方法是優(yōu)選的。

為什么不直接在 HTML 中設(shè)置樣式？

因?yàn)槲覀円?strong style="color: rgb(191, 54, 12);">內(nèi)容和其表示形式分開(kāi)。這樣做的好處顯而易見(jiàn)。

首先是可閱讀性變高了，有哪些元素，以及元素哪些屬性一目了然，也利于分別維護(hù)和修改。（類(lèi)似于書(shū)的目錄和對(duì)應(yīng)內(nèi)容一樣）

另外是你可以提煉一些通用的屬性來(lái)減少描述：

簡(jiǎn)而言之：更易維護(hù)、更靈活。不過(guò)應(yīng)該怎么描述是相當(dāng)看經(jīng)驗(yàn)的。

CSS 基礎(chǔ)語(yǔ)法

CSS 的目的是定義 HTML 元素的布局和樣式。語(yǔ)法非常簡(jiǎn)單：

/* A CSS rule */
selector{ property: value;}

您也可以將其看作是：

who{ what: how;}

CSS 選擇器

因?yàn)槲覀儾幌胍淮螢樗?HTML 元素設(shè)置樣式，所以我們需要能夠定位這些 HTML 元素的子集。

CSS 選擇器定義了我們希望樣式應(yīng)用到哪些元素。

通用標(biāo)簽選擇器

定位通用 HTML 標(biāo)簽很容易：只需使用標(biāo)簽名稱(chēng)即可。

a{ /* Links */ }
p{ /* Paragraphs */ }
ul{ /* Unordered lists */ }
li{ /* List items */ }

HTML 標(biāo)簽的名稱(chēng)和所使用的 CSS 選擇器之間存在直接聯(lián)系。

class

考慮到我們可能不希望所有段落或所有標(biāo)題的樣式都相同，因此需要區(qū)分它們。

在所有 HTML 屬性中，該 class 屬性對(duì)于 CSS 來(lái)說(shuō)是最重要的。它允許我們定義一組專(zhuān)門(mén)設(shè)計(jì)的 HTML 元素。只需在要使用的類(lèi)名前面加一個(gè)點(diǎn) . ：

.date {
  color: red;
}

這樣，所有具有 class="redColor" 的 HTML 元素都會(huì)被設(shè)置為紅色：

<p class="date">
  Saturday Feb 21
</p>
<p>
  The event will be on <em class="date">Saturday</em>.
</p>

結(jié)果：

IDs

你也可以使用 id 屬性來(lái)作用于 HTML，只需要在 CSS 選擇器前面加上 # ：

#tagline{ color: orange;}

<h1 id="tagline">This heading will be orange.</h1>

id 屬性有點(diǎn)類(lèi)似于 class 屬性，但 id 只能作用于唯一一個(gè) HTML 元素，而 class 可以作用于一類(lèi)。

一些例子

組合選擇器

我們重用之前的示例，該實(shí)例中，我們希望日期顯示為紅色：

.date {
  color: red;
}

<p class="date">
  Saturday Feb 21
</p>
<p>
  The event will be on <em class="date">Saturday</em>.
</p>

但如果我們希望 em 元素中的日期改為藍(lán)色應(yīng)該怎么辦？我們可以添加以下 CSS：

em.date {
  color: blue;
}

結(jié)果：

該 em.date 選擇器僅適用于 <em class="date"></em> 的 HTML 元素。它不會(huì)影響 .date 或 em。

層級(jí)選擇器

選擇器中的空格定義祖先/后代關(guān)系。假設(shè)我們希望標(biāo)題中的鏈接為紅色：

header a {
  color: red;
}

可以讀作："選擇 header 標(biāo)簽內(nèi)所有的 a 元素"。這樣可以防止所有其他鏈接（不在標(biāo)題中）受到影響。

偽類(lèi)選擇器

HTML 元素可以具有不同的狀態(tài)。最常見(jiàn)的情況是當(dāng)您將鼠標(biāo)懸停在鏈接上時(shí)。當(dāng)此類(lèi)事件發(fā)生時(shí)，CSS 中可能會(huì)應(yīng)用不同的樣式。

偽類(lèi)選擇器附加到常規(guī)選擇器上，并以冒號(hào)開(kāi)頭:：

/* 正常情況下的樣式 */
a {
  color: blue;
}
/* 鼠標(biāo)懸停時(shí)的樣式 */
a:hover {
  color: red;
}

CSS 繼承

假設(shè)我們要更改網(wǎng)頁(yè)的文本顏色，為每個(gè) HTML 元素指定顏色將很麻煩：

p,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6{ color: grey;}

值傳遞

但其實(shí) color 值是可以從祖先繼承的?？紤]到我們要更改整個(gè)頁(yè)面，我們可以選擇所有 HTML 元素的祖先 body 標(biāo)簽：

body{ color: grey;}

所有子元素和后代元素都將從其共同祖先繼承該值。

“

當(dāng)然我們也可以使用 html 標(biāo)簽。

繼承的屬性

只能從祖先那里繼承少數(shù) CSS 屬性。它們主要是文本屬性：

• 文字顏色
• 字體（大小/ 字體 Family/ 樣式/ 粗細(xì)）
• 行高

“

一些 HTML 元素不會(huì)從其祖先那里繼承。例如，鏈接（<a> 標(biāo)簽）不繼承該color屬性。

CSS 優(yōu)先級(jí)

一個(gè) HTML 元素可以被多個(gè) CSS 規(guī)則作為目標(biāo)。讓我們以一個(gè)簡(jiǎn)單的段落為例：

<p class="message" id="introduction">
  歡迎關(guān)注公眾號(hào)：wmyskxz
</p>

我們有三種方式使用 CSS 來(lái)對(duì)其設(shè)置樣式：

/* 標(biāo)簽名 */
p{ color: blue;}
/* 類(lèi)名 */
.message{ color: green;}
/* id */
#introduction{ color: red;}

由于瀏覽器只能選擇一種顏色應(yīng)用于該段落，因此必須決定哪種 CSS 規(guī)則優(yōu)先于其他規(guī)則。這就是 CSS 優(yōu)先級(jí)。

在我們的示例中，該段落將為**紅色，**因?yàn)?code style="border-style: none;font-size: 14px;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;color: rgb(30, 107, 184);background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;">#id選擇器比其他選擇器具有更高優(yōu)先級(jí)。

CSS 規(guī)則的順序

如果您的 CSS 中有類(lèi)似的選擇器，則最后定義的選擇器將具有優(yōu)先權(quán)。

p{ color: green;}
p{ color: red;}
/* Paragraphs will be red */

快速判斷的方法

判斷 CSS 優(yōu)先級(jí)的一種快速方法是給選擇器的打分：

• #id 選擇器價(jià)值 100
• .class 選擇器價(jià)值 10
• tag 選擇器價(jià)值 1

無(wú)論 CSS 出現(xiàn)的順序如何， “得分”最高的選擇器都將優(yōu)先。

#introduction{ color: red;}
.message{ color: green;}
p{ color: blue;}

<p class="message" id="introduction">
  歡迎關(guān)注公眾號(hào)：wmyskxz
</p>

結(jié)果這一段將是紅色的。因?yàn)?#introduction{ color: red;} ID 選擇器具有更高的優(yōu)先級(jí)。

如何避免沖突

在編寫(xiě)CSS時(shí)，很容易編寫(xiě)有沖突的規(guī)則，比如多次應(yīng)用同一屬性。

為了避免這種情況：

• 僅使用類(lèi)：使用.introduction代替#introduction，即使該元素僅在您的網(wǎng)頁(yè)中出現(xiàn)一次
• 避免在單個(gè) HTML 元素上應(yīng)用多個(gè)類(lèi)：不要編寫(xiě)<p class="big red important">，而是<p class="title">在語(yǔ)義上更具描述性；
• 不要使用像這樣的內(nèi)聯(lián)樣式<div style="background: blue;">

CSS 常用屬性一覽表

body {
  width:100px;/*寬度*/
  min-width:1000px;/*最小寬度*/
  height :100px;/*高度*/
  line-height:100px;/*行高*/

  font-family:SimSun,"Microsoft YaHei";/*字體*/
  font-size :16px;/*字體大小*/
  font-style :italic;/*字體風(fēng)格*/
  font:16px/26px "微軟雅黑";/*字號(hào)/行高  字體*/
  color:#ccc;/*字體顏色*/

  border-width:10px;/*四邊邊框粗細(xì)*/
  border-style:solid;/*四邊邊框的風(fēng)格*/
  border-color:red;/*四邊邊框的顏色*/
  border:10px solid red;/*border-width,border-style,border-color的簡(jiǎn)寫(xiě)*/
  border-top-width:10px;/*上邊框的粗細(xì)*/
  border-top-style:dashed;/*上邊框的風(fēng)格*/
  border-top-color:red;/*上邊框的顏色*/
  border-top:10px solid red;/*上面三個(gè)簡(jiǎn)寫(xiě)*/
  border-radius:2px;/*邊框圓角*/

  text-align:center;/*left,center,right,justify 水平方向居中*/
  letter-spacing:10px;/*字間距*/
  word-spacing:10px;/*單詞之間的間距*/
  text-indent:10px;/*首行縮進(jìn)*/
  
  margin-top:10px;/*上外邊距*/
  margin:10px;/*四邊外邊距*/
  padding-top:10px;/*上內(nèi)邊距*/
  padding :10px;/*可以設(shè)置一,二,三,四種值.內(nèi)邊距*/
  
  float:left;/*right  左浮動(dòng),右浮動(dòng)*/
  clear :both;/*清除浮動(dòng),,清除左浮動(dòng)或者右浮動(dòng)*/
  position:relative;/*相對(duì)定位*/
  position:absolute;/*絕對(duì)定位*/
  position:fixed;/*固定定位*/

  z-index:1;/*設(shè)置層疊元素的上下位置*/
  
  background-color:#ddd;/*背景顏色*/
  background-image:url("");/*背景圖片*/
  
  overflow:hidden;/*溢出部分隱藏*/
  visibility:hidden;/*隱藏,占位置*/
  display:block;/*設(shè)為塊狀元素 塊級(jí)元素自帶的屬性*/
  display:inline;/*設(shè)為行內(nèi)元素*/
  display:inline-block;/*非塊狀元素的塊狀盒子*/
  display:none;/*隱藏，不占位置*/
  opacity:0.5;/*透明度 兼容ie9以上的瀏覽器*/
  filter:alpha(opacity=50)/*設(shè)置透明度 兼容i6~ie8*/
}

Part 4. 頁(yè)面是如何渲染的

瀏覽器具有運(yùn)行在操作系統(tǒng)之上的"操作系統(tǒng)"的"美稱(chēng)"。這意味著這是一個(gè)相當(dāng)復(fù)雜的過(guò)程。

對(duì)于瀏覽器如果感興趣的話，可以參考之前的文章。這里簡(jiǎn)單回顧一下。

首先，渲染進(jìn)程內(nèi)部包含主線程、工作線程、合成線程和光柵線程。

請(qǐng)先想象一個(gè)這樣的場(chǎng)景：您站在一副簡(jiǎn)單繪畫(huà)的面前，如何通過(guò)打電話來(lái)讓您的朋友知道這幅畫(huà)究竟長(zhǎng)什么樣子呢？

瀏覽器實(shí)際上要知道繪制些什么元素，每個(gè)元素屬性如何是要分成三步的：1）通過(guò) HTML 繪制元素樹(shù)（俗稱(chēng) DOM 樹(shù)）；2）通過(guò) CSS 文件繪制樣式樹(shù)（俗稱(chēng) CSSOM 樹(shù)）；3）綜合兩顆樹(shù)繪制渲染樹(shù)（俗稱(chēng) Render Tree）；

現(xiàn)在瀏覽器知道文檔的結(jié)構(gòu)、每個(gè)元素的樣式、頁(yè)面的幾何形狀和繪制順序，它是如何繪制頁(yè)面的？把這些信息轉(zhuǎn)換為屏幕上的像素，我們稱(chēng)為光柵化。

處理這種情況的一種簡(jiǎn)單的方法是，先在光柵化視窗內(nèi)的畫(huà)面，如果用戶滾動(dòng)頁(yè)面，則移動(dòng)光柵框，并光柵化填充缺少的部分。這就是 Chrome 首次發(fā)布時(shí)處理光柵化的方式。

但是，現(xiàn)代瀏覽器會(huì)運(yùn)行一個(gè)更復(fù)雜的過(guò)程，我們稱(chēng)為合成。

合成是一種將頁(yè)面的各個(gè)部分分層，分別光柵化，并在稱(chēng)為合成線程的單獨(dú)線程中合成為頁(yè)面的技術(shù)。如果發(fā)生滾動(dòng)，由于圖層已經(jīng)光柵化，因此它所要做的只是合成一個(gè)新幀。動(dòng)畫(huà)也可以以相同的方式（移動(dòng)圖層和合成新幀）實(shí)現(xiàn)。

后記

如今我們紛繁復(fù)雜的網(wǎng)頁(yè)幾乎都靠 HTML 和 CSS 來(lái)實(shí)現(xiàn)。至此，我們已經(jīng)對(duì)它們有了最基礎(chǔ)的了解。

- End -