CSS-層疊樣式表基礎教程

來源：文萃谷 4.45K

　　層疊樣式表（Cascading Style Sheets，簡寫CSS），網頁可以使用CSS來決定文件的顏色、字體、排版等顯示特性。CSS最主要的目的是將文件的結構和內容（用HTML或其他相關的語言寫的）與文件的顯示樣式（CSS）分隔開來。比如HTML中H2標誌這一個二級標題，它在級別上比一級標題H1低，比三級標題H3高，這個就是結構上的信息。　　HTML文件中的每一個class或id都可以有自己的顯示特徵，而且每一個沒有id特性的HTML結構也可以有自己的顯示特徵。這些結構有的是HTML自己需要的，有的是專門為CSS設置的。　　使用CSS的優點有：　　1.一個整個網站或其中一部分網頁的顯示信息被集中在一個地方，要改變它們很方便；　　2.不同的讀者可以有不同的樣式，比如有的讀者需要字體比較大；　　文件本身的範圍變小了，它的結構簡單了，它不需要包含顯示的信息。　　CSS信息可以來自：　　1.作者樣式　　①作者可以在HTML文檔<head>標籤中使用<link>標籤調用獨立的外部樣式表（CSS文件）　　②作者可以將CSS信息內嵌在HTML頁面內（元素直接使用style屬性）　　③作者可以在HTML文檔<head>標籤中定義嵌入式樣式表　　④作者可以直接在HTML頁面內定義+調用樣式表　　2.讀者樣式　　⑤讀者可以在其瀏覽器內設立一個地區性的CSS文件。這個CSS文件可以用在所有的'HTML文件上　　3.瀏覽器的樣式　　⑥假如外部沒有特別指定一個樣式的話，一般瀏覽器自己有一個內在的樣式。　　其優先級為：　　內嵌樣式（在HTML元素內部）>　　內部調用樣式（在HTML元素周圍）>　　內部嵌入樣式表（位於<head>標籤內部）>　　外部樣式表>（<link>調用調用外部樣式表）　　區域性CSS文件>　　瀏覽器缺省設置　　一、CSS規則由兩個主要的部分構成：選擇器，以及一條或多條聲明（屬性+值），也就是調用+定義。　　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; }　　---------　　選擇器，id選擇器以"#"來定義。　　#red {color:red;}　　<p id="red">這個段落是紅色。</p>　　--------　　3.類選擇器，類選擇器以一個點號顯示（類名的第一個字符不能使用數字）。　　er {text-align: center}　　<h1 class="center">　　This heading will be center-aligned　　</h1>　　4.屬性選擇器，對帶有指定屬性的HTML元素設置樣式。　　下面的例子為帶有title屬性的所有元素設置樣式：　　[title]　　{　　color:red;　　}　　5.p+CSS　　p+css是一種常見的網頁佈局方法。p是用來排版的，而css是用來定義p的樣式。p+css通常採用外鏈的方式來調用層疊樣式表文件（），用id和class來標識區分網頁中不同結構的特徵。　　二、行內樣式表　　除在HTML內直接「定義+調用」之外（如上.），也可於HTML內直接使用style屬性。　　用style屬性設置顏色、字體和尺寸如下：　　<html>　　<body>　　<h1 style = "font-family:verdana">文章標題</h1>　　<p style = "font-family:arial;color:red;font-size:20px;">文字內容</p>　　<p style="color:red; background:yellow; font-weight:bold;">

樣式表 CSS 基礎教程層疊