網頁教程：CSS中文教程

2024-07-11 08:24:08

字體：大中小

來源：轉載

供稿：網友

CSS--層疊樣式表

　　什么是CSS?
　　中文翻譯為樣式表! 它的作用簡單的說：就是可以使你在同一頁面里使用不同的超鏈接樣式。
　　更神奇的是，用CSS，僅僅改變一個文件就可以改變數百個網頁的外觀......個性化的表現而不損失訪問者......所有這些都因為網頁樣式表的強大和靈活特性。
　　讓我們開始吧！

CSS 速成

　　一個樣式表由樣式規則組成, 以告訴瀏覽器怎樣去呈現一個文檔. 有很多將樣式規則加入到你的HTML文檔中的方法, 但最簡單的啟動方法是使用HTML的STYLE組件. 這個元素放置于文檔的HEAD部分, 包含網頁的樣式規則.

　　要注重到盡管STYLE元素是試驗樣式表的好方法, 它具有某些在用戶使用這種方法之前應該考慮的缺點. 不同方法的優點和缺點在將樣式表加入到HTML中部分中有討論。

　　每個規則的組成包括一個選擇符--通常是一個HTML的元素, 例如BODY, P, 或EM--和該選擇符所接受的樣式.

　　有很多的屬性可以用于定義一個元素. 每個屬性帶一個值, 共同地描述選擇符應該如何呈現.

樣式規則組成如下:

選擇符 { 屬性: 值 }
單一選擇符的復合樣式聲明應該用分號隔開:

選擇符 { 屬性1: 值1; 屬性2: 值2 }

以下是一段定義了H1和H2元素的顏色和字體大小屬性:

上述的樣式表告訴瀏覽器用加大、紅色字體去顯示一級標題, 用大、藍色字體去顯示二級標題. CSS1 規格正式地定義了所有的有效屬性和值. 屬性和值在本網站的CSS 屬性部分也給出了.

本教程專門介紹了CSS非常基礎的知識, 以提供足夠的信息去讓你試驗自己的樣式. 要獲得CSS更深入的知識, 閱讀繼續閱讀以下部分:

CSS 結構和規則
CSS 屬性
將樣式表加入到HTML中

CSS 結構和規則

基本語法

規則
選擇符
任何HTML元素都可以是一個CSS1的選擇符。選擇符僅僅是指向非凡樣式的元素。例如，

P { text-indent: 3em }
當中的選擇符是P。

類選擇符
單一個選擇符能有不同的CLASS(類)，因而答應同一元素有不同樣式。例如，一個網頁制作者也許希望視其語言而定，用不同的顏色顯示代碼 :

code.html { color: #191970 }
code.css { color: #4b0082 }
以上的例子建立了兩個類，css和html，供HTML的CODE元素使用。CLASS屬性是用于在HTML中以指明元素的類，例如，

每個選擇符只答應有一個類。
例如，code.html.proprietary是無效的。

類的聲明也可以無須相關的元素:

.note { font-size: small }
在這個例子，名為note的類可以被用于任何元素。

一個良好的習慣是在命名類的時候，根據它們的功能而不是根據它們的外觀。上述例子中的note類也可以命名為small，但假如網頁制作者決定改變這個類的樣式，使得它不再是小字體的話，那么這個名字就變得毫無意義了。

ID 選擇符
ID 選擇符個別地定義每個元素的成分。這種選擇符應該盡量少用，因為他具有一定的局限。一個ID選擇符的指定要有指示符"#"在名字前面。例如，ID選擇符可以指定如下:

#svp94O { text-indent: 3em }
這點可以參考HTML中的ID屬性:

文本縮進3em

關聯選擇符
關聯選擇符只不過是一個用空格隔開的兩個或更多的單一選擇符組成的字符串。這些選擇符可以指定一般屬性，而且因為層疊順序的規則，它們的優先權比單一的選擇符大。例如，以下的上下文選擇符