CSS文件只是以.css擴(kuò)展名保存的純文本文件。
在本教程中，您將學(xué)習(xí)使用CSS向網(wǎng)頁添加樣式和格式設(shè)置信息有多么容易。但是，在開始之前，請(qǐng)確保您具有HTML的一些使用知識(shí)。
如果您剛剛進(jìn)入Web開發(fā)領(lǐng)域，請(qǐng)從這里開始學(xué)習(xí)?
事不宜遲，讓我們開始使用級(jí)聯(lián)樣式表（CSS）。
CSS可以作為單獨(dú)的文檔附加，也可以嵌入HTML文檔本身。在HTML文檔中包括CSS的三種方法：
在本教程中，我們將介紹所有三種一種一種插入CSS的方法。
注意：內(nèi)聯(lián)樣式的優(yōu)先級(jí)最高，而外部樣式表的優(yōu)先級(jí)最低。這意味著，如果在嵌入式樣式表和外部樣式表中都為元素指定樣式，則嵌入式樣式表中沖突的樣式規(guī)則將覆蓋外部樣式表。
內(nèi)聯(lián)樣式用于通過將CSS規(guī)則直接放入開始標(biāo)記中來將唯一樣式規(guī)則應(yīng)用于元素?？梢允褂?code>style屬性將其附加到元素。
該style屬性包括一系列CSS屬性和值對(duì)。每"property: value"對(duì)之間用分號(hào)（;）分隔，就像您寫入嵌入式樣式表或外部樣式表一樣。但是它必須全部在一行中，即分號(hào)后沒有換行符，如下所示：
<h1 style="color:red; font-size:30px;">This is a heading</h1> <p style="color:green; font-size:22px;">This is a paragraph.</p> <div style="color:blue; font-size:14px;">This is some text content.</div>測(cè)試看看?/?
使用內(nèi)聯(lián)樣式通常被認(rèn)為是不好的做法。由于樣式規(guī)則是直接嵌入HTML標(biāo)記內(nèi)的，因此會(huì)導(dǎo)致演示與文檔內(nèi)容混合在一起。這使得代碼難以維護(hù)，并否定了使用CSS的目的。
嵌入或內(nèi)部樣式表僅影響嵌入它們的文檔。
嵌入式樣式表在<head>HTML文檔的部分中使用<style>元素定義。您可以<style>在HTML文檔中定義任意數(shù)量的元素，但是它們必須出現(xiàn)在<head>和</head>標(biāo)記之間。讓我們看一個(gè)示例：
<!DOCTYPE html><html lang="en"><head>
<title>My HTML Document</title>
<style>
body { background-color: YellowGreen; }
p { color: #fff; }
</style></head><body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p></body></html>測(cè)試看看?/?提示：和標(biāo)簽的type屬性（即）定義了樣式表的語言。此屬性純粹是提供信息的。由于CSS是HTML5中的標(biāo)準(zhǔn)樣式表語言和默認(rèn)樣式表語言，因此您可以忽略此設(shè)置。<style><link>type="text/css"
當(dāng)樣式應(yīng)用于網(wǎng)站的許多頁面時(shí)，外部樣式表是理想的選擇。
外部樣式表將所有樣式規(guī)則保存在一個(gè)單獨(dú)的文檔中，您可以從網(wǎng)站上的任何HTML文件進(jìn)行鏈接。外部樣式表是最靈活的，因?yàn)橛辛送獠繕邮奖?，您只需更改一個(gè)文件即可更改整個(gè)網(wǎng)站的外觀。
您可以通過兩種方式附加外部樣式表- 鏈接和導(dǎo)入。
鏈接之前，我們需要先創(chuàng)建一個(gè)樣式表。讓我們打開您喜歡的代碼編輯器并創(chuàng)建一個(gè)新文件?，F(xiàn)在，在該文件中鍵入以下CSS代碼，并將其另存為“ style.css”。
body {
background: lightyellow;
font: 18px Arial, sans-serif;}h1 {
color: orange;}可以使用<link>標(biāo)記將外部樣式表鏈接到HTML文檔。該<link>標(biāo)簽進(jìn)入內(nèi)部<head>部分，你可以在下面的示例中看到：
<!DOCTYPE html><html lang="en"><head> <title>My HTML Document</title> <link rel="stylesheet" href="css/style.css"></head><body> <h1>This is a heading</h1> <p>This is a paragraph of text.</p></body></html>測(cè)試看看?/?
提示：在這三種方法中，使用外部樣式表是定義樣式并將其應(yīng)用于HTML文檔的最佳方法。從外部樣式表可以清楚地看到，受影響的HTML文件對(duì)標(biāo)記的更改最少。
該@import規(guī)則是加載外部樣式表的另一種方法。該@import語句指示瀏覽器加載外部樣式表并使用其樣式。
您可以通過兩種方式使用它。最簡(jiǎn)單的是在文檔的標(biāo)題內(nèi)。注意，其他CSS規(guī)則可能仍包含在<style>元素中。這是一個(gè)示例：
<style>
@import url("css/style.css");
p {
color: blue;
font-size: 16px;
}
</style>測(cè)試看看?/?同樣，您可以使用@import規(guī)則在另一個(gè)樣式表中導(dǎo)入樣式表。
@import url("css/layout.css");
@import url("css/color.css");body {
color: blue;
font-size: 14px;}測(cè)試看看?/?注意：所有@import規(guī)則都必須在樣式表的開頭出現(xiàn)。樣式表中定義的任何樣式規(guī)則本身都會(huì)覆蓋導(dǎo)入的樣式表中的沖突規(guī)則。但是，由于性能問題，不建議在另一個(gè)樣式表中導(dǎo)入樣式表。