關於CSS

CSS 在 HTML5 扮演粉飾應用程式外觀的關鍵角色,當網頁的內容定義完成,你還必須透過 CSS 調整並建立其外觀,將純粹的 HTML 標籤定義,轉換為使用者可以理解的應用程式介面。CSS 是一種樣式語法,根據所要呈現的外觀作設定,它由一組或一組以上的 key/value 樣式項目語法進行設定,如下式:

key:value

這是單一的 CSS 樣式設定,其中的 key 表示所要指定的樣式項目名稱, value 則是此樣式項目的值,兩者以 : 連接。既使最簡單的網頁,你也很難只用一組 CSS 搞定外觀的設計工作,因此通常會需很多組樣式項目,而超過一組以上的樣式,必須以 ; 隔開,如下式:

key1:value1;key2:value2;

其中的 key1/value1 為第一組樣式,而第二組 key2/value2 則是第二組項目,最後的 ; 可以省略,如果還有更多的項目,依此類推作設定即可。瞭解語法的格式之後,接下來我們來看看 CSS 的實際設定,考慮以下的語法:

color:white; 

這一組樣式項目表示將以白色呈現文字,再來看以下的另外一行設定:

color:white;background:black; 

這一組樣式項目表示除了以白色呈現文字,再以黑色呈現背景。決定所要設定的 CSS 項目之後,接下來就是將此樣式套用至指定的標籤,假設畫面上有一個按鈕,我們要將其設定為黑底白字,只要將上述的樣式項目,設定給按鈕的 style 屬性即可,語法如下:

<button style="color:white;background:black;" > 

這一行設定將兩組樣式項目字串包裝在兩個雙引號當中,指定給 style 屬性,如此一來按鈕就會以黑底白字的外觀呈現。


未設定 style
<button >Say Hello</button>



設定 style
<button style="color:white;background:black;" >Say Hello</button>



如你所見,經過樣式的設定,我們就能夠以指定的外觀在網頁上呈現按鈕的外型,當然這只是最簡單的樣式設定, CSS 的功能相當強大,甚至可以呈現動畫效果,我們後續的文章繼續作說明。


沒有留言: