外部的 CSS 文件可以幫助網(wǎng)頁樣式化,提供更好的用戶體驗(yàn)。它也有助于維護(hù)、開發(fā)和設(shè)計(jì),并可以增強(qiáng)可讀性和可協(xié)作性。以下是如何創(chuàng)建并應(yīng)用外部 CSS 文件。
首先,我們需要?jiǎng)?chuàng)建一個(gè)新文件并將其保存為 .css 擴(kuò)展名。例如,我們可以創(chuàng)建一個(gè)名為“styles.css”的文件。
接著,我們可以在該文件中編寫我們的 CSS 代碼。以下是一個(gè)示例代碼片段,該代碼定義了一個(gè)類 .example,該類將應(yīng)用于 HTML 中包含的所有元素:
.example { color: red; font-size: 14px; }
我們可以添加盡可能多的 CSS 屬性,以樣式化網(wǎng)頁并實(shí)現(xiàn)想要的效果。
當(dāng)我們已經(jīng)編寫好了我們的樣式表之后,我們需要將其應(yīng)用于 HTML 文件。在 HTML 文件 head 標(biāo)簽內(nèi),我們應(yīng)該添加以下代碼行:
<head> <link rel="stylesheet" href="styles.css"> </head>
在這里,我們使用了<link>
標(biāo)簽并定義了屬性rel
和href
。屬性'href'定義了我們剛剛創(chuàng)建的 CSS 文件的路徑。屬性rel
定義與文檔之間的關(guān)系,該關(guān)系在本例中為樣式表。
我們可以通過添加更多的<link>
標(biāo)簽,將不同的樣式表應(yīng)用于不同的HTML文件。
最后,我們可以使用 CSS 選擇器將樣式應(yīng)用于網(wǎng)頁中的特定內(nèi)容。例如,我們可以在 HTML<body>
標(biāo)簽內(nèi),使用類選擇器將樣式應(yīng)用于一個(gè)特定的元素。這可以通過以下代碼行實(shí)現(xiàn):
<body> <h1 class="example">Hello World!</h1> </body>
在這里,我們使用 CSS 類選擇器來選擇我們?cè)?CSS 文件中定義的“例子”類,以應(yīng)用其中包含的樣式。
因此,這就是在 HTML 文件中定義和使用外部 CSS 文件的基礎(chǔ)。通過將CSS樣式中心化和定義化,我們可以最大限度地充分發(fā)揮 CSS在網(wǎng)頁設(shè)計(jì)和開發(fā)中的價(jià)值。