怎么使用CSS

這篇文章將為大家詳細(xì)講解有關(guān)怎么使用CSS，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

如何使用 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 >這是測(cè)試內(nèi)容.</div>

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

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

1. HTML 內(nèi)容與 CSS 樣式屬于強(qiáng)耦合，并沒(méi)有實(shí)現(xiàn)網(wǎng)頁(yè)的內(nèi)容和樣式的有效分離。

2. 如果為不同元素設(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)題。具體的做法如下所示：

1. 創(chuàng)建一個(gè)擴(kuò)展名為 .css 的文件，并且將 CSS 樣式代碼編寫(xiě)在這個(gè)文件中。

2. 在 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ò)程如下所示：

1. 瀏覽器會(huì)加載 HTML 頁(yè)面并進(jìn)行解析。

2. 解析到 <link> 元素引入的 CSS 文件，并通過(guò) href 屬性讀取到 CSS 文件的路徑。

3. 根據(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)：

關(guān)于“怎么使用CSS”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。