講師 : 張秀山
CSS 說明 CSS 是 Cascading Style Sheets 的縮寫,Cascading 是串接 連接之意 ;Style 則是風格 款式之意 ; Sheets 則是一頁紙 表的意思 所以呢, 要以中文來解釋 CSS 的話呢, 您可以稱之為 串接樣式表
CSS 放在那裡? 網頁內 CSS 語法放在 <HEAD></HEAD> 之間!
CSS 放在那裡?css 檔案 寫在一個 screen.css 的檔案 <link href="screen.css" rel="stylesheet" type="text/css" media="screen" />
CSS 放在那裡? 標籤內 <input type="text" value=" 我有淺綠色的底喔!" STYLE="background-color:#ccffcc">
格式 元件標籤 { 樣式性質 : 設定值 } element { property : value } 元件標籤 : # ID: 同一網頁內只能用一次. 類別 : 同一網頁內可以用多次 無標籤 : 定義 HTML 標籤
超連結變色 <style type="text/css"> a:link {color: blue} a:visited {color: gray} a:active {color: green} a:hover {color: red} </style>
類別
標籤
ID
DIV 及 SPAN
方框設定 Content Padding Border Margin
Margin 外距 邊界 margin-top ( 上邊界 ) margin-right ( 右邊界 ) margin-bottom ( 下邊界 ) margin-left ( 左邊界 )
border-style 邊框樣式 p {border-style:solid;} 實線 p {border-style:dashed;} 虛線 p {border-style:double;} 雙線 p {border-style:dotted;} 點線 p {border-style:groove;} 凹線 p {border-style:ridge;} 凸線 p {border-style:inset;} 嵌入線 p {border-style:outset;} 浮出線
border-width 邊框的寬度 p {border-width:9px; border-style:solid;} p {border-width:medium; border-style:dashed;}
border-color 邊框色彩 p {border-color:#0000ff; border-style:solid;} p {border-color:red; border-style:dotted;}
border-top-, border-left-, borderbottom-, border-right- 上邊框, 左邊框, 下邊框, 右邊框 p {border-top-style:solid; border-bottom-style:dotted;} p {border-top-style:solid; border-top-width:medium;} p {border-left-style:solid; border-bottom-style:dashed; border-bottom-color:#00ff00;}
Border 邊框
Padding 內距 padding-top ( 上 ) padding-right ( 右 ) padding-bottom ( 下 ) padding-left ( 左 )
background-color 背景色 p {background-color: ff0000;} p {background-color: blue;}
background-image 背景圖 p {background-image:url(back.jpg);}
background-repeat 背景圖重覆 p { background-image:url(back.jpg); background-repeat: no-repeat; 不重覆 } background-repeat: repeat-x; 重覆 x 軸 background-repeat: repeat-y; 重覆 y 軸 background-repeat: repeat; 重覆 x y 軸
background-attachment 背景圖捲動方式 background-attachment: fixed; 固定 background-attachment: scroll; 捲動
background-position 背景圖位置 background-position: center center; background-position: 20% 20%; background-position: 100px 200px;
顏色 十六進位值 :{color:#xxxxxx;} 介於 00~ff RGB: {color:rgb(x,y,z); } X Y 和 Z 介於 0 和 255 {color:rgb(x%,y%,z%); } X Y 和 Z 介於 0 和 100 顏色名稱 : {color:[ 顏色名稱 ];} red blue green black
font-family 字型 font-family: " 微軟正黑體 ", " 新細明體 ", " 標楷體 ";
font-size 字型大小 p {font-size:9px;} p {font-size:150%;} p {font-size:1cm;} p {font-size:small;} "xx-large" "x-large" "large" "medium" "small" "x-small" 和 "xx-small"
font-weight 字粗 p {font-weight: 100;} 介於 100 到 900 p {font-weight: bold;} bold ( 厚 ) bolder ( 更厚 ) 及 normal ( 正常 )
font-style 字型樣式 p {font-style: italic;}
font-variant 英文大小寫 font-variant:small-caps; 小型大寫 (small caps)
list-style-type none ( 沒有 ) disc ( 全黑圓圈 ) circle ( 空心圓圈 ) square ( 正方形 ) upper-latin ( 大寫拉丁文 ) lower-latin ( 小寫拉丁文 ) upper-roman ( 大寫羅馬文 ) lower-roman ( 小寫羅馬文 ) upper-alpha ( 大寫希臘文 ) lower-alpha ( 小寫希臘文 )
list-style-position 符號位置 list-style-position:inside; list-style-position: outside;
list-style-image 清單圖片 list-style-image:url( a1.gif");
list-style list-style: url("circle.gif") none inside; list-style-style list-style-position 及 list-style-image 簡化成 list-style
表格 <table> <tr> <th> 學生 </th> <th> 分數 </th> </tr> <tr> <td>stella</td> <td>85</td> </tr> <tr> <td>sophie</td> <td>95</td> </tr> <tr> <td>alice</td> <td class="fail">55</td> </tr> </table> table { border: 0; font-family: arial; font-size:14px; } th { background-color:yellow; } td { border-bottom:1 solid #000000; }.fail { color:#ff0000; }
border-collapse: 間距 <table> <tr><td> 年度 </td> <td> 收入 </td></tr> <tr><td>2006</td> <td>35.2m</td></tr> <tr><td>2007</td> <td>40.1m</td></tr> </table> table { border:0; border-collpase:collpase; width:200px; } tr { border-bottom:1px solid #000; }
CSS 位置 (Position) static ( 預設值 ): 這代表元素會被放在預設的地方 如果 position 的值是被設定為 statics 的話, 那 top bottom left 和 right 的值就都沒有意義了 absolute: 這代表元素會被放在瀏覽器內的某個位置 ( 依 top bottom left 和 right 的值而定 ) 當使用者將網頁往下拉時, 元素也會跟著改變位置 relative: 這代表元素被放的地方將會與預設的地方有所不同 不同的程度是依照 top bottom left 和 right 的值而定 fixed: 這代表元素會被放在瀏覽器內的某個位置 ( 依 top bottom left 和 right 的值而定 ) 當使用者將網頁往下拉時, 元素的位置不會改變
top, right, bottom, left 每一個方向 (top, right, bottom, left) 的位置值可以是長度 百分比 或是 auto
overflow visible: 內容完全呈現, 不管放得下放不下 hidden: 放不下的內容就不顯示出來 scroll: 無論內容放得下放不下, 都加入上下捲軸及左右捲軸的功能 auto: 當內容放不下時, 加上捲軸的功能
z-index z-index 屬性是用來決定元素重疊的順序 #redblock { z-index: 1; position:absolute; width:80px; height:100px; top:20px; left:20px; border: 1px solid #FFF; backgroundcolor: #FF0000; } #pinkblock { z-index: 2; position: absolute; width:100px; height:80px; top:50px; left:50px; border: 1px solid #FFF; background-color: #FF00FF; } <div id="redblock"></div> <div id="pinkblock"></div>
文字 :direction direction 屬性是用來設定文字的方向 可能的值為 'ltr' 及 'rtl' p { direction:ltr; } <p>ltr 方向 </p>
文字 : letter-spacing 用來設定每一個字母之間的空間 p { letter-spacing:8px; }
文字 : line-height 用來設定每一行之間的空間 p { line-height:40px;} <p> 第一行和第二行之間 <br> 相隔 40px </p>
文字 : text-align 用來設定文字是如何對齊 left: 靠左對齊 right: 靠右對齊 center: 向中間對齊 justified: 左右對齊
文字 : text-decoration 用來設定文字上有什麼裝飾 underline: 文字下加上一條線 overline: 文字上加上一條線 line-through: 文字中間加上一條線劃過去 blink: 讓文字閃爍
文字 : text-indent 用來設定每一段的第一行前面要留多少空間 p { text-indent:15px; } <p> 這一段第一行的最前面會留 15px 的空間 之後的行數就沒有留任和空間了 </p>
文字 :text-transform 用來控制大小寫是如何展現的 capitalize: 每一個字的第一個字母都以大寫顯現, 其他的字母則不改變 uppercase: 所有的字母都以大寫顯現 lowercase: 所有的字母都以小寫顯現 none: 大小寫不做任何改變
文字 : word-spacing 用來設定每個字與每個字之間的距離 p { word-spacing:5px; } <p>words here are separated by 5px.</p>
浮動 : float 三個可能的值 :left right 和 none #leftfloat { float:left; } <img src="http://imagecool.tw/07 網頁插圖 /03 植物 /02 小葉子 /11.jpg" id="leftfloat"> 這個例子是用來顯示 float:left 會如何影響整個頁面的呈現 在這裡, 圖案浮動於左邊
清除 : clear 來抵銷 float 屬性的作用 left: 消除左邊的浮動 right: 消除右邊的浮動 both: 消除左邊及右邊的浮動 none: 不消除任何一邊的浮動 #leftfloat { float:left; } #clearleft { clear:left;} <span id="leftfloat"><img src="yp.jpg"></span> 這個例子 <span id="clearleft"> 展現出 clear:left 能夠抵銷 float 屬性的值 </span>
滑鼠游標圖案 CSS 樣式顯現結果 { cursor: crosshair; } 滑鼠游標圖案是 crosshair { cursor: pointer; } 滑鼠游標圖案是 pointer { cursor: text; } { cursor: move; } { cursor: wait; } { cursor: help; } { cursor: progress; } { cursor: notallowed; } { cursor: no-drop; } { cursor: novertical-text; } { cursor: all-scroll; } { cursor: colresize; } { cursor: row-resize; } { cursor: e-resize; } { cursor: ne-resize; } { cursor: n-resize; } { cursor: nw-resize; } { cursor: w-resize; } { cursor: swresize; } { cursor: s-resize; } { cursor: se-resize; }