層疊樣式表/將 CSS 應用於 HTML 和 XHTML
CSS 可以透過三種方法應用於 HTML 或 XHTML:連結、嵌入和內聯。在連結方法中,CSS 儲存在單獨的檔案中,而不是直接儲存在 HTML 頁面中。在嵌入方法中,CSS 作為 HTML 頁面的一部分儲存在頁首部分。在內聯方法中,CSS 直接儲存在 HTML 標籤的 style 屬性中,例如 <div style="font-weight:bold">粗體字</div>。
最簡潔的方法可能是連結方法,但其他方法在網頁原型設計階段很方便快捷。嵌入和內聯方法不需要使用單獨的檔案。內聯方法可以省去考慮文件應該使用哪些 CSS 類別的麻煩。對於一個更大的網站,其中多個網頁共享相同的樣式,並且樣式應該由使用者自定義,連結方法是唯一可行的方法。
以下部分將詳細介紹這些方法。
使用連結的 CSS,CSS 規則儲存在單獨的檔案中。要從 HTML 頁面引用該檔案,請將 link 元素(以及 XHTML 中的結束元素)新增到 head 元素中,如下例所示,該示例假設樣式表儲存在名為“style.css”的檔案中。
<head>
<title>Example Web Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
示例中的 link 元素具有三個屬性。第一個是 rel,它告訴瀏覽器連結目標的型別。第二個是 type,它告訴瀏覽器樣式表的型別。第三個是 href,它告訴瀏覽器在哪個 URL 下找到樣式表。在示例中,URL 是相對的,但也可以是絕對的。
包含單個規則的“style.css”只包含以下文字
p {
font-weight:bold;
}
這告訴瀏覽器段落 (p) 元素中的文字應該以粗體顯示。
示例渲染
將被格式化的文字。
因此,完整 HTML 文件的原始碼如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example Web Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Text that will be formatted.</p>
</body>
</html>
動態生成的網頁可能需要使用嵌入式 CSS,但這應該儘量減少。即使在動態頁面中,任何多個頁面共有的 CSS 通常也應該移到連結的樣式表中。
嵌入式 CSS 是位於需要樣式的 HTML 文件頁首中的 CSS。例如,我們希望本 HTML 文件中的文字以粗體顯示。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example Web Page</title>
</head>
<body>
<p>
Text that will be formatted.
</p>
</body>
</html>
CSS 可以放在文件的頁首部分
<head>
<title>Example Web Page</title>
<style type="text/css">
p {
font-weight:bold;
}
</style>
</head>
CSS 位於 style 元素中。將元素的 type 屬性設定為 text/css 告訴瀏覽器包含的樣式表是用 CSS 編寫的,應該用於格式化頁面。如果 type 屬性缺失或設定為無法識別的值,CSS 將不會應用到頁面。
本示例中的 CSS 片段告訴瀏覽器將所有段落 (p) 元素中的文字設定為粗體。頁面上的文字將如下所示
將被格式化的文字。
以下是包含 CSS 的完整文件。
<!DOCTYPE html">
<html lang="en">
<head>
<title>Example Web Page</title>
<style type="text/css">
p {
font-weight:bold;
color:green;
}
</style>
</head>
<body>
<p>
Text that will be formatted.
</p>
</body>
</html>
請記住,您應該儘可能使用連結樣式表而不是嵌入式樣式表。這樣可以輕鬆替換通用樣式資訊,而無需跟蹤各個 HTML 檔案中的樣式。
內聯 CSS 直接指定在要應用 CSS 的元素的開始標籤中。它被輸入到 HTML 或 XHTML 1.1 中的 style 屬性中。
例如
<div style="font-weight:bold; color:red;">Bold Font</div>
顯示為
如前所述,您通常應該優先使用連結 CSS 而不是嵌入式 CSS,兩者都優先於內聯 CSS。