Intro. to CSS

  • 3,082 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,082
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
0
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CSS 快速上手 上官林傑 (ericsk)
  • 2. 課程大綱 引言 什麼是 CSS? 為什麼要用 CSS? 如何使用 CSS? CSS 選擇器 常用的 CSS 屬性(文字及排版) 範例實作
  • 3. 在開始之前... 網站架構主要區分為「前端」及「後端」: 前端: 主要是呈現內容、處理使用者操作介面等。 技術: HTML, CSS, JavaScript, Flash, ... etc. 執行者: 瀏覽器 後端: 處理前端或遠端送到伺服器上的請求、連結資料庫運算 或儲存資料。 技術: PHP, ASP, Java EE, Ruby, Python, ... etc. 執行者: 伺服器
  • 4. 在 HTML 檔案中使用 CSS
  • 5. 網頁樣式 雖然瀏覽器會根據 HTML 標籤來決定內容的樣式,但開發網 頁者仍然可以改變標籤的樣式。 用 HTML 標籤指定樣式: <font size=quot;3quot; family=quot;serifquot;>我是文字</font> 可讀性、可攜性都很差 利用 style 屬性 <span style=quot;font-family:serifquot;>我是文字</span> 較符合標準,但無法重覆利用。
  • 6. 有沒有聰明的作法? 重新定義標籤的樣式 可以套用到所有標籤 給標籤 id,定義該 id 的樣式 不限定標籤,套用該 id 即可使用該樣式 定義樣式類別 (class),讓標籤套用 類似 id,但是 id 只能讓一個標籤使用,class 沒問題
  • 7. <style> 標籤 在你的 HTML 檔案中,插入 <style> 標籤來定義樣式。 <style type=quot;text/cssquot;> h1 { font-size: 12px; color: blue; } </style> 上述定義將所有的 <h1> 標籤樣式改為: 12px 的文字大小 前景顏色改為藍色。
  • 8. 除了直接寫 <style> 之外... 除了在 HTML 中直接插入一段 <style> 來改變樣式之外,也可以 另外把這些樣式的定義寫在檔案中再引入 HTML 檔案: 用 <link> 標籤引入 <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;xxx.cssquot;/> 在 <style> 標籤中以 @import 引入 <style type=quot;text/cssquot;> @import url('xxx.css'); .... </style>
  • 9. 樣式定義的優先順序 可以引入樣式定義的方式有 4 種: 1. 用 <link> 標籤 2. 在 <style> 中用 @import 引入 3. 寫在 <style> 裡 4. 直接寫在標籤的 style 屬性裡 優先順序為: 4 > 3 > 2 > 1
  • 10. CSS 選擇器
  • 11. 什麼是 CSS 選擇器? 既然要定義樣式,重要的是指明要定義誰?所以利用 CSS 選 擇器來選擇要被定義的對象。 目前 CSS 標準已經到版本 3,不過各瀏覽器對於 CSS 選擇器 的支援性各有不同。 Safari 3、Firefox 3 對於 CSS 3 標準目前是最好。 最多人使用的 IE 6 則是連 CSS 2.1 都支援得不太好。 選擇器皆可以組合使用。
  • 12. 標籤選擇器 顧名思義,就是直接用「標籤名稱」作為選擇器,所下的定義會 套用到所有相同名稱的標籤。如: b{ font-weight: normal; color: red; } 上述的定義會讓所有的 <b> 內容都不會出現粗體,而且文字 會變成紅色。 所有瀏覽器都支援(廢話!),但是一旦定義了就會影響所有標 籤。
  • 13. #id 選擇器 一個 HTML 中,理論上一個 id 只會出現在一個標籤內,定義 了 #id 的樣式,被設定為該 #id 的標籤就會被套用。 定義 id 的方式: <span id=quot;titlequot;>Chapter 1</span> 如此一來,便可以在 CSS 的定義中,以定義 #title 的方式 來改變 id 為 title 的標籤樣式: #title { font-size: 22px; } 也可以寫成 span#title
  • 14. .class 選擇器 不同於 id,一個 class 可以在一 HTML 檔中多次出現 ,而且同 一個標籤還可以同時套用不同的 class 。 為標籤套用 class 的方式: <span class=quot;msg reqquot;>必填欄位</span> 在樣式定義中,則以「 .class 名稱」的方式來定義: .req { color: red; } .msg { font-style: italic; } 當然也可以加入標籤限定選擇。
  • 15. 群組選擇器 如果同時要讓很多個標籤、 id 或 class 共用同一個樣式,可以 用群組的方式來定義: h1, h2, h3, h4, h5, h6 { font-size: 100%; }
  • 16. 後代 (descendant) 選擇器 HTML 的內容會視為樹狀結構的模型,所以也可以利用標籤間的 階層關係來作選擇。 語法: elem1 elem2 { ... } <ul> ul li { <li>abc</li> color: #999999; <li>def } <ol> <li>123</li> </ol> abc, def, 123 的顏色,都會被改 </li> 成 #999999 </ul> 因為它們都在 ul 的階層之下。
  • 17. 子 (child) 選擇器 語法:elem1 > elem2 則只會選擇往下一層的元素。所以上 個例子若是寫成 ul > li { color: #999999; } 則只有 abc, def 的顏色會被改成 #999999。 123 是在第二層,所以沒被選擇到。 IE 系列,IE 7 才開始支援。
  • 18. 鄰族 (adjacent sibling) 選擇器 語法: elem1 + elem2 { ... } 用來選擇同一階層的緊鄰在後的元素 h3 + div { color: red; } 若套用至 <h3>hello</h3> <div>Paragraph 1</div> <div>Paragraph 2</div> 只有 Paragraph 1 的顏色會被改成紅色。 IE系列,IE 7才開始支援此語法。
  • 19. 同族 (general sibling) 選擇器 語法: elem1 ~ elem2 { ... } CSS 3 才有的語法,不同鄰族選擇器,此選擇器會選擇同階層 中符合條件的。 上個例子中,若是用了同族選擇器,則 Paragraph 1 及 Paragraph 2 都會被改成紅色。 目前瀏覽器支援度普遍不佳(Firefox, Opera 全系列支援, Safari 3 以後支援, IE 7 雖支援但有小 bug)
  • 20. 屬性 (attribute) 選擇器 語法: elem[attr op quot;valuequot;] { ... } 用標籤的屬性來選擇 input[type=quot;textquot;] { font-family: sans-serif; } 屬性可以不設值,則會選擇所有含有該屬性的標籤 屬性值的運算子: = : 完全相同 ~= : 含有該值 |= : 以該值為開頭,並帶有 - 的值
  • 21. 假類別 (pseudo-class) 選擇器 在 CSS 中預先定義了一些類別,在選擇器後以 : 指定。 範例: a { text-decoration: none; } a:hover { text-decoration: underline; } CSS2 及 CSS3 定義的假類別列表: http://reference.sitepoint.com/css/pseudoclasses 瀏覽器支援度要注意。
  • 22. 假元素 (pseudo-element) 選擇器 類似假類別,只是針對選擇標籤的特定位置。 div:after { content: 'end'; } 假元素列表: http://reference.sitepoint.com/css/pseudoelements 瀏覽器的支援度最差,要小心使用。不過一些排版上的困難可 以以此解決。
  • 23. 全(universal)選擇器 顧名思義,就是會套用至全部的標籤。 語法: * { ... } *{ margin: 0; padding: 0; } 在 IE 系列會有一些小 bug,比方說 * html 不應該選擇到任何 一個標籤,但是在 IE6 中則會自動省略掉 *。
  • 24. 文字
  • 25. CSS 支援的單位 文字 px: pixel pt: point,根據螢幕解析度決定 point 大小 cm, mm, in pc: 1pc == 12pt em: 字型大小 %: 百分比 色彩 #RRGGBB: 16-bit 的 RGB 值 (hex) #RGB: 8-bit RGB 值 (hex) rgb(r, g, b): rgb 數值 色彩名稱
  • 26. 定義字型 語法: font-family: 字型名稱列表; 範例: div#heading { font-family: Georgia, 'Times New Roman', times, serif; } div#paragraph { font-family: Verdana, Helvetica, Arial, sans-serif; }
  • 27. 文字粗、斜體及變異 粗體: 語法: font-weight: bold; 可帶入的值有 bold, normal, border, lighter, 100~900。 斜體: 語法: font-style: italic; 可帶入的值有 italic, oblique, normal。 變異: 語法: font-variant: small-caps | normal;
  • 28. 字型大小 語法: font-size: 值; 絕對大小:10px, 16px, 12pt, 15mm, etc. 相對大小:50%, 120%, 1em, 1.5em 關鍵字: CSS2 CSS1 xx-small 5px 9px x-small 7px 11px small 11px 13px medium 16px 16px large 24px 19px x-larg 36px 23px xx-larg 54px 28px
  • 29. 設定字型的快捷屬性 語法: font: (style)|(variant)|(weight) (size)/(line-height) (family) #foo { font-size: 12px; line-height: 1.5em; font-family: Georgia, serif; font-weight: bold; } #foo { font: bold 12px/1.5em Georgia, serif; }
  • 30. 文字縮排 語法: text-indent: 大小; 整個段落首行的縮排,若帶入的值是負數,則為凸排。 text-indent: 2em; text-indent: -2em;
  • 31. 文字段落對齊、間距 語法: text-align: left | right | center | justify; 向左、向右、置中、兩邊對齊。 行高: line-height: 大小; 用來指定每行文字的間距 字距: word-spacing: 大小; letter-spacing: 大小; 用來指定文字之間的間隔
  • 32. 色彩與背景
  • 33. 前景色彩 (foreground color) 語法: color: 色彩; 前景色彩,主要是定義文字的顏色。 如果有一元素僅定義了邊框樣式而無邊框顏色的話,會採 用 color 的值。 表單元素(input, select等)不僅是文字的顏色會改變。
  • 34. 背景 背景色彩語法: background-color: 色彩 值; 背景圖片語法: background-image: url(xxx.png); url() 內的位址,是與 CSS 檔案相對的路徑,如果開頭加上 / 則為整個網 站的相對路徑。 背景重覆方式: background-repeat: repeat | repeat-x | repeat-y | no-repeat;
  • 35. 背景 (續) 背景位置: background-position: (x) (y); 位置的值可以是: top, bottom, center, letf, right 絕對大小或相對大小 背景黏著: background-attachment: scroll | fixed; 背景是否會跟著捲動(預設是 scroll)
  • 36. 設定背景的快捷屬性 語法: background: (color) (img) (repeat) (attachment) (position); 這個屬性彈性很高,因為各個設定的順序可以自己決定。下列的 寫法是一樣的: div { background: url(xxx.png) #fff repeat-y left top; } div { background: #fff url(xxx.png) left top repeat-y; }
  • 37. 透明度 在 Firefox/Safari/Opera 等瀏覽器中可以使用: opactiy: 0.0~1.0; 來指定透明度。而 IE 系列則需使用: filter: alpha(opacity=0~100); 來定義。
  • 38. 用 CSS 排版
  • 39. CSS 方塊模型 (Box Model) div { width: 300px; height: 200px; padding: 10px; border-size: 1px; margin: 15px; } 整個方塊的大小為 352 * 252 在 IE5.5,width/height 包含 border 及 padding,上述的方 塊會變成 330 * 230
  • 40. 方塊邊緣留白 語法: margin: 上 右 下 左 margin: 2px 3px 1px 4px; 可以分別指定: margin-top: ... margin-right: ... margin-bottom: ... margin-left: ... 指定順序的記憶法:T(op)R(ight)B(ottom)L(eft) trbl --> trouble
  • 41. 方塊邊緣留白 (續) margin 指定的效果: 上右下左全部都 2px */ margin: 2px; /* 上下 2px, 左右 3px */ margin: 2px 3px; /* 上 2px, 下 4px, 左右 3px */ margin: 2px 3px 4px; /* 讓瀏覽器自行計算留白 */ margin: auto; /* (註:水平置中的效果)
  • 42. 方塊 內留白 (padding) 語法: padding: 上 右 下 左 padding: 2px 3px 1px 4px; 可以分別指定: padding-top: 大小; padding-right: 大小; padding-bottom: 大小; padding-left: 大小; 語法與 margin 完全相同,特性也是一樣。唯一需要注意的就是 在 IE5.5 的 box model 與其它瀏覽器不同。
  • 43. 邊框 (border) 邊框樣式: border-style: style {trbl}; border-top-style: style ; border-right-style: style ; border-bottom-style: style ; border-left-style: style ; 樣式:
  • 44. 邊框 -- 寬度 邊框寬度: border-width: size {trbl}; border-top-width, border-right-width, border-bottom-width, border-left-width 除了 絕對或相對大小數值之外,也可以使用 thin, medium, thick 三種關鍵字。
  • 45. 邊框 -- 顏色 邊框顏色: border-color: color {trbl}; border-top-color, border-right-color, border-bottom-color, border-left-color 用來定義邊框的顏色。
  • 46. 設定邊框的快捷屬性 語法: border: (size) (style) (color); /* 全方向 */ border-top, border-right, border-bottom, border-left 範例: h1 { border: 5px double #888; border-top: none; border-left: none; }
  • 47. 元素呈現模式 (display) HTML 的元素呈現樣式大致可區分為 inline 及 block 兩種 inline: 不會換行(如:a, span, img, ...) block: 會換行(如:p, div, form...) 利用定義 display 屬性的方式可以改變元素的呈現樣式。 可以定義 display: none; 讓某元素不要顯示(也不會佔空 間) visiblity: hidden; 則是不會顯示,但會佔空間。 除了 inline, block 之外,也有其它的值可以設定(如: inline-block, list-item, table, ... 等)但這些值在不同瀏 覽器間差異度高,要小心使用。
  • 48. 浮動 (floating) 語法: float: left|right|none; 透過設定元素的 float 屬性,將元素擺到所在 block 的左側或 右側。 利用 text-align 只是元素內的文字、圖片對齊方式,並不 是整個元素在本身 block 中的對齊方式 浮動的位置會根據 HTML 的順序而定。 如果整個 block 都是 float 的元素,那 block 不會佔有空間,所 以會有下方 block 重疊的現象。 所以要注意 block 填滿及大小計算的問題。 利用 clear 屬性。
  • 49. 浮動的效果 先擺一個 float: left , 後面才接文字 先擺一個 float: right , 後面才接文字
  • 50. 浮動的效果 (續) 先是文字 , 後面才擺一個 float: left 先是文字 , 後面才擺一個 float: right
  • 51. 浮動的效果 (續) 相簿範例(介紹 float 的效果) 當整個 container 都是浮動元素時,如何把 container 「撐 開」?
  • 52. 元素位置 語法: position: static | absolute | relative | fixed 用來決定元素擺放在頁面或是所在 block 中的位置。 static 預設值,根據現有的 CSS 及文件模型決定位置。 absolute 絕對位置,根據 left 及 top 的值來決定位置。 relative 將 left 及 top 的值視為位移來決定位置。 fixed 類似 absolute,不同於 absolute 的是,fixed 是相對於瀏覽器的畫面, 而 absolute 則是相對於它所在的 block。
  • 53. z-index 語法: z-index: 數字; 決定元素在同一位置上的「上下」順序。 有名的 IE select z-index bug: 在 IE 下,select 元素用正常手段是蓋 不起來的
  • 54. 還有很多.... CSS 能定義的樣式非常多,這份教材僅提及有興趣的人可以自行 參考市面販售的書籍或是網站,下列是個人推荐的書籍或網站: CSS: The Definitive Guide (O'Reilly) CSS AND HTML Web Design (Grannel) Google Doctype http://code.google.com/doctype SitePoint CSS Referense http://reference.sitepoint.com/css
  • 55. 範例討論與實作
  • 56. 範例1: 水平置中一個區塊 情境: 假設我有一個 760px 的 box 要水平置中於畫面上,該如何 做? 提示: 1. 利用 margin: auto;
  • 57. 範例2: Box Model 的陷阱 情境: 假設有個寬度為 500px 的 div,邊框上下左右皆為 1px,裡面會有一些文字, 希望有留有 10px 的 padding。 問題: 如果這樣寫,那麼這個 div 真實的寬度會是 522px (why?) #box { width: 500px; border: 1px solid black; padding: 10px; } 如果就要固定這個 #box 一定要是 500px,如何做? 提示: 1. 想一下 Box Model 2. 再使用一個 div 來解決。
  • 58. 範例3: 請丟掉 table 排版 情境: 在同一水平線上,希望擺上三個區塊 (div),大小分別是25%, 50%, 25%。 提示: 1. 使用 float
  • 59. 範例4: 固定版位 情境: 在一個 760px 的區塊中,打算採用雙欄式設計,左側 #main 為 500px,而右側的 #sidebar 為 200px,其餘空間作為留白。 提示: 1. 利用 float 2. 利用 margin
  • 60. 範例5: 用背景圖片作為項目圖像 情境: 選單上有幾個選項,想要為這些選項前面加上 icon,但不得直接使 用 <img>,而是利用 css 的 background-image 來作。 問題: 因為有時 css 可能是放在網路上的某個位址,不一定跟網頁在同 一位址,若換 theme 時,採用此法較為方便。 提示: 1. background-image 的 repeat 及 位置 2. 選項的 padding