CSS的運用講者：楊國棟 2006/06/12.

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+ 檢測是否符合無障礙網站減少使用框架 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">  </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 em 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 em; /*加寬*/ 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 em; /*加寬*/ 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 em; /*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

謝謝指教！

CSS的運用講者：楊國棟 2006/06/12.

Similar presentations

Presentation on theme: "CSS的運用講者：楊國棟 2006/06/12."— Presentation transcript:

Similar presentations

About project

反馈

请登录

Auth with social network:

CSS的運用 講者：楊國棟 2006/06/12.

Similar presentations

Presentation on theme: "CSS的運用 講者：楊國棟 2006/06/12."— Presentation transcript:

Similar presentations

About project

反馈

CSS的運用講者：楊國棟 2006/06/12.

Presentation on theme: "CSS的運用講者：楊國棟 2006/06/12."— Presentation transcript: