CSS基礎認識

CSS基礎認識

CSS由來 CSS是「Cascading Style Sheets」的縮寫，Cascading是串接、連接之意；Style則是風格、款式之意；Sheets則是一頁紙、表的意思。 所以呢，要以中文來解釋CSS的話呢，您可以稱之為「串接樣式表」。 很奇怪的一串名詞是否？其實，當您CSS用習慣後，您就會發覺它會這樣被稱呼還蠻貼切的。 CSS的作用 CSS能夠使你的網頁更整齊，它可控制網頁中的字型.字體.大小.連結.表格.圖片....等。 需要的工具 編輯CSS不需要任何工具，只要你有記事本就可以編輯了，當然有更好的網頁編輯軟體也是一各相當不錯的幫手。

插 入 c s s

插入CSS語法 是告訴瀏覽器，從此段開始都為CSS語法，而要插入CSS語法， 都在網頁中的..和..之間 例如以下方式 .....網頁內容 外部呼叫指令 要在網頁插入CSS也可以用到外部呼叫的指令 匯入指令 以另外一種方式，也就是直接將CSS檔案匯入在網頁中。

網 頁 標 籤

了解網頁標籤 所謂的標籤，其實是很簡單的，別想的太難， 網頁標籤中都含有 而 html head body 這三種就是一般的網頁型態格式 當然也是常見的標籤 而 font 就是控制字體 b 為粗體 a 就是常用的超連結 以上大概簡略以上常見到網頁的標籤 CSS其實很簡單 只要你懂得網頁的標籤 你就可以靈活應用操作CSS 所謂標籤跟定義該標籤的內容...簡單的說就如下 改變字體大小 今天若我想在我的網頁中所有的文字都為9pt 那麼當然都用到最常用到的幾種標籤 以 為例 若我要宣告 和 的字體都為9pt 那麼...我可以如以下寫法 改變字體顏色 改變body標籤的字體顏色，寫法如下 改變字型 改變body標籤的所有字型，寫法如下

應 用 連 結

一般超連結 此為一般超連結的顏色，色碼可依自己喜好調整。 碰觸超連結 碰觸超連結，也就是當你的滑鼠游標移動到超連結上以後，他會產生何種顏色，以下色碼可依自己喜好調整。 執行超連結 執行超連結，就是你的滑鼠按下超連結以後，他會產生何種顏色，以下色碼可依自己喜好調整。 執行後的超連結 執行後的超連結，一個已經按過的連結，他所產生的顏色，色碼可依自己喜好調整。

宣 告 方 法

宣告方法 所謂的宣告方法，其實就是設定該標籤的定義內容，而宣告當然以網頁標籤來作宣告囉， 例如....我想要我的網頁中的文字大小為9pt 而顏色色碼要為 #000000 但是此時...我還沒有說明我要定義哪種標籤， 如果我選擇的標籤為 table table ← 這是什麼呢？ table它是表格的開頭 如果我要宣告他所有文字大小都為 9pt 色碼為 #000000 的話 我可以如下方式寫 第一次看到這個也許不知道是什麼意思 其實他的意思很簡單 也就是網頁中 ..之間.. 中的文字 都為 9pt大小 而顏色代碼為 #000000 的意思 如果上述還不懂，就拿以下的簡單表格表單來作示範， 歡迎光臨 上面這段簡單的表格表單就是再歡迎光臨的外圍會有一個邊框表格， 而若我用了上述的CSS定義宣告table的文字大小 簡單的說..就是歡迎光臨這四個字會變成大小9pt 顏色代碼為 #000000的意思 看到這裡如果懂了，那麼你對CSS的了解又更深一步囉。

多 項 定 義

多項定義 多項定義呢，也就是如果我有許多設定要再同一個標籤中， 例如我以 body 這標籤來作定義， 我要和包起來的文字大小.顏色.字型統一改變的話， 而我要的大小為9pt 色碼為 #333333 字型為 新細明體 那麼寫法如下方式： 在這裡要注意的是..!! 在CSS區分各種標籤定義時，都要以 ; 來作區分 而被定義的內容都要以{ 跟 }來作才行 簡單的說，就是這樣子：

分 項 宣 告

