Download presentation
Presentation is loading. Please wait.
1
CSS 徐于晉 陳政樺 陳郁蘋 黃麒錕 劉芳賓
2
什麼是CSS? CSS就是層疊樣式表,又稱串樣式列表(Cascading Style Sheets)
CSS最主要的目的是將檔案的結構(用HTML或其他 相關的語言寫的)與檔案的顯示(CSS)分隔開來。 分割的好處有: 檔案的可讀性被加強 檔案的結構更加靈活 作者和讀者可以自己決定檔案的顯示 檔案的結構簡化了
3
Selector
4
什麼是Selector? Selector就是選擇器,通常為檔中的元素 （element），如HTML中的<body>，<p>， <strong>等標籤，多個選擇器可以半形逗號（,） 隔開。
5
Selector的種類 1.Type selectors (屬性選擇器) 2.Class selectors (Class選擇器) 3.Descendant selectors (後代選擇器) 4.Child selectors (子選擇器) 5.Adjacent sibling selectors (相鄰選擇器) 6.Attribute selectors (屬性選擇器) 7.ID selectors (ID選擇器) 8.Pseudo-classes (虛擬Class選擇器) 9.Pseudo-elements (虛擬元素選擇器) 10.Universal selector (通用選擇器)
6
1.Type selectors (屬性選擇器)
在html文件裡，他的標籤可以直接當做css裡頭的 選擇器。例如<h1>...</h1>，<p>...</p> 等等， 可以直接寫成: h1 {color:red;} p{color:black;}
7
2.Class selectors (Class選擇器)
<style> .value{color:red} </style> <div class="value">紅色文字</div>
8
3.Descendant selectors (後代選擇器)
當某一段文字被兩個以上的選擇器包圍時，我們可 以用這些選擇器彼此之間的關係來替文字做更進一 步的樣式化。 <style> h1 a {color:red} /*選擇器依序從外而內，單獨設定在h1底下的a選擇器。兩個選擇器之間用空白鍵做分隔。*/ a {color:black} </style> <div> <h1><a href=" <a href=" </div>
9
3.Descendant selectors (後代選擇器)
li a { text-decoration:none; } <div> <a>我是有底線的連結。</a> <li><a>我在<li>底下所以我的底線會不見喔!?</a></li> </div>
10
4.Child selectors 子選擇器有一種繼承的概念，你可以把它想成父子 的關係，子一定要緊緊跟著父跑，要是中間插入任 何一個元素，就不是父子關係了。 而子選擇器我們 使用「>」符號，舉例如下: <style> div > #child {color:red} </style> <div> <p> <span id="child">我和div中間有個p，所以不會變色</span> </p> </div> <div> <span id="child">我緊緊跟著div，所以會變色</span> </div>
11
5.Adjacent sibling selectors (相鄰選擇器)
如果說子選擇器是上下垂直的繼承概念，那麼相鄰 選擇器就是左右平行的對等概念，而他使用的符號 是「+」，只是我們很少用到這個寫法，其中一個 原因是IE瀏覽器尚未支援。 相鄰選擇器使用的最好時機在於要對同個標籤進行 不同的設置。假設今天我有三個段落都要使用h1標 籤，可是我希望三個段落擁有不同的顏色(黑色、紅 色、綠色)，我可以這樣寫:
12
5.Adjacent sibling selectors (相鄰選擇器)
<style> h1 + h1 {color:red} h1 + h1 + h1 {color:green} </style> <h1>段落一</h1> <h1>段落二</h1> <h1>段落三</h1>
13
6.Attribute selectors (屬性選擇器)
顧名思義，就是可以針對標籤裡頭的屬性做更進一 步的修改。屬性選擇器總共有4種類型，分別為: h2[class] //符合所有含class的h2標籤即可 h2[class=title] //符合含class=title的h2標籤 h2[class~=title] //只要calss裡頭有包含title文字的h2標籤即可 h2[class|=title] //class的開始值必須為title的h2標籤
14
7.ID selectors (ID選擇器) 使用「#」符號做宣告，後頭的屬性值可以自己命 名，但是一張網頁僅能出現一次相同的ID (ID為唯 一) <style> #value{color:red} </style> <div id="value">紅色文字</div>
15
8.Pseudo-classes (虛擬Class選擇器)
可用來給一些選擇器加上非凡效果。 虛擬Class選擇器有: :link :visited :hover :active :first-child :foucs :lang
16
8.Pseudo-classes (虛擬Class選擇器)
:first-child :lang(E) <style> p:first-child { color:red} </style> <P> 此段會變紅色</p> <P> 此段不會變色</p> <style> p:lang(fr) {color:red} </style> <body> <p lang="fr">紅色</p> <p lang="en">不會變色</p> </body>
17
9.Pseudo-elements (虛擬元素選擇器)
:first-line :first-letter <style> p:first-line {color:red} </style> <body> <p>第一行變紅色<br /> 第二行不變色</p> </body> <style> p:first-letter {color:red} </style> <body> <p>首字變色<br />第二行</p> </body>
18
10.Universal selector (通用選擇器)
使用字元「*」，代表此張網頁都要套用*{}底下的 設定。 *{ font-family:Verdana, Arial, Helvetica, sans-serif; }
19
Cross-browser
20
Cross-browser是什麼? Cross-browser就是瀏覽器相容性,指標準功能在 各瀏覽器的差異程度，網頁會在各種瀏覽器上的顯 示效果盡量保持一致的狀態。 現在瀏覽器市場廣大，網站為了能在更多瀏覽器上 正常的顯示，瀏覽器的相容能力變得更受重視。 瀏覽器也因應趨勢，使自己的瀏覽器提供更多相容 功能。
21
Cross-browser的重要性 網站做好了瀏覽器相容，能夠讓網站在不同的瀏覽器下都正 常顯示 瀏覽器相容能夠抓住更多的網站訪客
瀏覽器兼容能夠給客戶更好的體驗
22
瀏覽器相容目標： 網頁的瀏覽器兼容的總體目標是在各瀏覽器中顯 示正常，實現跨瀏覽器的，符合用戶體驗的高質 量的網站。 一般從以下幾個方面考慮網頁的瀏覽 器兼容性 : JavaScript CSS HTML DOM 我們要針對CSS的部分進行改進
23
解決標準功能在瀏覽器的差異程度：Hack
針對不同的瀏覽器做判讀 IE6，規則是 *html “樣式名稱”{樣式內容設定} IE7，規則是 *+html "樣式名稱"{樣式內容設定} IE8及其他瀏覽器， 規則是: html>/**/body "樣式名稱"{樣式內容設定}; html:root "樣式名稱"{樣式內容設定};
24
範例： /* For 其他瀏覽器的設定(原始設定) */
.css_hack { background-image:url(img/bg_ff.gif);} /* For IE8與其他瀏覽器的設定*/ html>/**/body .css_hack { backgroundimage:url(img/bg_IE7.gif);} /* For 其他非IE瀏覽器的設定 */ html:root .css_hack { background-image:url(img/bg_ff.gif);} /* For IE7以下的設定 */ *+html .css_hack { background-image:url(img/bg_IE7.gif);} /* For IE6以下的設定 */ *html .css_hack { background-image:url(img/bg_IE6.gif);}
25
Box model
26
Box Model 的意思是說，每一個元素我們都可視它為一個 Box 。一個 Box 由以下屬性組成：margin 、 padding 、 border 、 content 。
27
border border 是一個「加上去」的屬性，一般都是用來區隔元素與元素用的。
28
padding padding 會在元素內容的周圍加上我們所指定大小的空間；而如果我們沒有指定元素的寬高時，那麼該元素的內容就會受到 padding 所擠壓。如下圖：
29
margin margin 的意義就是該元素與其他元素間的邊界距離
元素與相鄰元素的距離：指得是元素間是緊鄰的 (不論是區塊顯示元素或行內顯示元素) ，而沒有階層關係。例如：元素與相鄰元素的距離 <span id="i1>行內顯示元素1</span><span id="i2">行內顯示元素2</span>
30
<div id="b1">區塊顯示元素1</div><div id="b2">區塊顯示元素2</div>
31
元素與父元素間的距離：指元素之間有階層關係時的邊界距離。
<div id="b3"> <div id="b4">內部區塊</div> </div>
32
margin補充 margin 也可以指定為負值，將 margin 設定為負值是怎麼一回事呢？
Similar presentations
