如何使用CSS？

猿友 2021-01-18 16:38:25 瀏覽數(shù) (3576)

反饋

導(dǎo)讀：本章主要講解在 HTML 頁面中如何使用 CSS 樣式以及 CSS 的語法結(jié)構(gòu)。通過本小節(jié)的學(xué)習(xí)，我們將掌握 CSS 語法中最為基礎(chǔ)核心的內(nèi)容。這些內(nèi)容也將成為后續(xù)我們編寫 CSS 樣式代碼必備的內(nèi)容。

如何使用 CSS

CSS 樣式主要的應(yīng)用場(chǎng)景是在 HTML 頁面中，其作用就是為 HTML 頁面設(shè)置在瀏覽器運(yùn)行后的顯示效果。而在 HTML 頁面使用 CSS 樣式具有三種方式：

內(nèi)聯(lián)樣式
內(nèi)嵌樣式表
外聯(lián)樣式表

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

HTML 元素的 style 屬性的作用是為該元素設(shè)置 CSS 樣式。如下示例代碼所示展示了內(nèi)聯(lián)樣式的寫法：

<div style="color: lightcoral;">這是測(cè)試內(nèi)容.</div>

內(nèi)聯(lián)樣式的語法結(jié)構(gòu)如下圖所示：

但使用內(nèi)聯(lián)樣式的缺點(diǎn)也非常明顯，具體缺點(diǎn)如下：

HTML 內(nèi)容與 CSS 樣式屬于強(qiáng)耦合，并沒有實(shí)現(xiàn)網(wǎng)頁的內(nèi)容和樣式的有效分離。
如果為不同元素設(shè)置相同的 CSS 樣式的話，會(huì)導(dǎo)致相同的 CSS 樣式代碼被重復(fù)定義，產(chǎn)生冗余代碼。

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

HTML 元素中的元素可以用來為當(dāng)前 HTML 頁面的元素設(shè)置 CSS 樣式。如下示例代碼所示展示了內(nèi)嵌樣式表的寫法：

<style type="text/css">
    p {
        color: lightcoral;
        font-size: 24px;
    }
</style>

使用內(nèi)嵌樣式表的優(yōu)點(diǎn)在于解決內(nèi)聯(lián)樣式中的兩個(gè)問題：

HTML 內(nèi)容與 CSS 樣式的強(qiáng)耦合問題，使得網(wǎng)頁的內(nèi)容和樣式有效地分離。
如果為不同元素設(shè)置相同的 CSS 樣式的話，只需要定義一次 CSS 樣式代碼。

但內(nèi)嵌樣式表依舊編寫在 HTML 文件中。如果一個(gè) HTML 頁面中包含大量的 CSS 樣式的話，會(huì)導(dǎo)致 HTML 文件變得很大，從而瀏覽器加載 HTML 頁面時(shí)耗時(shí)變長。

外聯(lián)樣式

CSS 樣式代碼可以定義在一個(gè) CSS 文件中，這樣有效地解決了內(nèi)嵌樣式表中的問題。具體的做法如下所示：

創(chuàng)建一個(gè)擴(kuò)展名為 .css 的文件，并且將 CSS 樣式代碼編寫在這個(gè)文件中。
在 HTML 頁面中，通過元素中的元素將創(chuàng)建的 CSS 文件引入到 HTML 頁面中。如下示例代碼所示展示了 `` 元素如何引入 CSS 文件：<link rel="stylesheet" href="style/demo.css">1rel 屬性：用來定義引入文件與當(dāng)前 HTML 頁面的關(guān)系，該屬性值必須是鏈接類型值。href 屬性：用來定義引入文件的 URL。說明：一個(gè) HTML 頁面允許引入多個(gè) CSS 文件，多個(gè) CSS 文件的加載順序按照 HTML 頁面引入的順序進(jìn)行加載。

外聯(lián)樣式表的加載過程

