HTML僅能呈現(xiàn)一些信息，表現(xiàn)能力非常有限，需要結(jié)合CSS一起使用，以使頁面更加精美。在一個(gè)網(wǎng)頁中，所有的樣式代碼均可移出HTML文檔，然后移入一個(gè)獨(dú)立的樣式表。
CSS 樣式既可以作為單獨(dú)的文件（.css類型的文件）引入到 HTML 文檔中，也可以直接寫在 HTML 文檔中，大致分為如下四種方法：
1.內(nèi)嵌樣式表
嵌入式：將CSS樣式集中寫在網(wǎng)頁的<head></head>標(biāo)簽對(duì)的<style></style>標(biāo)簽對(duì)中；
在HTML的<head>標(biāo)簽中的<style>標(biāo)簽中添加css樣式，使用內(nèi)嵌樣式表定義的 CSS 樣式只能在當(dāng)前網(wǎng)頁內(nèi)使用。
<!DOCTYPE html>
<html>
<head>
<title>內(nèi)嵌樣式</title>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>樣式</h1>
</body>
</html>因?yàn)閮?nèi)嵌樣式表需要將 CSS 樣式定義在 HTML 文檔的內(nèi)部，所以會(huì)導(dǎo)致文檔的體積變大，而且當(dāng)有其它文檔也需要使用內(nèi)嵌樣式表中同樣的樣式時(shí)，無法引入到其他文檔，必須在其它文檔中重新定義，會(huì)導(dǎo)致代碼冗余，不利于后期維護(hù)。
2. 內(nèi)聯(lián)樣式
行內(nèi)式：也稱內(nèi)聯(lián)式，在標(biāo)記的style屬性中設(shè)定CSS樣式。這種方式?jīng)]有體現(xiàn)出CSS的優(yōu)勢(shì)；
內(nèi)聯(lián)樣式就是將樣式信息直接定義在 HTML 標(biāo)簽的 style 屬性中，由于內(nèi)聯(lián)樣式定義在標(biāo)簽內(nèi)部，所以它只對(duì)所在的標(biāo)簽有效。
<!DOCTYPE html> <html> <head> <title>內(nèi)聯(lián)式</title> </head> <body> <h1 style="color: maroon; margin-left: 40px">內(nèi)聯(lián)式</h1> </body> </html>內(nèi)聯(lián)樣式雖然可以很方便的為 HTML 標(biāo)簽賦予 CSS 樣式，但它的缺點(diǎn)也非常明顯，不推薦過多使用。
（1）定義內(nèi)聯(lián)樣式需要在每個(gè) HTML 標(biāo)簽中定義 style 屬性，很不方便；
（2）在內(nèi)聯(lián)樣式中使用雙引號(hào)或單引號(hào)時(shí)要特別小心，因?yàn)?HTML 標(biāo)簽的屬性通常都會(huì)使用雙引號(hào)來包裹屬性的值，例如<input type="text">；
（3）在內(nèi)聯(lián)樣式中定義的樣式不能再其它任何地方重用；
（4）內(nèi)聯(lián)樣式在后期維護(hù)時(shí)很不方便，因?yàn)橐粋€(gè)網(wǎng)站通常有很多頁面組成，當(dāng)修改頁面樣式時(shí)需要對(duì)頁面逐個(gè)修改；
（5）添加過多的內(nèi)聯(lián)樣式會(huì)導(dǎo)致 HTML 文檔的體積增大。
3. 外部樣式表
鏈接式：跟第4個(gè)的導(dǎo)入式都稱外部式或者外聯(lián)式，使用link引用外部CSS文件；
外部樣式表是最常見也是最推薦的引用 CSS 的方式，您只需要將 CSS 樣式定義在一個(gè) .css 格式的文件中，然后使用 HTML 的<link>標(biāo)簽將這個(gè) .css 格式的樣式文件應(yīng)用到 HTML 文檔中。
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="./style.css"> </head> <body> <h1>外部樣式表</h1> </body> </html>
因?yàn)?CSS 樣式定義在單獨(dú)的 .css 格式的文件中，所以可以在多個(gè)頁面之間引用，若要修改網(wǎng)頁的樣式，只需要修改這個(gè) CSS 樣式文件即可，很方便。
4.導(dǎo)入樣式表
導(dǎo)入式：使用@import引用外部CSS文件；
您同樣可以使用@import來引用外部樣式表，這一點(diǎn)與使用<link>標(biāo)簽比較相似。創(chuàng)建一個(gè)總的先style.css，將所有的樣式先導(dǎo)入style.css。
HTML：
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>外部樣式表</h1> </body> </html>
style.css:
@import "1.css"; @import "2.css"; @import "3.css"; @import "4.css";
1.css:(1到4的css相同，都是添加樣式)
.top1{
list-style-type: none;
margin: 0;
padding: 0;
}
C語言網(wǎng)提供由在職研發(fā)工程師或ACM藍(lán)橋杯競(jìng)賽優(yōu)秀選手錄制的視頻教程，并配有習(xí)題和答疑，點(diǎn)擊了解：
一點(diǎn)編程也不會(huì)寫的：零基礎(chǔ)C語言學(xué)練課程
解決困擾你多年的C語言疑難雜癥特性的C語言進(jìn)階課程
從零到寫出一個(gè)爬蟲的Python編程課程
只會(huì)語法寫不出代碼？手把手帶你寫100個(gè)編程真題的編程百練課程
信息學(xué)奧賽或C++選手的 必學(xué)C++課程
藍(lán)橋杯ACM、信息學(xué)奧賽的必學(xué)課程：算法競(jìng)賽課入門課程
手把手講解近五年真題的藍(lán)橋杯輔導(dǎo)課程