一、什么是CSS?
CSS（層疊樣式表）是用于設(shè)置網(wǎng)頁(yè)的外觀和布局的一種語(yǔ)言。它與HTML或其他標(biāo)記語(yǔ)言結(jié)合使用，通過(guò)選擇器來(lái)選擇要應(yīng)用樣式的HTML元素，并定義這些元素的樣式規(guī)則。
CSS的主要作用是將樣式從HTML文檔中分離出來(lái)，使得樣式和內(nèi)容可以獨(dú)立管理和修改。通過(guò)將樣式集中在一個(gè)或多個(gè)CSS文件中，可以更方便地為整個(gè)網(wǎng)站的所有頁(yè)面定義一致的樣式。
二、CSS和HTML區(qū)別
HTML（超文本標(biāo)記語(yǔ)言）是一種標(biāo)記語(yǔ)言，用于定義網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容。它使用標(biāo)簽（例如<p>、<div>、<img>等）來(lái)標(biāo)識(shí)不同的元素，并使用這些標(biāo)簽來(lái)組織和呈現(xiàn)文本、圖像、鏈接和其他媒體內(nèi)容。HTML提供了一種描述網(wǎng)頁(yè)結(jié)構(gòu)和語(yǔ)義的方式。
CSS（層疊樣式表）是一種樣式語(yǔ)言，用于定義網(wǎng)頁(yè)的外觀和布局。它通過(guò)選擇器選擇HTML元素，并定義這些元素的樣式規(guī)則，如顏色、字體、邊距、背景等。CSS通過(guò)將樣式與內(nèi)容分離，使得樣式和內(nèi)容可以獨(dú)立管理和修改。
以下是HTML和CSS之間的幾個(gè)關(guān)鍵區(qū)別：
1、功能：HTML主要用于定義和組織網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容，而CSS用于定義網(wǎng)頁(yè)的外觀和布局。
2、語(yǔ)法：HTML使用標(biāo)簽和屬性來(lái)描述元素和其屬性，而CSS使用選擇器、屬性和值來(lái)定義樣式。
3、內(nèi)容 vs 樣式：HTML負(fù)責(zé)表示內(nèi)容，而CSS負(fù)責(zé)表示樣式。HTML確定了文本段落、標(biāo)題、圖像等的結(jié)構(gòu)和語(yǔ)義，而CSS確定了這些元素的視覺(jué)呈現(xiàn)方式。
4、分離性：HTML和CSS具有分離性，這意味著可以將樣式定義放在一個(gè)或多個(gè)CSS文件中，并通過(guò)鏈接或嵌入到HTML中。這種分離性使得修改樣式更加方便，同時(shí)也提高了代碼的可維護(hù)性和可重用性。
三、CSS語(yǔ)法
CSS的基本語(yǔ)法如下：
selector {
property: value;
/* more properties and values */
}
其中，選擇器用于選擇要應(yīng)用樣式的HTML元素，屬性（property）指定要設(shè)置的樣式屬性，值（value）指定該屬性的值。
例如，以下CSS代碼將使所有段落元素的文字顏色為紅色，并設(shè)置字體大小為16像素：
p {
color: red;
font-size: 16px;
}
在HTML文件中，可以通過(guò)將 <link> 標(biāo)簽放置在 <head> 中來(lái)引入外部CSS文件：
<html> <head> <link rel="stylesheet" href="styles.css" rel="external nofollow" rel="external nofollow" > </head> <body> <!-- HTML content --> </body> </html>
上述示例中，<link> 標(biāo)簽的 href 屬性指定了外部CSS文件的路徑，這里是 styles.css。
有三種方法可以將 CSS 規(guī)則添加到網(wǎng)頁(yè)：
- 內(nèi)聯(lián)樣式；
- 內(nèi)部樣式表；
- 外部樣式表。
在絕大多數(shù)情況下，應(yīng)使用外部樣式表。但是，在某些情況下，可能會(huì)使用內(nèi)聯(lián)樣式或內(nèi)部樣式表。
四、內(nèi)聯(lián)樣式
內(nèi)聯(lián)樣式應(yīng)用于特定的 HTML 元素。HTML 屬性用于定義僅適用于該特定元素的規(guī)則。下面介紹一下編寫(xiě)內(nèi)聯(lián)樣式的語(yǔ)法：
<h1 style="color:red; padding:10px; text-decoration:underline;">Example Heading</h1>
以上代碼將該標(biāo)題呈現(xiàn)為帶紅色下劃線(xiàn)的文本和所有邊距的 10 像素填充。在極少數(shù)情況下，應(yīng)使用內(nèi)聯(lián)樣式。在幾乎所有情況下，都應(yīng)該避免使用它們，并將樣式添加到樣式表中。
五、內(nèi)部樣式表
內(nèi)部樣式表是添加到 HTML 文檔元素的 CSS 塊。該元素在開(kāi)始標(biāo)記和結(jié)束標(biāo)記之間使用，并且所有 CSS 聲明都添加到標(biāo)記之間。
使用此語(yǔ)法在內(nèi)部樣式表中復(fù)制上述代碼中的內(nèi)聯(lián)樣式。
<head>
<style>
h1 {
color: red;
padding: 10px;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Example Heading</h1>
</body>
該代碼將產(chǎn)生與內(nèi)聯(lián)樣式相同的結(jié)果。但是，使用內(nèi)部樣式表而不是內(nèi)聯(lián)樣式的好處是頁(yè)面上的所有元素都將受到樣式的影響。
六、外部樣式表
外部樣式表是只包含 CSS 語(yǔ)句的文檔。通過(guò)使用 HTML 文檔元素中的標(biāo)記，文檔中定義的規(guī)則鏈接到一個(gè)或多個(gè) HTML 文檔。
要使用外部樣式表，首先要?jiǎng)?chuàng)建 CSS 文檔。
/*************************************************
Save with a name ending in .css such as styles.css
*************************************************/
h1 {
color: red;
padding: 10px;
text-decoration: underline;
}
現(xiàn)在我們有一個(gè)帶有一些樣式的外部樣式表，我們可以使用link元素將其鏈接到 HTML 文檔。
<head> <link rel="stylesheet" type="text/css" href="styles.css" rel="external nofollow" rel="external nofollow" > </head> <body> <h1>Example Heading</h1> </body>
加載此 HTML 文檔時(shí)，link 標(biāo)記將導(dǎo)致文件 styles.css 中的樣式加載到網(wǎng)頁(yè)中。因此，所有 1 級(jí)標(biāo)題元素都將顯示紅色文本，帶下劃線(xiàn)，并在每側(cè)應(yīng)用 10 像素的填充。
七、背景顏色
背景顏色屬性（background-color）定義一個(gè)元素的背景顏色：
<html> <body style="background-color:yellow;"> <h2 style="background-color:red;">This is a heading</h2> <p style="background-color:green;">This is a paragraph.</p> </body> </html>
八、文本對(duì)齊方式
使用text-align（文字對(duì)齊）屬性指定文本的水平與垂直對(duì)齊方式：
<html> <body> <h1 style="text-align:center;">Center-aligned heading</h1> <p>This is a paragraph.</p> </body> </html>
注意：文本對(duì)齊屬性 text-align 刪除了舊標(biāo)簽 <center> 。
