何謂CSS
- 文章分類: 學CSS
- 9/28/2010
HTML是把用來構成網頁內文的資料以文字編排的方式標示、作成網頁本身的架構,而CSS則是負責將編排好的HTML內容以不同形式、外貌透過網頁的格式呈現出來。
CSS可以決定網頁的顏色、字體、排版等,對內容進行各種美化。CSS最主要的目的是將網頁的結構(HTML)與網頁的視覺顯示(CSS)分隔開來。
- 網頁結構的可讀性被加強
- 網頁結構的結構更加靈活
- 使用者可以自行決定文件如何顯示
- HTML文件的結構簡化
這個分隔有許多好處
HTML文件中的每一個class或id都可以有自己的顯示特徵,而且每一個沒有id特性的HTML結構也可以有自己的顯示特徵。這些結構有的是HTML本身需要的,有的是專門為CSS設置的。
CSS信息可以來自
- 設計者可以將HTML文件和CSS分開獨立編寫
- 設計者可以將CSS編寫在HTML內容內
- 設計者可以在一個HTML內結合CSS,這樣做一般是為了在一個特殊情況下將總體的CSS指令抵消掉,為其建立一個獨立的樣式。
作者樣式
讀者樣式
設計者可以在HTML內套用一個全面的CSS文件。這個CSS文件可適用於所有的HTML文件上,為網站整體建立統一的美術樣式。
瀏覽器的樣式
假如外部沒有特別指定CSS樣式的話,一般瀏覽器都有自己的預設樣式。
使用CSS的優點有
樣式規則
CSS的語法很簡單,它使用一組英文語法來表示不同的樣式和特徵。一個式樣表由一組規則組成。每條規則由一個「選擇器(#id、.class)」和一組定義部分組成。
每個定義部分包含一組由分號(;)分離的定義。這組定義放在一對大括弧({ })之間,由一個特性,一個半形冒號(:)和一個值組成。
例如:p {margin:0px; padding:0px; padding:5px;}
選擇器 Selector
通常為檔中的元素,具有各自的功能性,如HTML中的<p>、<strong>等標籤,多個選擇器可以半形逗號(,)隔開。
屬性 property
CSS1、CSS2、CSS3規定了許多的屬性,目的在控制選擇器的樣式。
值 value
指屬性接受的設定值,可由各種關鍵字(keyword)組成,多個關鍵字時大都以空格隔開。
要針對沒有標籤定義範圍進行樣式設定時,可利用<div>與<span>標籤。
p{ font-size:110%; font-family:garamond, sans-serif;} h2{ color:red; background; white; } .highlight{ color:#FFDD55; background-color:#355077;; font-weight:bold; }
在這個例子中有三個選擇器:p、h2和.highlight,color: red是一個定義,其中color是特性,red是color的值。
在這裡HTML中的結構 P(段落)和 H2(2級標題)獲得了不同的樣式。每個段落的字體的大小比包含這個段落的結構的字體的大小要大10%,字型使用Garamond,假如Garamond
沒有的話那麼使用一般的sans-serif字型 。2級標題的字用紅色,底面是白色的。這個例子中的第三個規則規定了一個class的樣式。通過
class屬性每個HTML結構都可以被指定為這個樣式,例如:
<table cellspacing="0" cellpadding="0"
width="100%" border="0"> <tbody> <tr> <td> <div> <p class="highlightword"> 這個段落將被顯示為藍底黃字粗體。 </p> </div> </td> </tr> </tbody> </table>
這個段落將被顯示為藍底黃字粗體。