CSS樣式表代碼怎么寫?
CSS樣式表是用于描述HTML元素在網(wǎng)頁(yè)上的顯示樣式的代碼,通過(guò)CSS樣式表,我們可以輕松地控制網(wǎng)頁(yè)上各種元素的樣式,如顏色、字體、大小等。
CSS樣式表代碼的基本結(jié)構(gòu)如下:
1、規(guī)則集:每個(gè)規(guī)則集定義了一個(gè)CSS規(guī)則,用于描述一個(gè)或多個(gè)HTML元素應(yīng)該如何顯示,規(guī)則集由選擇器和聲明塊組成。
2、選擇器:用于選擇需要應(yīng)用樣式的HTML元素,選擇器可以是元素名稱、類名、ID等。
3、聲明塊:包含一組聲明,每個(gè)聲明定義了一個(gè)CSS屬性及其值,聲明塊用大括號(hào)括起來(lái)。
以下CSS樣式表代碼將應(yīng)用于所有段落元素(<p>
),使其文本顏色為藍(lán)色(#0000FF
),字體大小為16像素(16px
):
p { color: #0000FF; font-size: 16px; }
在HTML文件中,可以通過(guò)以下方式引入CSS樣式表代碼:
1、內(nèi)聯(lián)樣式:將CSS樣式表代碼直接寫在HTML元素的style
屬性中。
2、內(nèi)部樣式表:將CSS樣式表代碼寫在HTML文件的<head>
部分中,使用<style>
標(biāo)簽包裹起來(lái)。
3、外部樣式表:將CSS樣式表代碼寫在單獨(dú)的.css
文件中,并在HTML文件中使用<link>
標(biāo)簽引入。
以下HTML文件引入了名為styles.css
的外部樣式表:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <p>這是一個(gè)段落。</p> </body> </html>
在styles.css
文件中,可以定義多個(gè)規(guī)則集來(lái)控制不同元素的樣式:
p { color: #0000FF; font-size: 16px; } h1 { color: #FF0000; font-size: 32px; }
通過(guò)以上方式,我們可以輕松地控制網(wǎng)頁(yè)上各種元素的樣式,打造出符合設(shè)計(jì)要求的網(wǎng)頁(yè)界面。