需要注意的是，外聯(lián)樣式表不會(huì)與 HTML 頁面同步被瀏覽器加載。具體的加載過程如下所示：

瀏覽器會(huì)加載 HTML 頁面并進(jìn)行解析。
解析到 <link> 元素引入的 CSS 文件，并通過 href 屬性讀取到 CSS 文件的路徑。
根據(jù)讀取的路徑，開始加載 CSS 文件并進(jìn)行解析。

如下圖所示展示了外聯(lián)樣式表的加載過程：

CSS語法結(jié)構(gòu)

無論是以上三種方式引入 CSS 樣式的哪一種，我們都需要學(xué)習(xí) CSS 的語法結(jié)構(gòu)，這也是學(xué)習(xí) CSS 后續(xù)內(nèi)容的基礎(chǔ)。如下示例所示展示了 CSS 樣式的基本代碼結(jié)構(gòu)：

p {
    color: lightcoral;
    font-size: 24px;
}

如下圖所示展示了CSS 的語法結(jié)構(gòu)以及相關(guān)概念：

CSS 語法的基本結(jié)構(gòu)可分為：

選擇器（Selector）：用來定位當(dāng)前 HTML 頁面中的元素，可以是一個(gè)元素也可以是多個(gè)元素（元素集）。
聲明塊（Declaration block）：用來包含一個(gè)或多個(gè) CSS 聲明，其語法結(jié)構(gòu)是一對(duì)花括號(hào)。

CSS 聲明

CSS 語法結(jié)構(gòu)中除了選擇器之外，就是聲明了。CSS 聲明是一個(gè)由 CSS 定義的規(guī)則，具體的語法結(jié)構(gòu)是一對(duì)鍵/值對(duì)形式。

CSS 聲明的語法結(jié)構(gòu)可分為：

屬性（Properties）：用來定義 HTML 元素樣式的方式，是由 CSS 給定的。例如 color 屬性是用來定義元素的文本顏色等。
屬性的值（Property value）：用來定義 HTML 元素的樣式。例如 color 屬性的值可以是 lightcoral 等。注意：不同的 CSS 屬性對(duì)應(yīng)的屬性值是不同的。具體的可以參考 MDN提供的參考文檔。
分隔符：是一個(gè)冒號(hào)（:），用來分隔 CSS 屬性和值的。
結(jié)束符：是一個(gè)分號(hào)（;），用來表示一個(gè) CSS 聲明結(jié)束。

CSS注釋

CSS 與 HTML 同樣提供了注釋，其作用也與 HTML 的注釋類似。不過 CSS 的注釋語法與 HTML 不同，如下圖所示展示了 CSS 注釋的語法結(jié)構(gòu)：

總結(jié)

本小節(jié)講解了在 HTML 頁面引入 CSS 樣式的三種方式和 CSS 的語法結(jié)構(gòu)，以及注釋等內(nèi)容。其中：

三種引入 CSS 樣式的方式，每一種都存在優(yōu)點(diǎn)和缺點(diǎn)，要根據(jù)實(shí)際開發(fā)的情況選擇使用哪一種引入 CSS 樣式。
CSS 的語法結(jié)構(gòu)，主要分為選擇器和聲明兩塊內(nèi)容，這也是我們?cè)诤罄m(xù)章節(jié)中繼續(xù)進(jìn)行講解的內(nèi)容。
CSS 注釋的作用與 HTML 注釋類似，但語法結(jié)構(gòu)不同。在實(shí)際開發(fā)中不要混淆。

際開發(fā)的情況選擇使用哪一種引入 CSS 樣式。

CSS 的語法結(jié)構(gòu)，主要分為選擇器和聲明兩塊內(nèi)容，這也是我們?cè)诤罄m(xù)章節(jié)中繼續(xù)進(jìn)行講解的內(nèi)容。
CSS 注釋的作用與 HTML 注釋類似，但語法結(jié)構(gòu)不同。在實(shí)際開發(fā)中不要混淆。

CSS

1 人點(diǎn)贊