如何使用CSS？

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

反饋

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

如何使用 CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

外聯(lián)樣式

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

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

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

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

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

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

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

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

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

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

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

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

CSS 聲明

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

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

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

CSS注釋

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

總結(jié)

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

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

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

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

CSS

1 人點(diǎn)贊