CSS語(yǔ)法
CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成:選擇器柏锄,以及一條或多條聲明。選擇器通常是您需要改變樣式的 HTML 元素。
selector {declaration1; declaration2; ... declarationN }
每條聲明由一個(gè)屬性和一個(gè)值組成。
屬性(property)是樣式屬性(style attribute)趾疚。每個(gè)屬性有一個(gè)值。屬性和值被冒號(hào)分開(kāi)以蕴。
selector {property: value}
例如下面這行代碼的作用是將 h1 元素內(nèi)的文字顏色定義為紅色糙麦,同時(shí)將字體大小設(shè)置為 14 像素。
在這個(gè)例子中丛肮,h1 是選擇器赡磅,color 和 font-size 是屬性,red 和 14px 是值宝与。
h1 {color:red; font-size:14px;}
引入CSS樣式
如何插入樣式表仆邓,當(dāng)讀到一個(gè)樣式表時(shí),瀏覽器會(huì)根據(jù)它來(lái)格式化 HTML 文檔伴鳖。插入樣式表的方法有三種:外部樣式表、內(nèi)部樣式表和內(nèi)聯(lián)樣式徙硅。
1.外部樣式表
當(dāng)樣式需要應(yīng)用于很多頁(yè)面時(shí)榜聂,外部樣式表將是理想的選擇。在使用外部樣式表的情況下嗓蘑,你可以通過(guò)改變一個(gè)文件來(lái)改變整個(gè)站點(diǎn)的外觀须肆。每個(gè)頁(yè)面使用 <link> 標(biāo)簽鏈接到樣式表。<link> 標(biāo)簽在(文檔的)頭部:
<head><link rel="stylesheet" type="text/css" href="site.css" /></head>
2.內(nèi)部樣式表
當(dāng)單個(gè)文檔需要特殊的樣式時(shí)桩皿,就應(yīng)該使用內(nèi)部樣式表豌汇。你可以使用 <style> 標(biāo)簽在文檔頭部定義內(nèi)部樣式表,就像這樣:
<head>
<style type="text/css">
p {margin-left: 20px;}
body {background-image: url("images/test.gif");}
</style>
</head>
(web前端學(xué)習(xí)交流群:328058344 禁止閑聊泄隔,非喜勿進(jìn)>芗)
3.內(nèi)聯(lián)樣式由于要將表現(xiàn)和內(nèi)容混雜在一起,即HTML代碼和CSS代碼混編,這樣會(huì)不利于文檔結(jié)構(gòu)逻澳,并且不容易維護(hù)闸天,所以一般不要使用這種方式引入樣式。例如改變段落的顏色和左外邊距:
<p style="color: red; margin-left: 20px;">
This is a paragraph
</p>