分項宣告 分項宣告就是網頁中同一種標籤，但卻分成兩次來宣告，例如以下： 如果各位對前面的幾篇教學都有認真看的話 這裡應該都難不倒各位了 也就是被和包住的文字大小為9pt 而顏色色碼為#000000 那麼在這裡的分項宣告，其實就以上面的寫法， 他對了body標籤做了兩次的宣告 但其實所得到的結果還是跟以下的寫法一樣的： 所謂的分項宣告 就是同一種網頁標籤分成兩次.或好幾次以上的宣告方式。 先後順序 若我有同樣的標籤，而宣告內容有重複的，或是不一樣的定義內容，例如以下： 以上寫法都是定義body標籤的文字顏色，但色碼卻不同， 那麼哪一宣告會被成立呢，答案為後者， 也就是 body{color:#999999} 會被成立 在CSS寫法中若有相同而設定值不同的都以後者來執行的。

單 向 定 義

單向定義 單項定義，也就是將CSS的定義內容直接寫在標籤裡頭，以下列為示範： 網頁標籤 這是一個文字粗體標籤，也就是被和包起來的文字 都會變成粗體文字，那麼如果我要定義他的大小為9pt 一般CSS的用法則為： 這樣網頁中所有被和包起來的文字就都為粗體而且為9pt的大小了， 那麼..單項定義的寫法呢....？ 單項定義的寫法很簡單，就如以下： 我是粗體文字大小為9pt 所謂單項定義，就是你針對網頁中的標籤設定他的值， 而也只有被設定的標籤才會產生作用。 注意 如果網頁上有兩個定義，如下：

標 籤 定 義

標籤定義 多樣標籤定義意思就是，再網頁中有許多的標籤要定義為一種內容， 簡單來說就是把許多標籤設定為一種樣式的意思， 現在各位若懂了什麼是標籤，那這裡就難不倒你的， 在網頁中，要宣告五種標籤，要讓他都為同一種設定， 以下面五種標籤來說： 要以上五種標籤將他設定為 9pt的大小文字 色碼 #666666 字型為新細明體 若以上方所需要的要球，可以如以下這樣寫： 注意 要同時一次定義多種網頁標籤的時候， 各種標籤要以 , 來做區分哦！！ 不然CSS是沒辦法執行的，以及各種內容定義也要以 ; 來區分才行 CSS寫法中是沒有 = " ' 這幾種設定html語法的代碼 在CSS中 = 要以 : 來寫才行 而 " ' 這種代碼出現在CSS中是不正確的寫法。 　 捲 軸 色 系 捲軸色系 必須 IE5.5 以上版本才能正確顯示， 屬性說明 scrollbar-face-color ： 捲軸表面的顏色。 scrollbar-highlight-color ： 捲軸邊界的顏色。 scrollbar-shadow-color ： 捲軸陰影的顏色。 scrollbar-3dlight-color ： 捲軸3D立體的顏色。 scrollbar-arrow-color ： 捲軸上下箭頭的顏色。 scrollbar-track-color ： 捲軸底部軌道的顏色。 scrollbar-darkshadow-color ： 捲軸第二層陰影的顏色。 　 網 頁 文 字 文字顏色 文字大小 文字字型 文字粗體 文字斜體 文字置中 多項寫法技巧 以上面幾段語法來寫，如果要用很多種的話，要如何寫比較好呢， 有的人如果要改變文字顏色跟大小及文字置中 可能就如以下這樣貼吧： 其實以上面這樣的效果，可以如以下寫法： 看到哪裡不同了嗎？ 原本長長的好幾段只要縮成這樣就能辦到了， 我們只要記住我們宣告的標籤 因為上述的CSS都是宣告body標籤，那麼我們就可以這樣寫， 而每項的定義內容，只要以 ; 就可以了， 而 再網頁中只要出現一次， 就可以達到CSS的要求了，不需要如上面那段重複複製貼上了好幾次， 如果你懂得如何去改以後，CSS你就可以隨心所欲的寫囉， 只要記住屬性就行了。 　 指 標 圖 示 指標圖示 必須 IE6.0 以上版本才能正確顯示， 禁止指標 必須 IE6.0 以上版本才能正確顯示， 範例：把滑鼠移過來 全部選取指標 必須 IE6.0 以上版本才能正確顯示， 範例：把滑鼠移過來 　 碰 觸 產 效 出現底線 出現刪除線 出現頂線 頂線及底線 頂線.底線.刪除 動態偏移 字體大小 產生邊框 產生虛線邊框 產生上下虛框 產生左右虛框 產生底色 產生背景 變為粗體 變為斜體 改變指標 指標圖示 　 按 鈕 產 效 文字顏色 文字大小 改變邊框 改變底色 產生背景 虛線邊框 改變字型 改為斜體 改為粗體 改變指標 指標圖示 　 滑 鼠 指 標 手狀 十字 I狀 沙漏 ?狀 四處指 往上指 往下指 往左指 往右指 左上指 左下指 右上指 往下指 原始指標

本著作係採用創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣 授權條款授權.