CSS-層疊樣式表基礎教程

時間：2024-08-10 05:17:33 CSS

CSS-層疊樣式表基礎教程

　　層疊樣式表（Cascading Style Sheets，簡寫CSS），網頁可以使用CSS來決定文件的顏色、字體、排版等顯示特性。CSS最主要的目的是將文件的結構和內容（用HTML或其他相關的語言寫的）與文件的顯示樣式（CSS）分隔開來。比如HTML中H2標志這一個二級標題，它在級別上比一級標題H1低，比三級標題H3高，這個就是結構上的信息。

　　HTML文件中的每一個class或id都可以有自己的顯示特征，而且每一個沒有id特性的HTML結構也可以有自己的顯示特征。這些結構有的是HTML自己需要的，有的是專門為CSS設置的。

　　使用CSS的優點有：

　　1.一個整個網站或其中一部分網頁的顯示信息被集中在一個地方，要改變它們很方便；

　　2.不同的讀者可以有不同的樣式，比如有的讀者需要字體比較大；

　　3.HTML文件本身的范圍變小了，它的結構簡單了，它不需要包含顯示的信息。

　　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; }

　　---------

　　2.ID選擇器，id選擇器以"#"來定義。

　　#red {color:red;}

　　<p id="red">這個段落是紅色。</p>

　　--------

　　3.類選擇器，類選擇器以一個點號顯示（類名的第一個字符不能使用數字）。

　　.center {text-align: center}

　　This heading will be center-aligned

　　</h1>

　　4.屬性選擇器，對帶有指定屬性的HTML元素設置樣式。

　　下面的例子為帶有title屬性的所有元素設置樣式：

　　[title]

　　{

　　color:red;

　　}

　　5.p+CSS

　　p+css是一種常見的網頁布局方法。p是用來排版的，而css是用來定義p的樣式。p+css通常采用外鏈的方式來調用層疊樣式表文件（style.css），用id和class來標識區分網頁中不同結構的特征。

　　二、行內樣式表

　　除在HTML內直接「定義+調用」之外（如上1.2.3.4.），也可于HTML內直接使用style屬性。

　　用style屬性設置顏色、字體和尺寸如下：

　　<html>

　　<body>

　　這個段落會被顯示為黃底紅字粗體。

　　</p>

　　</body>

　　</html>

　　1.網頁設計中常用的CSS屬性

　　文字或元素的顏色：color

　　字體：font-family

　　文字大小：font-size

　　段落首行縮進：text-indent（如「p {text-indent: 5em;}」）

　　文本對齊方式：text-align（如「text-align:center」）

　　背景顏色：background-color

　　背景圖像：background-image

　　列表樣式：list

　　鼠標樣式：cursor

　　邊框樣式：border

　　內補白：padding

　　外邊距：margin

　　2.縮寫規則

　　①顏色縮寫：16進制的色彩值，如果每兩位的值相同，可以進行縮寫，例如：

　　000000可以縮寫為#000，#336699可以縮寫為#369;

　　②邊框縮寫

　　邊框的屬性如下：

　　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;

　　④合并相同屬性的元素

　　所有的標題元素都是綠色的，可以這樣縮寫：

　　h1,h2,h3,h4,h5,h6 {

　　color: green;

　　}

　　三、使用<head>植入樣式表

　　還可以使用<style>...</style>標記在HTML文檔中定義嵌入式樣式表，該標記必須放在<head>與</head>標記之間。

　　<html>

　　<head>

　　h1 {color:red}

　　p {color:blue}

　　</style>

　　</head>

　　<body>

　　<h1>Header-1</h1>

　　<p>This is a paragraph.</p>

　　</body>

　　</html>

　　四、使用 <link> 標簽鏈接調用外部樣式表

　　HTML和CSS將網頁文件的結構、內容與顯示樣式分隔開來，這里正是樣式表功能發揮優勢的地方。

　　<head>

　　</head>

　　p+CSS

　　隨著HTML5的到來，無處不在的<p id="header">和<p id="footer">傳統代碼方法，將變成標簽<Header>和<footer>。

【CSS-層疊樣式表基礎教程】相關文章：