CSS的運用 講者：楊國棟 2006/06/12
課程綱要 概述CSS的概念 瞭解CSS的指令 活用CSS的技巧 Design By Kevin Yang
事前準備 http://myweb.nuk.edu.tw/~guest/ 選擇資料夾/教育訓練/CSS的運用 下載講義 下載範例檔及圖片 CSS的運用.ptt 下載範例檔及圖片 lab0.htm arrow.gif、arrow2.gif 更改範例檔內文 Design By Kevin Yang
什麼是CSS CSS的全名是Cascading Style Sheets（串接樣式表） CSS是用來延伸html而非取代htnl,是用來補html的不足 Design By Kevin Yang
CSS的特點 加快網頁傳輸的速度： 集中管理樣式： 共享樣式設定： 減少圖檔的使用,便可以達到文字變化的需求 當修改時只需針對樣式修改即可 Design By Kevin Yang
為何使用CSS 提供HTML不支援的屬性 加快網頁設計速度 減少網頁體積 政府推動無障礙網站 減少使用框架 大專院校 檢測是否符合無障礙網站 95年底：A 96年底：A+ 檢測是否符合無障礙網站 http://enable.nat.gov.tw/index.jsp 減少使用框架 Design By Kevin Yang
單位 絕對數值單位 相對數值單位 in 英吋(1in=2.54cm) cm 公分 mm 公厘 pt 點(1pt=172in) pc Pica(1pica=12pt) em 在特定範圍下有效字型的高度為1的單位 ex 在特定範圍下有效字型的小寫之『x』的高度為1的單位 px 螢幕上最小一點的單位 % 相對於其他基準表示大小的比例 Design By Kevin Yang
CSS基本語法 選擇器(selector){性質(property)：值(value)} eq: h1{font-size:24pt} h1,p{font-size:24pt; color:#0000ff} 多個HTML標記間以逗號 ( , ) 分隔 多個屬性定義間以分號 ( ; ) 分隔 Design By Kevin Yang
CSS的用法 Inline (同列) Embedding (內嵌) Linking (連結) <元素名 style=“~”> <style type=“text/css”> ~ </style> Linking (連結) <link rel=“stylesheet” href=“URL” type=“text/css”> Design By Kevin Yang
CSS用法-Inline(同列) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=big5"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>同列範例</title> </head> <body style="margin:0;color:#000000;background:#FFD350"> <h1 style="font-size:20px;margin:0;padding:0.3em;color:#ffffff;background-color:#694F00"> 國立高雄大學 </h1> <p style="line-height:1.8;margin:1.6em 10% 1em 10%;padding:1em;border:dotted 3px #ffffff"> 圖書資訊館 </p> </body> </html> Design By Kevin Yang
CSS用法-Embedding(內嵌) <body> <h1> 國立高雄大學 </h1> … <title>內嵌範例</title> <style type="text/css"> <!-- body{ margin:0; color:#000000; background:#FFD350; } h1{ font-size:20px; padding:0.3em; color:#ffffff; background-color:#000000 p{ line-height:1.8; margin:1.6em 10% 1em 10%; padding:1em; border:dotted 3px #ffffff --> </style> </head> <body> <h1> 國立高雄大學 </h1> <p> 圖書資訊館 </p> </body> </html> Design By Kevin Yang
CSS用法-Linking(連結) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=big5"> <title>連結範例</title> <link rel="stylesheet" href="default.css" type="text/css"> </head> <body> <h1> 國立高雄大學 </h1> <p> 圖書資訊館 </p> </body> </html> Design By Kevin Yang
選擇器 元素名{~} 元素名,元素名,…{~} *{~} #ID{~} #myid{background:#ffffff} h1{color:#ffffff} 元素名,元素名,…{~} h1,p{font-size:medium} *{~} *{font-weight:normal} #ID{~} #myid{background:#ffffff} .類別名{~} .myclass{color:#ff6600} 元素名 #ID名{~} p #myid{padding:0.3em} 元素名 .類別名{~} h1 .myclass{color:blue} Design By Kevin Yang
文字的顏色 color 【功能】指定文字顏色 【語法】 { COLOR : ( color ) } ( color ) 可為 1、顏色名稱 ( 16種 ) 2、16進制表示法 - #RRGGBB ( 00暗~FF亮 ) 、 3、#RGB ( 0暗~F亮 ) 表紅綠藍強度 【範例】 P {COLOR:RED} P {COLOR:#FF0000} P {COLOR:#F00} Design By Kevin Yang
字型 font 【功能】設定字體樣式、大小寫變化、粗細、文字行列高度、字型 【語法】{ FONT : ( font-style )︱( font-variant )︱( font-weight )︱ ( font-size )︱( font-family )︱/ ( line-height ) } 【範例】 H1 {FONT:ITALIC BOLD 細明體 12pt/18pt} Design By Kevin Yang
字型組 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"} Design By Kevin Yang
字型大小 font-size 【功能】設定字體大小 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% ) 【語法】{ FONT-SIZE : LARGE︱MEDIUM︱SMALLER︱( length )︱( percentage ) } 【範例】 {FONT-SIZE:LARGE} {FONT-SIZE:10pt} {FONT-SIZE:50%} Design By Kevin Yang
字型樣式 font-style 【功能】設定字體樣式 ( 分為 : 正常、斜體 ) 【語法】{ FONT-STYLE : NORMAL︱ITALIC } 【範例】 {FONT-STYLE:ITALIC} Design By Kevin Yang
字型粗細 font-weight 【功能】設定字體粗細 ( 分為 : 正常、粗字體 ) 【語法】{ FONT-WEIGHT : NORMAL︱BOLD } 【範例】 {FONT-WEIGHT:BOLD} Design By Kevin Yang
字體變化 font-variant 【功能】設定字體變化 ( 分為 : 正常、小字體 ) 【語法】{ FONT-VARIANT : NORMAL︱SMALL-CAPS } 【範例】 {FONT-VARIANT:SMALL-CAPS} Design By Kevin Yang
Lab <style type="text/css"> html {} body {font: 80% 新細明體,Verdana, Arial,sans-serif; color: black;} h1 {font-size: 200%;} h3 {font-size: 1.33em;} h4 {font-size: 1em;} h5 {font-size: 1em;} h1, h3, h4 {} p {} div#entry {} div#sidebar {} </style> Design By Kevin Yang
背景 background 【功能】設定背景圖片、顏色、混合、透空、捲動、位置、重複 【語法】{ BACKGROUND-ATTACHMENT : SCROLL︱FIXED } 【範例】 background: black url(shell-bg.jpg) -237px 30px no-repeat fixed; Design By Kevin Yang
背景圖片捲動 background-attachment background-attachment:fixed; 【功能】設定背景圖片是否捲動 ( 分為 : 捲動、固定 ) 【語法】{ BACKGROUND-ATTACHMENT : SCROLL︱FIXED } 【範例】 background-attachment:fixed; Design By Kevin Yang
背景顏色 background-color background-color:#ff3300; 【功能】設定背景顏色、透空 【語法】{ BACKGROUND-COLOR : TRANSPARENT︱( color ) } 【範例】 background-color:#ff3300; background-color:rgb(80%,80%,40%); Design By Kevin Yang
背景位置 background-position background-position:center center 【功能】設定背景位置 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% ) 【語法】{ BACKGROUND-POSITION : TOP︱MIDDLE︱BOTTOM︱LEFT︱CENTER︱RIGHT︱( length )︱( position ) } 【範例】 background-position:center center Design By Kevin Yang
背景重複 background-repeat background-repeat:no-repeat; 【功能】設定背景重複填滿方式 【語法】{ BACKGROUND-REPEAT : REPEAT︱REPEAT-X︱REPEAT-Y︱NO-REPEAT } 【範例】 background-repeat:no-repeat; background-repeat:repeat-x; Design By Kevin Yang
Lab html {} body {font: 80% 新細明體,Verdana… background: rgb(95%,95%,80%); color: black;} h1 {font-size: 200%; background: rgb(85%,85%,70%);} h3 {font-size: 1.33em;} h4 {font-size: 1em;} h5 {font-size: 1em;} h1, h3, h4 {} p {} div#entry {} div#sidebar {} Design By Kevin Yang
文字間隙 letter-spacing letter-spacing:0.5em; 【功能】設定文字間隙 ( 單位屬性 : 點pt、英寸in、公分cm、像素px ) 【語法】{ LETTER-SPACING : NORMAL︱( length ) } 【範例】 letter-spacing:0.5em; Design By Kevin Yang
文字高度 line-height line-height:normal; line-height:1.5; 【功能】設定文字行列高度 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% ) 【語法】{ LINE-HEIGHT : NORMAL︱( number )︱( length )︱( percentage ) } 【範例】 line-height:normal; line-height:1.5; line-height:180%; Design By Kevin Yang
調整文字 text-align 【功能】設定調整文字 ( 可設左邊、右邊、置中、整齊 ) 【語法】{ TEXT-ALIGN : LEFT︱RIGHT︱CENTER︱JUSTIFY } 【範例】 text-align:left; text-align:center; text-align:right; Design By Kevin Yang
文字裝飾 text-decoration 【功能】設定文字裝飾 ( 分為 : 無、加底線、加橫線、加頂線 ) 【語法】{ TEXT-DECORATION : NONE︱UNDERLINE︱LINE-THROUGH︱OVERLINE } 【範例】 text-decoration:underline; text-decoration:line-through; text-decoration:overline; text-decoration:underline overline; Design By Kevin Yang
文字縮排 text-indent 【功能】設定文字縮排 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% ) 【語法】{ TEXT-INDENT : ( length )︱( percentage ) } 【範例】 text-indent:1em; Design By Kevin Yang
文字改變 text-transform 【功能】設定文字改變 ( 可設無、第一個字母大寫、大寫、小寫 ) 【語法】{ TEXT-TRANSFORM : NONE︱CAPITALIZE︱UPPERCASE︱LOWERCASE } 【範例】 text-transform:lowercase; /*全部小寫*/ text-transform:uppercase; /*全部大寫*/ text-transform:capitalize; /*各單字頭一個英文字母大寫*/ Design By Kevin Yang
Lab html {} body {font: 80% 新細明體,Verdana, Arial,sans-serif;…} h1 {font-size: 200%; letter-spacing: 3px; background: rgb(85%,85%,70%);} h3 {font-size: 1.33em;} h4 {font-size: 1em;} h5 {font-size: 1em;} h1, h3, h4 {line-height: 1em;} p {line-height: 1.5;} div#entry {} div#sidebar {float: left; /*配置位置*/ width: 15%;} Design By Kevin Yang
框 邊界：margin 邊框：border 邊距：padding 內容：content Design By Kevin Yang
邊界 適合用在位置的調整 邊框：border 邊距：padding 內容：content 上邊界：margin-top 左邊界：margin-left 右邊界：margin-right 下邊界：margin-bottom Design By Kevin Yang
邊界 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：寬度（設定右邊界） Design By Kevin Yang
邊框 適合用在背景的設定，框線的特殊效果 邊界：margin 邊距：padding 內容：content 上邊框：border-top 左邊框：border-left 右邊框：border-right 下邊框：border-bottom Design By Kevin Yang
邊框 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：樣式（設定右邊框樣式） Design By Kevin Yang
邊距 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：寬度（設定右邊距） Design By Kevin Yang
Lab html {margin: 0; padding: 0;} body {font: 80% 新細明體,Verdana, Arial,sans-serif; margin: 0; padding: 0; background: rgb(95%,95%,80%); color: black;} h1 {font-size: 200%; letter-spacing: 3px; margin: 0; padding: 0.66em 0 0.33em 29%; background: rgb(85%,85%,70%);} h3 {font-size: 1.33em; padding: 0; border-bottom: 1px solid black;} h4 {font-size: 1em; padding: 0.33em 0 0; border-bottom: 1px solid rgb(50%,50%,35%);} h5 {font-size: 1em; margin: 1em 0 0 0; padding: 0;} h1, h3, h4 {line-height: 1em;} p {line-height: 1.5; margin: 0.5em 0 1em;} div#entry {margin: 2em 10% 1em 23%; div#sidebar {float: left; width: 15%; margin: 2em 0 0 2%;} Design By Kevin Yang
Lab-進階處理 刪掉項目符號 div#sidebar {float: left;width: 23%;margin: 2em 0 0 2%;} #sidebar ul{list-style:none;margin:0;padding:0;} </style> Design By Kevin Yang
Lab-進階處理 加入分隔線 div#sidebar {float: left;width: 23%;margin: 2em 0 0 2%;} #sidebar ul{list-style:none;margin:0;padding:0;} #sidebar li{padding:0.5em 0 0.25em; /*加寬*/ border-bottom:1px solid rgb(84%,84%,69%);} </style> Design By Kevin Yang
超連結屬性設定 A:link 連結點 A:visited 瀏覽過連結點 A:hover 移至連結點 A:active 選取連結點 範例 :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} Design By Kevin Yang
Lab-進階處理 超連結的顏色變化 #sidebar li{padding:0.5em 0 0.25em; /*加寬*/ border-bottom:1px solid rgb(84%,84%,69%);} #sidebar a{text-decoration:none;}/*去除連結底線*/ #sidebar a:link{color:rgb(20%,40%,0%);}/*連結色彩*/ #sidebar a:visited{color:rgb(58%,68%,40%);}/*瀏覽過的色彩*/ </style> Design By Kevin Yang
Lab-進階處理 箭頭樣式 div#sidebar {float: left;width: 23%;margin: 2em 0 0 2%; padding:0 0 15px; /*空出空間讓箭頭圖能顯示出來*/ background:url(arrow.gif) 100% 100% no-repeat;} #sidebar ul{list-style:none;margin:0;padding:0; padding:0 0 10px; /*延伸底部內距，將箭頭向下推*/ border-right:3px double rgb(50%,50%,35%);} #sidebar h4,#sidebar ul{margin:0 6px 0 0;} /*空出右邊空間讓線可以顯示出來*/ #sidebar li{padding:0.5em 0 0.25em; /*加寬*/ border-bottom:1px solid rgb(84%,84%,69%);} </style> Design By Kevin Yang
Lab-進階處理 添加連結樣式 #sidebar ul{list-style:none;margin:0;padding:0; padding:0 0 10px; border-right:3px double rgb(50%,50%,35%); text-align:right;}/*文字對齊靠右*/ #sidebar li{padding:0.5em 0 0.25em; /*border-bottom:1px solid rgb(84%,84%,69%);*/} #sidebar a{text-decoration:none;padding:0 0.5em 0 0; border-bottom:1px solid rgb(84%,84%,69%);} /*移除列表框線改用連結本身框線*/ Design By Kevin Yang
Lab-進階處理 添加連結樣式 #sidebar a:visited{color:rgb(58%,68%,40%);} #sidebar a:hover{color:rgb(10%,20%,0%); /*滑鼠移至時字的顏色改變*/ border-color:rgb(98%,48%,40%); /*滑鼠移至時框線的顏色改變*/ background:url(arrow2.gif) 0 100% no-repeat; /*加入箭頭圖*/ padding-left:15px;} /*增加內距讓箭頭圖避免與內文重疊*/ Design By Kevin Yang
Lab-進階處理 避免斷行 #sidebar a{text-decoration:none;padding:0 0.5em 0 0; margin-left:15px; border-bottom:1px solid rgb(84%,84%,69%);} #sidebar a:hover{color:rgb(10%,20%,0%); border-color:rgb(98%,48%,40%); background:url(arrow2.gif) 0 100% no-repeat; padding-left:15px; margin-left:0;} Design By Kevin Yang
參考資料 參考CSS性質一覽表 CSS禪意花園 Eric Meyer 再談CSS網頁排版設計 詳解JavaScript & HTML & CSS語法辭典 Design By Kevin Yang
謝謝指教！