- 相關(guān)推薦
CSS-層疊樣式表基礎(chǔ)教程
層疊樣式表（Cascading Style Sheets，簡寫CSS），網(wǎng)頁可以使用CSS來決定文件的顏色、字體、排版等顯示特性。CSS最主要的目的是將文件的結(jié)構(gòu)和內(nèi)容（用HTML或其他相關(guān)的語言寫的）與文件的顯示樣式（CSS）分隔開來。比如HTML中H2標(biāo)志這一個二級標(biāo)題，它在級別上比一級標(biāo)題H1低，比三級標(biāo)題H3高，這個就是結(jié)構(gòu)上的信息。
HTML文件中的每一個class或id都可以有自己的顯示特征，而且每一個沒有id特性的HTML結(jié)構(gòu)也可以有自己的顯示特征。這些結(jié)構(gòu)有的是HTML自己需要的，有的是專門為CSS設(shè)置的。
使用CSS的優(yōu)點(diǎn)有：
1.一個整個網(wǎng)站或其中一部分網(wǎng)頁的顯示信息被集中在一個地方，要改變它們很方便；
2.不同的讀者可以有不同的樣式，比如有的讀者需要字體比較大；
3.HTML文件本身的范圍變小了，它的結(jié)構(gòu)簡單了，它不需要包含顯示的信息。
CSS信息可以來自：
1.作者樣式
�、僮髡呖梢栽贖TML文檔<head>標(biāo)簽中使用<link>標(biāo)簽調(diào)用獨(dú)立的外部樣式表（CSS文件）
�、谧髡呖梢詫SS信息內(nèi)嵌在HTML頁面內(nèi)（元素直接使用style屬性）
�、圩髡呖梢栽贖TML文檔<head>標(biāo)簽中定義嵌入式樣式表
�、茏髡呖梢灾苯釉贖TML頁面內(nèi)定義+調(diào)用樣式表
2.讀者樣式
�、葑x者可以在其瀏覽器內(nèi)設(shè)立一個地區(qū)性的CSS文件。這個CSS文件可以用在所有的HTML文件上
3.瀏覽器的樣式
�、藜偃缤獠繘]有特別指定一個樣式的話，一般瀏覽器自己有一個內(nèi)在的樣式。
其優(yōu)先級為：
內(nèi)嵌樣式（在HTML元素內(nèi)部）>
內(nèi)部調(diào)用樣式（在HTML元素周圍）>
內(nèi)部嵌入樣式表（位于<head>標(biāo)簽內(nèi)部）>
外部樣式表>（<link>調(diào)用調(diào)用外部樣式表）
區(qū)域性CSS文件>
瀏覽器缺省設(shè)置
一、CSS規(guī)則由兩個主要的部分構(gòu)成：選擇器，以及一條或多條聲明（屬性+值），也就是調(diào)用+定義。
1.元素選擇器，文檔的元素就是最基本的選擇器。
---------
<H2><font color="red" bgcolor="white"><i>使用CSS</i></font></H2>
上面的例子可以變成這樣：H2是選擇器，color和background是屬性，red和white是值（如果值為多個單詞，則要加引號）。
<H2>使用CSS</H2>
H2 { color: red; background: white; }
---------
2.ID選擇器，id選擇器以"#"來定義。
#red {color:red;}
<p id="red">這個段落是紅色。</p>
--------
3.類選擇器，類選擇器以一個點(diǎn)號顯示（類名的第一個字符不能使用數(shù)字）。
.center {text-align: center}
<h1 class="center">
This heading will be center-aligned
</h1>
4.屬性選擇器，對帶有指定屬性的HTML元素設(shè)置樣式。
下面的例子為帶有title屬性的所有元素設(shè)置樣式：
[title]
{
color:red;
}
5.p+CSS
p+css是一種常見的網(wǎng)頁布局方法。p是用來排版的，而css是用來定義p的樣式。p+css通常采用外鏈的方式來調(diào)用層疊樣式表文件（style.css），用id和class來標(biāo)識區(qū)分網(wǎng)頁中不同結(jié)構(gòu)的特征。
二、行內(nèi)樣式表
除在HTML內(nèi)直接「定義+調(diào)用」之外（如上1.2.3.4.），也可于HTML內(nèi)直接使用style屬性。
用style屬性設(shè)置顏色、字體和尺寸如下：
<html>
<body>
<h1 style = "font-family:verdana">文章標(biāo)題</h1>
<p style = "font-family:arial;color:red;font-size:20px;">文字內(nèi)容</p>
<p style="color:red; background:yellow; font-weight:bold;">
這個段落會被顯示為黃底紅字粗體。
</p>
</body>
</html>
1.網(wǎng)頁設(shè)計(jì)中常用的CSS屬性
文字或元素的顏色：color
字體：font-family
文字大�。篺ont-size
段落首行縮進(jìn)：text-indent（如「p {text-indent: 5em;}」）
文本對齊方式：text-align（如「text-align:center」）
背景顏色：background-color
背景圖像：background-image
列表樣式：list
鼠標(biāo)樣式：cursor
邊框樣式：border
內(nèi)補(bǔ)白：padding
外邊距：margin
2.縮寫規(guī)則
①顏色縮寫：16進(jìn)制的色彩值，如果每兩位的值相同，可以進(jìn)行縮寫，例如：
000000可以縮寫為#000，#336699可以縮寫為#369;
�、谶吙蚩s寫
邊框的屬性如下：
border-width: 1px;
border-style: solid;
border-color: #000;
可以縮寫為一句：border: 1px solid #000;
③背景縮寫
background-color: #F00;
background-image: url(background.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;
可以縮寫為一句：background: #F00 url(background.gif) no-repeat fixed 0 0;
�、芎喜⑾嗤瑢傩缘脑�
所有的標(biāo)題元素都是綠色的，可以這樣縮寫：
h1,h2,h3,h4,h5,h6 {
color: green;
}
三、使用<head>植入樣式表
還可以使用<style>...</style>標(biāo)記在HTML文檔中定義嵌入式樣式表，該標(biāo)記必須放在<head>與</head>標(biāo)記之間。
<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>
<body>
<h1>Header-1</h1>
<p>This is a paragraph.</p>
</body>
</html>
四、使用 <link> 標(biāo)簽鏈接調(diào)用外部樣式表
HTML和CSS將網(wǎng)頁文件的結(jié)構(gòu)、內(nèi)容與顯示樣式分隔開來，這里正是樣式表功能發(fā)揮優(yōu)勢的地方。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
p+CSS
p+css是一種常見的網(wǎng)頁布局方法。p是用來排版的，而css是用來定義p的樣式。p+css通常采用外鏈的方式來調(diào)用層疊樣式表文件（style.css），用id和class來標(biāo)識區(qū)分網(wǎng)頁中不同結(jié)構(gòu)的特征。
隨著HTML5的到來，無處不在的<p id="header">和<p id="footer">傳統(tǒng)代碼方法，將變成標(biāo)簽<Header>和<footer>。
【CSS-層疊樣式表基礎(chǔ)教程】相關(guān)文章：
美甲基礎(chǔ)教程06-21
聲樂的入門基礎(chǔ)教程08-23
肚皮舞基礎(chǔ)教程05-25
PHP入門基礎(chǔ)教程大全08-30
紋繡入門基礎(chǔ)教程08-10
繪畫基礎(chǔ)教程:葫蘆的畫法步驟06-06
爵士舞的基礎(chǔ)教程步驟10-21