|
CSS (Cascading Style Sheet)
CSS 教學
文章回顧:XHTML (Extensible HyperText Markup Language) 教學
參考來源:http://home.kimo.com.tw/darch2002000/css.HTML 最後修正:2007-08-07 資料修正:Linux0911 轉載請註明來源:http://linux0911.no-ip.info/my_style/doc/css/
CSS 是甚麼? 可以吃嗎??
簡單來講,就是為您的網頁上色的意思! (夠簡單明瞭)
以下的整理資料都是很常用的語法,請多多善用 CSS 來搭配 XHTML
資料很多:善用 ctrl + f 來搜尋關鍵字!
何謂 CSS 語法?
CSS 的全名是 Cascading Style Sheet,中文名稱為樣式表。其實它跟 HTML 語法相當的類似
用最基本的文字編輯器(例如記事本)就可以完成,如果你對 HTML 已經有相當的基礎
CSS 將是最佳配角,因為它可以配合 HTML 甚至 JavaScript 來達到多種的效果。
它的主要特色就是排版的效果,在 HTML 語法中,常需要使用到一些設定顏色、文字大小、框線粗細等等這一類的標籤
而 CSS 就是希望在開頭的地方就將這些設定給做好,不需要再反覆輸入同樣的標籤,整個網頁就會套用這個設定來呈現
不但讓網頁大大的減肥,也能降低將來維護網頁的困難度。
它唯一的缺點,就是瀏覽器的支援程度,編寫網頁最頭痛的地方就是,使用不同的瀏覽器看同一個網頁
往往會有不同的結果,CSS 在這方面比 HTML 還要嚴重,所以在使用 CSS 的時候要特別注意
不同的瀏覽器是否都能支援你的語法? 至少IE 跟 Firefox 都要正常顯示,這才是最高境界。
--------------------------------------------------------------------------------------------
如何加入 CSS 語法
在 XHTML 那篇文章我們提到 XHTML 的標準格式中有提到
呼叫 CSS 的語法是這樣寫的:
<link type="text/css" rel="stylesheet" href="CSS 放置處.css" />
意思就是先把 .css 檔案的位置先指定出來,通常放在 </head> 上面就 ok 了
1、直接定義在原有的 HTML 標籤內,利用 style,例如將語法加入原有標籤 <span> 內
寫法:
<span style="CSS 語法">
在上面範例提到的 CSS 語法就是接下來幾章要介紹的,他每一個參數都有相對應的功能
對於不同功能的參數,我們就用分號 ; 分開
寫法:
<span style="font-size: 20px; font-weight: bold">
經過這樣的設定,夾在 <span>...</span> 這個標籤內文字的樣式,就會依照設定來呈現。
2、在 <head> 與 </head> 之間宣告
(1) 依附標籤
寫法:
span {
CSS 語法
}
往後我們只要一使用到 <span> 這個標籤,設定將自動被套用。
如果要套用到很多個標籤的話,只要用逗號 , 分開就可以了
例如:
span, td, h1 {
CSS 語法
}
往後我們只要一使用到 <span>、<td>、<h1> 這些標籤,設定將自動被套用。
(2) 先給名字再呼叫
舉例來說:
.title {
CSS 語法
}
我們已經將設定命名為 title 了,那想套用的時候,就用 class 呼叫它。
呼叫:
<span class="title">
該 <span>...</span> 標籤內的所有元件,將會套用名字叫做 title 的設定。
(3) 先給名字再呼叫 (id)
舉例來說:
#title {
CSS 語法
}
我們已經將設定命名為 title 了,那想套用的時候,就用 id 呼叫它。
呼叫:
<span id="title">
--------------------------------------------------------------------------------------------
重要標籤
在開始介紹這一章之前,必須先跟大家介紹一下在 HTML 語法中提到兩個重要的標籤
<div> ... </div>
<span> ... </span>
這兩組對應標籤的目的,都是為了讓夾在裡面的元件被定義成一個區塊,被定義成一個區塊有什麼好處呢?
我可以配合很多 CSS 語法,來對這個區塊進行設定,例如設定這個區塊的底色,為這個區塊加上框線等等。
一些原本不能加上底色、框線的元件,例如文字,經過定義後,我們就可以對它為所欲為。
雖然這兩個標籤的功能一樣,不過使用上還是有不同之處。被定義在 <div> 之間的元件,會自動斷行
而 <span> 則不會斷行,也就是上下文仍然在其左右。
舉例說明:
這是
|
|
2004-2009 © All Rights Reserved by Linux0911 My Style Site. Site Version: 8.5.5, Last Updated: 2009-10-15. Site Valid W3C: XHTML 1.0 Strict, Valid CSS. Resolution Recommended: No Lower than 1024. (Best 1280+) Site Maps |

