CSS 吳錦昂老師整理
CSS 是什麼 CSS 的全名為 Cascading Style Sheets W3C 所制訂的標準 可以將資料層及顯示層分開 HTML 文件就只包括資料 ( 資料層 ) CSS 則是告訴瀏覽器這些資料應該要如何顯現出來 ( 顯示層 ) 目的是為了對標記語言例如 XHTML 及 HTML 之類的提供一個顯示層 學會 CSS 可以自由的變化自己部落格的樣式
CSS 語法 選擇器 { 屬性 : 屬性值 ;... } 例 : H1 {font-style:italic; color:green;/* 註解 */} H1 作用的對象 Font-style 屬性 Italic 屬性值 屬性與屬性值之間以分號隔開 /* 之間可以有註解 */ 屬性設定可以有多組 上例的 Font-style 和 Color 屬性值亦可能有多個, 每個值以空格格開 body {background:url('p92.jpg') no-repeat fixed 6cm 1.8cm} 選擇器亦可有多個, 即共用相同樣式 H1, P {font-weight:bold}
CSS 使用方式 行內 直接在 HTML 標籤中套用 HTML 標籤的 style 屬性 嵌入 在 <head> </head> 間, 定義 <style> </style> 外部連接 (link) Css 樣式定義在.css 檔案中 在 Html 檔的 <head></head>, 中連結到.css 檔案, 例 <link rel=stylesheet type= text/css href= test.css > 用 @Import 在 Html 檔的 <head></head> 中定義例如 : <style type= text/css > <! @import url(./test.css); </style>
In-Line 行內方式 <html> <head> <title>in-line 行內方式 </title> </head> <body> <p style=font-size:15pt;color:red>hello World!</p> </body> </html>
In-Line 行內方式 執行結果
Embed 嵌入方式 <html> <head> <title>embed 嵌入方式 </title> <style> p {font-size:12pt;color:blue;font-style:italic;> </style> </head> <body> <p>hello World!</p> </body> </html>
Embed 嵌入方式 執行結果
Link 外部連結 <html> <head> <title>link 外部連結 </title> <link rel=stylesheet href="first.css" type=text/css> </head> <body> <p>hello World!</p> </body> </html> // 檔案 first.css p {font-size:25pt;color:aqua;font-style:italic;}
Link 外部連結 執行結果
@import 匯入方式 <html> <head> <title>@import 用法 </title> <style type="text/css"> @import url("second.css") </style> </head> <body> <p>hello World!</p> </body> </html> // 檔案 second.css p {font-size:20pt;color:green;font-style:italic;}
@import 匯入方式 執行結果
class 與 id 樣式的使用, 不直接套用某個 html 標籤 而是 1. 先給它取一個名字 2. 將樣式設定寫好 3. 想在某標籤中套用時, 利用 CLASS 參數或 ID 參數來指定此名字, 就可套用.class 名稱 #id 名稱 4. 或可設定區段範圍來套用定義好的樣式
Class 與 id 範例 // 範例用以說明 Class 與 ID 的用法 <html> <head> <style>.myclass { color:red;font-size:14pt;} #myid {color:blue;font-style:italic;} </style> </head> <body> <h2 class=myclass> 使用 myclass 樣式 </h2> <h2 id=myid> 使用 myid 樣式 </h2> </body> <Html>
重複定義時的使用順序 從最高優先權到最低優先權 內行套用的樣式表 (Inline stylesheet) 嵌入套用的樣式表 (Embedded stylesheet) 外部連接套用的樣式表 (Linked stylesheet) 匯入套用的樣式表 (Imported stylesheet) 瀏覽器本身的樣式表 (Browser's own stylesheet) 參考資料 : http://www.chou-it.com/info/dictionary/web/css/css_priority%20.html
<DIV>...</DIV> div 元素 (division), 用以定義 區塊 沒有特別意義, 功用在於集合一群元素, 可利用 CSS 定義此區塊的樣式 語法 <div 屬性 = " 屬性值 "> 標籤內容 </div>
<DIV> 範例 <html <head> <style> #mydiv {color:blue;background-color:yellow;width:150;height:150} </style> </head> <body> <div id = mydiv" > <h2>hello World!</h2> <p> 今天天氣好好!</p> </div> </body> </html>
<SPAN>...</SPAN> span 元素 (text span), 用以定義小區段範圍 沒有特別意義, 功用在於將一行內的一群元素集合起來, 利用 CSS 定義其樣式 語法 <span 屬性 = " 屬性值 "> 標籤內容 </span>
<span> 範例 <html> <head> <style> #myspan {color:blue;} </style> </head> <body> <span id = "myspan">hello World!</span> <p> 今天天氣真好 </p> </body> </html>
繼承 (inheritance) 繼承 (inheritance) 的意思就是說子標籤的樣式會跟父標籤一樣, 除非子標籤本身另有自訂的樣式
CSS 屬性 吳錦昂老師整理
以 CSS 來設定超連結文字的變化 a:active 設定正被選取之超連結文字顯現方式 例如 : a:active {color:#0099cc;text-decoration:none;} a:hover 設定當滑鼠移至超連結文字上面時的顯現方式 例如 : a:hover {color:#0099cc;textdecoration:underline;} a:link 設定超連結之文字顯現方式 例如 : a:link {color:#cc3300;text-decoration:none;} a:visited 設定瀏覽過之超連結文字顯現方式 例如 : a:visited {color:#0099cc;text-decoration:none;}
背景相關樣式 (I) background-color 背景顏色 ex: body {background-color:yellow} background-image 背景圖 ( 注意圖檔名寫法 ) ex: body {background-image:url('p92.jpg')} background-repeat 背景圖重複狀況 可能的值 : repeat repeat-x repeat-y no-repeat
背景相關樣式 (II) background-attachment 背景圖附著狀況 可能的值 : fixed/scroll background-position 背景圖位置 可能的值 上下百分比 左右百分比 top/center/bottom left/center/right 點 pt 英寸 in 公分 cm 像素 px 百分比 % ex: body {background-image:url( p92.jpg ); background-repeat:no-repeat; backgroundattachment:fixed; background-position:6cm 1.8cm;} body {background:url('p92.jpg') no-repeat fixed 6cm 1.8cm}
段落樣式 (I) text-indent 文字縮排 可能的值與單位 : 點 pt 英寸 in 公分 cm 像素 px 百分比 % ex: TEXT-INDENT:1cm; text-align 文字對齊方式 可能的值 : LEFT RIGHT CENTER JUSTIFY ex: text-align=left; text-align-justify; text-decoration 文字裝飾 可能的值 UNDERLINE LINE-THROUGH OVERLINE 加底線 加橫線 加頂線 ex: text-decoration:underline; text-decoration:line-through; letter-spacing 英文字的字母間距 可能的值與單位 : 點 pt 英寸 in 公分 cm 像素 px ex: letterspacing:5pt; word-spacing: 英文單字之間的間距可能的值與單位 : 點 pt 英寸 in 公分 cm 像素 px ex: word-spacing:5pt; line-height: 文字行列高度可能的值與單位 : 點 pt 英寸 in 公分 cm 像素 px 百分比 % ex: line-height:1in text-transform: 可能的值 : CAPITALIZE UPPERCASE LOWERCASE 第一個字母大寫 大寫 小寫 ex: texttransform:capitalize
段落樣式 (II) letter-spacing: 英文字的字母間距 可能的值與單位 點 pt 英寸 in 公分 cm 像素 px ex: letter-spacing:5pt; word-spacing: 英文單字之間的間距 可能的值與單位 點 pt 英寸 in 公分 cm 像素 px ex: word-spacing:5pt; line-height: 文字行列高度 可能的值與單位 點 pt 英寸 in 公分 cm 像素 px 百分比 % ex: line-height:1in text-transform: 可能的值 CAPITALIZE UPPERCASE LOWERCASE 第一個字母大寫 大寫 小寫 ex: text-transform:capitalize
字型字體相關樣式 font-family: 字型 例如 : font-family:" 標楷體 " font-style: 字型樣式 可能的值 normal/italic/oblique font-weight: 字型的體重 可能的值 normal/bold/bolder/lighter/100/200/~/900 font-size: 字型的大小 可能的值與單位 :in/cm/%/px/pt 例如 : font-size:14pt 或 font-size:0.8cm font-variant: 字型變化 可能的值 : normal/small-caps 例如 : font-variant:small-caps
區塊樣式 (I) position: 區塊的定位擺放的方式 可能的值或單位 絕對 absolute / 相對 relative ex: position:absolute; top: 區塊距離上方的位置 可能的值或單位 : 點 pt 英寸 in 公分 cm 像素 px 百分比 % ex: top:5%; left: 區塊離左邊的位置 可能的值或單位 : 點 pt 英寸 in 公分 cm 像素 px 百分比 % ex: left:500px;
區塊樣式 (II) width: 區塊的寬度 可能的值或單位 點 pt 英寸 in 公分 cm 像素 px 百分比 % ex: width:40%; height: 區塊的高度 可能的值或單位 點 pt 英寸 in 公分 cm 像素 px 百分比 % ex: height:15cm; z-index: 當二個以上區塊有重疊時, z-index 小的會被壓在下面 可能的值 數字 ex: z-index:1; border: 設定邊框 可能的值 BORDER : 寬度樣式顏色 寬度 : 點 pt 英寸 in 公分 cm 像素 px 百分比 % 樣式 : dotted dashed solid double groove ridge inset outset 顏色 : #RRGGBB 或顏色名稱 ex: border:2pt solid blue;
區塊樣式 (III) margin-left: 區塊與所設定位置的左邊之間的距離 可能的值或單位 點 pt 英寸 in 公分 cm 像素 px 百分比 % ex: margin-left: 15pt; margin-right: 區塊與所設定位置的右邊之間的距離 可能的值或單位 點 pt 英寸 in 公分 cm 像素 px 百分比 % ex: margin-right: 2%; margin-top: 區塊與所設定位置的上邊之間的距離 可能的值或單位 點 pt 英寸 in 公分 cm 像素 px 百分比 % ex: margin-top: 0.1in; margin-bottom: 區塊與所設定位置的下邊之間的距離 可能的值或單位 : 點 pt 英寸 in 公分 cm 像素 px 百分比 % ex: margin-bottom: 1cm;
區塊樣式 (IV) padding-left: 區塊內容與左邊界間的距離 可能的值或單位 點 pt 英寸 in 公分 cm 像素 px 百分比 % ex: padding-left: 15pt; padding-right: 區塊內容與右邊界間的距離 可能的值或單位 點 pt 英寸 in 公分 cm 像素 px 百分比 % ex: padding-right: 2%; padding-top: 區塊內容與上邊界間的距離 可能的值或單位 點 pt 英寸 in 公分 cm 像素 px 百分比 % ex: padding-top: 0.1in; padding-bottom: 區塊內容與下邊界間的距離 可能的值或單位 點 pt 英寸 in 公分 cm 像素 px 百分比 % ex: padding-bottom: 1cm;
參考網站 CSS 語法 超 IT 綜合情報資訊網 http://www.chou-it.com/info/dictionary/web/css/web02.html#display http://css.1keydata.com/tw/syntax.php ( 英文 ) W3C Schoools ( 英文 ) http://w3schools.com/