CSS 的運用 Speaker:Kevin Yang Date:2007/3/10
何謂 CSS CSS 的全名是 Cascading Style Sheets( 串接樣式表 ) CSS 是用來延伸 html 而非取代 htnl, 是用來補 html 的不足
CSS 的特點 加快網頁傳輸的速度 : 減少圖檔的使用, 便可以達到文字變化的需求 集中管理樣式 : 當修改時只需針對樣式修改即可 共享樣式設定 : CSS 可另外存檔, 供每一個網頁取用共享
為何使用 CSS 提供 HTML 不支援的屬性 加快網頁設計速度 減少網頁體積 政府推動無障礙網站 大專院校 95 年底 :A 96 年底 :A+ 檢測是否符合無障礙網站 http://enable.nat.gov.tw/index.jsp 減少使用框架
CSS 的種類 - 同列 Inline ( 同列 ) 使用 HTML 標記的 STYLE 屬性, 只於定義的區段有效 Eq: <P STYLE=COLOR:RED>
CSS 的種類 - 內嵌 Embedding ( 內嵌 ) 使用 <STYLE>...</STYLE> 標記 ( 置於 BODY 本文區之前 ), 定義 HTML 標記供整個網頁使用 Eq: <HTML> 文件開始 <STYLE TYPE=text/css> 排版樣式區開始 <!-- 排版樣式區內容 --> </STYLE> 排版樣式區結束 <BODY> 本文區開始本文區內容 </BODY> 本文區結束 </HTML> 文件結束
CSS 的種類 - 連結 Linking ( 連結 ) 使用 <LINK> 標記 ( 用於 HEAD 區 ), 即將排版樣式分開處理, 再連結使用 Eq: <HTML> 文件開始 <HEAD> 標頭區開始 <LINK TYPE=text/css REL=stylesheet HREF=s1.css> 連結 CSS 檔 </HEAD> 標頭區結束 <BODY> 本文區開始本文區內容 </BODY> 本文區結束 </HTML> 文件結束
單位 絕對數值單位 in 英吋 (1in=2.54cm) cm 公分 mm 公厘 pt 點 (1pt=172in) pc Pica(1pica=12pt) 相對數值單位 em 在特定範圍下有效字型的高度為 1 的單位 ex 在特定範圍下有效字型的小寫之 x 的高度為 1 的單位 px 螢幕上最小一點的單位 % 相對於其他基準表示大小的比例
文字字型語法
文字的顏色 color 功能 指定文字顏色 語法 { COLOR : ( color ) } ( color ) 可為 1 顏色名稱 ( 16 種 ) 2 16 進制表示法 - #RRGGBB ( 00 暗 ~FF 亮 ) 3 #RGB ( 0 暗 ~F 亮 ) 表紅綠藍強度 範例 P {COLOR:RED} P {COLOR:#FF0000} P {COLOR:#F00}
字型 font 功能 設定字體樣式 大小寫變化 粗細 文字行列高度 字型 語法 { FONT : ( font-style ) ( font-variant ) ( font-weight ) ( fontsize ) ( font-family ) / ( line-height ) } 範例 H1 {FONT:ITALIC BOLD 細明體 12pt/18pt}
字型組 font-family 功能 設定字型組 ( 字型名稱若為兩個英文單字以上需加引號 " " ) - 常用字型組 ( Arial Arial Black Comic Sans MS Times New Roman ) 語法 { FONT-FAMILY : ( font-name ) ( generic-family ) 範例 {FONT-FAMILY:Arial,Bedrock} {FONT-FAMILY:"Arial Black"}
字型大小 font-size 功能 設定字體大小 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比 % ) 語法 { FONT-SIZE : LARGE MEDIUM SMALLER ( length ) ( percentage ) } 範例 {FONT-SIZE:LARGE} {FONT-SIZE:10pt} {FONT-SIZE:50%}
字型樣式 font-style 功能 設定字體樣式 ( 分為 : 正常 斜體 ) 語法 { FONT-STYLE : NORMAL ITALIC } 範例 {FONT-STYLE:ITALIC}
字型粗細 font-weight 功能 設定字體粗細 ( 分為 : 正常 粗字體 ) 語法 { FONT-WEIGHT : NORMAL BOLD } 範例 {FONT-WEIGHT:BOLD}
字體變化 font-variant 功能 設定字體變化 ( 分為 : 正常 小字體 ) 語法 { FONT-VARIANT : NORMAL SMALL-CAPS } 範例 {FONT-VARIANT:SMALL-CAPS}
文字格式語法
文字間隙 letter-spacing 功能 設定文字間隙 ( 單位屬性 : 點 pt 英寸 in 公分 cm 像素 px ) 語法 { LETTER-SPACING : NORMAL ( length ) } 範例 letter-spacing:0.5em;
文字高度 line-height 功能 設定文字行列高度 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比 % ) 語法 { LINE-HEIGHT : NORMAL ( number ) ( length ) ( percentage ) } 範例 line-height:normal; line-height:1.5; line-height:180%;
調整文字 text-align 功能 設定調整文字 ( 可設左邊 右邊 置中 整齊 ) 語法 { TEXT-ALIGN : LEFT RIGHT CENTER JUSTIFY } 範例 text-align:left; text-align:center; text-align:right;
文字裝飾 text-decoration 功能 設定文字裝飾 ( 分為 : 無 加底線 加橫線 加頂線 ) 語法 { TEXT-DECORATION : NONE UNDERLINE LINE- THROUGH OVERLINE } 範例 text-decoration:underline; text-decoration:line-through; text-decoration:overline; text-decoration:underline overline;
文字縮排 text-indent 功能 設定文字縮排 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比 % ) 語法 { TEXT-INDENT : ( length ) ( percentage ) } 範例 text-indent:1em;
文字改變 text-transform 功能 設定文字改變 ( 可設無 第一個字母大寫 大寫 小寫 ) 語法 { TEXT-TRANSFORM : NONE CAPITALIZE UPPERCASE LOWERCASE } 範例 text-transform:lowercase; /* 全部小寫 */ text-transform:uppercase; /* 全部大寫 */ text-transform:capitalize; /* 各單字頭一個英文字母大寫 */
排版格式語法
框 邊界 :margin 邊框 :border 邊距 :padding 內容 :content
邊界 適合用在位置的調整 左邊界 : margin-left 上邊界 :margin-top 邊框 :border 邊距 :padding 內容 :content 下邊界 :margin-bottom 右邊界 : margin-right
邊界 margin 功能 設定上右下左邊界 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比 % ) 語法 {MARGIN: (lenght)} 相關 margin-top/ margin-top-width: 寬度 ( 設定上邊界 ) margin-bottom/ margin-bottom-width: 寬度 ( 設定下邊界 ) margin-left/ margin-left-width: 寬度 ( 設定左邊界 ) margin-right/ margin-right-width: 寬度 ( 設定右邊界 )
邊框 適合用在背景的設定, 框線的特殊效果 邊界 :margin 左邊框 : border-left 上邊框 :border-top 邊距 :padding 內容 :content 下邊框 :border-bottom 右邊框 : border-right
邊框 border 功能 設定邊框 語法 { BORDER : ( border-width ) ( border-style ) ( color ) } 相關 border-top/ border-top-width: 寬度 ( 設定上邊框粗細 ) border-bottom/ border-bottom-width: 寬度 ( 設定下邊框粗細 ) border-left/ border-left-width: 寬度 ( 設定左邊框粗細 ) border-right/ border-right-width: 寬度 ( 設定右邊框粗細 ) border-top-color: 顏色 ( 設定上邊框顏色 ) border-bottom-color: 顏色 ( 設定下邊框顏色 ) border-left-color: 顏色 ( 設定左邊框顏色 ) border-right-color: 顏色 ( 設定右邊框顏色 ) border-top-style: 樣式 ( 設定上邊框樣式 ) border-bottom-style: 樣式 ( 設定下邊框樣式 ) border-left-style: 樣式 ( 設定左邊框樣式 ) border-right-style: 樣式 ( 設定右邊框樣式 )
邊距 padding 功能 設定上右下左邊距 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比 % ) 語法 {PADDING: (lenght)} 相關 padding-top/ padding-top-width: 寬度 ( 設定上邊距 ) padding-bottom/ padding-bottom-width: 寬度 ( 設定下邊距 ) padding-left/ padding-left-width: 寬度 ( 設定左邊距 ) padding-right/ padding-right-width: 寬度 ( 設定右邊距 )
背景語法
背景 background 功能 設定背景圖片 顏色 混合 透空 捲動 位置 重複 語法 { BACKGROUND-ATTACHMENT : SCROLL FIXED } 範例 background: black url(shell-bg.jpg) -237px 30px norepeat fixed;
背景圖片捲動 background-attachment 功能 設定背景圖片是否捲動 ( 分為 : 捲動 固定 ) 語法 { BACKGROUND-ATTACHMENT : SCROLL FIXED } 範例 background-attachment:fixed;
背景顏色 background-color 功能 設定背景顏色 透空 語法 { BACKGROUND-COLOR : TRANSPARENT ( color ) } 範例 background-color:#ff3300; background-color:rgb(80%,80%,40%);
背景位置 background-position 功能 設定背景位置 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比 % ) 語法 { BACKGROUND-POSITION : TOP MIDDLE BOTTOM LEFT CENTER RIGHT ( length ) ( position ) } 範例 background-position:center center
背景重複 background-repeat 功能 設定背景重複填滿方式 語法 { BACKGROUND-REPEAT : REPEAT REPEAT-X REPEAT-Y NO-REPEAT } 範例 background-repeat:no-repeat; background-repeat:repeat-x;
超連結相關語法
超連結屬性設定 A:link 連結點範例 :A:link {FONT:ITALIC 細明體 12pt RED} A:visited 瀏覽過連結點範例 :A:visited {FONT:ITALIC 細明體 12pt RED} A:hover 移至連結點範例 :A:hover {FONT:ITALIC 細明體 12pt RED} A:active 選取連結點範例 :A:active {FONT:ITALIC 細明體 12pt RED}
常用的版型
左右兩欄的版型
CSS Source Code #leftcont { width:76%; /* 寬度 76%*/ float:right; /* 位置由右開始 */ } #centercont{ width:20%; /* 寬度 20%*/ float:left; /* 位置由左開始 */ }
三欄的版型
CSS Source Code #centercont{ left:22%; /* 左邊空 22%*/ width:56%; /* 寬度 56%*/ position:absolute; /* 以絕對位置定位 */ } #leftcont { width:20%; /* 寬度 20%*/ left:10px; /* 左邊空 10px*/ position:absolute; /* 以絕對位置定位 */ } #rightcont { width:20%; /* 寬度 20%*/ right:10px; /* 右邊空 10px*/ position:absolute; /* 以絕對位置定位 */ }
具頁首和頁尾的版型
CSS Source Code #header { position: relative; margin: 0; padding: 0; } #topnav { position: relative; background: #eee; } #subnav { position: relative; width: 91%; margin: 0; padding: 0; } #centercont { margin-top: 0px; margin-right:150px; margin-bottom: 0px; margin-left: 150px; line-height: 140%; padding: 0px 20px 50px 20px; position: relative; height:auto!important; height:400px; min-height:400px; } #rightcont { position: absolute; right:0px; top:0px; width:150px; margin: 0; padding: 0 0 10px; color: #334; background: #eee; border-top: 1px solid #ccc; border-bottom: 1px solid #999; line-height: 140%; } #foot { position: relative; width:100% margin: 0; padding: 0; }
製作美觀的表單
傳統的表單
CSS Source Code
CSS 表單
精選範例
橫列選單
CSS Source Code #header { FONT-SIZE: 93%; BACKGROUND: url(bg.gif) #dae0d2 repeat-x 50% bottom; FLOAT: left; WIDTH: 100%; LINE-HEIGHT: normal } #header UL { PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 10px; LIST-STYLE-TYPE: none } #header LI { PADDING-RIGHT: 0px; PADDING-LEFT: 9px; BACKGROUND: url(left.gif) no-repeat left top; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } #header A { PADDING-RIGHT: 15px; DISPLAY: block; PADDING-LEFT: 6px; FONT-WEIGHT: bold; BACKGROUND: url(right.gif) no-repeat right top; FLOAT: left; PADDING-BOTTOM: 4px; COLOR: #765; PADDING-TOP: 5px; TEXT-DECORATION: none } #header A { FLOAT: none } #header A:hover { COLOR: #333 } #header #current { BACKGROUND-IMAGE: url(left_on.gif) } #header #current A { BACKGROUND-IMAGE: url(right_on.gif); PADDING-BOTTOM: 5px; COLOR: #333 }
HTML Code <div id="header"> <ul> <li id="current"><a href="index.php">home</a></li> <li><a href="news.php">news</a></li> <li><a href="employee.php">employee</a></li> </ul> </div>
直列選單
CSS Source Code #menu3 { width: 200px; border: 1px solid #ccc; margin: 10px; } #menu3 li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #888; display: block; background: url(menu3.gif); padding: 8px 0 0 30px; } #menu3 li a:hover, #menu3 li #current, #menu3 li a:active { color: #283A50; background: url(menu3.gif) 0-32px; padding: 8px 0 0 30px; }
HTML Code <div id="menu3"> <ul> </ul> </div> <li><a href="index.php">home</a></li> <li><a href="news.php">news</a></li> <li><a href="employee.php">employee</a></li>
下拉式選單
CSS Source Code
CSS 下拉式選單
參考網站 國外 http://www.csszengarden.com/ 國內