css入門

CSS總共有3種寫入的方式

分為 外部樣式表 內勘樣式表 內部樣式

由於Yahoo很討厭本團實力 所以以下特別用空白空開標籤不然它會當html = =

首先我們生一個html檔案 檔案程式如下 取檔名為 test.htm
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >
< title >無標題文件< /title >
< /head > < body >
< div >hi hi hi hi hi< /div >
< /body >
< /html >

外部樣式表 :
就字面上的字解釋 就是說 這個 CSS 跟你的檔案 並不是同一個
是從外部檔案導入的
就稱為外部樣式
也就是說 我們把寫好的 css 檔案 存成一個 .css 文件用導入的方式 放近 test.htm 中
假設這個 css 文件為 hello.css

那我們在 test.htm 中
在 < head >< /head >之間 寫入這一句
< link rel="stylesheet" type="text/css" href="hello.css" / >

這樣 test.htm 應該要變長這樣

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns="http://www.w3.org/1999/xhtml" >
< head>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >
< title>無標題文件< /title >
< link rel="stylesheet" type="text/css" href="hello.css" / >
< /head >
< body >
< div >hi hi hi hi hi< /div >
< /body >
< /html >

內勘樣式表 :
很容易猜到 這個應該就是要寫在 test.htm 當中吧
沒錯 這是利用 html 中的 style 標籤來告訴 瀏覽器 我的 css 規則
記得一樣是要寫在 之間ㄛ
寫在那邊呢 ??

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >
< title >無標題文件< /title >
< style tyle="text/css" >
/*本檔案所有的css都可以寫在這邊 在DW中是呈現粉紅色的字*/
< /style >
< /head >
< body >
< div >hi hi hi hi hi< /div >
< /body >
< /html >

內部樣式 :
這個可能就有一點點難猜了 因為同一個檔案的 不就是內堪嗎?
稍微先做一個說明
CSS 主要的目前是針對 HTML 標籤去撰寫樣式規則
所以我們focus的對象
並不是 test.htm 檔案ㄛ
而是 test.htm檔案中的 html 標籤 所以
內部 的定義 就是 html標籤裡面的意思
所以是放在這邊

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >
< title >無標題文件< /title >
< /head >
< body >
< div style="這邊放CSS規則" >hi hi hi hi hi< /div >
< /body >
< /html >

現在了解了 可以放CSS的3個地方之後
問題來了
如果我不小心3個地方都有寫
那 "那一個才會是對的呢" ???

規則就是 越靠近組件的 為主
這個部份 我可以用一個很蠢的東西來舉例

朋友說 : 穿牛仔褲 (外部樣式)
爸爸說 : 穿裙子 (內堪樣式)
自己說 : 穿短褲 (內部樣式)

在3方都有意見的時候 當然是 自己講的算

朋友說 : 穿牛仔褲 (外部樣式)
爸爸說 : 穿裙子 (內堪樣式)
自己說 : 沒意見 (內部樣式)

在2方都有意見 自己隨便的時後 當然聽爸爸的

朋友說 : 穿牛仔褲 (外部樣式)
爸爸說 : 隨你便 (內堪樣式)
自己說 : 沒意見 (內部樣式)

在1方都有意見 自己和爸爸隨便的時後 當然聽朋友的

當然這樣是比較 呆一點 但容易理解的說法

以下說明 真的 瀏覽器在判斷時的 權重依據

選擇器類型	規格
廣域選擇器	0,0,0,0
組合選擇器
組件識別子(html標籤)	0,0,0,1
擬組件辨識子
類別辨識子(class=)	0,0,1,0
擬類別辨識子
屬性辨識子
ID辨識子(id=)	0,1,0,0
內部樣式表(style=)	1,0,0,0

規格是可以累加的

所以假設我們有一個 css 寫這樣
div .aaa p{color:#ff0000;}
這一個css規則的規格 含有
組件識別子 : div p 2分
類別辨識子 : .aaa 1分
所以它的權重是 0,0,1,2
如果我們又寫了一個
body , td , p , div , a , span {color:#ff0000;}
它的權重是 0,0,0,6
所以  0,0,1,2 > 0,0,0,6
一律從左邊開始比 相同才往右繼續比

這邊只是一個 觀念而已 其實css寫的好 不太會碰到這類的問題
也如同上表可以知道 不管你 CSS 怎麼用 id class 都贏不過 style = "??" 的樣式