10 css設計

CSS 設計課程編號： 113186 授課時間：每週一晚上 7 點－ 9 點 40 分授課講師：郭欣彥

Outline ,[object Object],[object Object],[object Object],[object Object],[object Object]

CSS 功效 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

CSS 特色 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

CSS 用法 ,[object Object],[object Object],[object Object],[object Object],<head> <style type=“text/css”> body{font-size:10pt} </style> </head> <head> <link href="style1.css" rel="stylesheet" type="text/css" /> </head>

CSS 判斷規則 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

CSS 語法 ,[object Object],[object Object],[object Object],<style type="text/css"> .td_bk_1 {background-image: url(007.jpg);} </style> <style type="text/css"> .style1 {color: #660033;} </style>

CSS 語法 ,[object Object],[object Object],[object Object],[object Object],<style type="text/css"> body{font-size:10pt} </style> <style type="text/css"> body {background-color: #CCFFFF;} </style> <style type="text/css"> h1 { font-family: " 標楷體 "; color: #FF0066; } </style>

CSS 語法 ,[object Object],[object Object],body{ /* body 不一定要設為 body ，可另取名 */ background-image:url( 圖片位址 ); /* 圖片連結位置 */ background-attachment:fixed; /* 圖片位置是否要固定 */ background-repeat:no-repeat; /* 圖片是否要重複顯示 */ background-position:right; /* 圖片對齊格式 */ width:400px; /* 文字區塊的寬度 */ } body { /* body 不一定要設為 body ，可另取名 */ border-XXX-width: 1px; /* 邊框寬度 */ border-XXX-style: dotted; /* 邊框樣式 */ border-XXX-color: #0066FF; /* 邊框顏色 */ }

CSS 語法 ,[object Object],body { /* 不一定要設為 body ，可另取名 */ color: #006699; /* 文字顏色 */ font-family:"Times New Roman"; /* 文字字型 */ font-size: 14pt; /* 文字大小 */ font-style: normal; /* 文字樣式 */ line-height: 1.5px; /* 文字行高 */ font-weight: bold; /* 文字粗細 */ font-variant: normal; /* 文字變形 */ text-transform: capitalize; /* 文字大小寫 */ text-decoration: underline overline line-through blink; /* 文字裝飾 */ vertical-align: super ; /* 文字上、下標字 */ text-align: center; /* 文字對齊方式（水平） */ vertical-align: top; /* 文字對齊方式（垂直） */ }

CSS 語法 ,[object Object],body{ SCROLLBAR-FACE-COLOR: 色碼 ; /* 設定軸面顏色 */ SCROLLBAR-HIGHLIGHT-COLOR: 色碼 ; /* 設定軸面三角左邊顏色 */ SCROLLBAR-SHADOW-COLOR: 色碼 ; /* 設定軸面三角右邊顏色 */ SCROLLBAR-3DLIGHT-COLOR: 色碼 ; /* 設定左立體邊顏色 */ SCROLLBAR-DARKSHADOW-COLOR: 色碼 ; /* 設定右立體面顏色 */ SCROLLBAR-ARROW-COLOR: 色碼 ; /* 設定箭頭的顏色 */ SCROLLBAR-TRACK-COLOR: 色碼 ; /* 設定軸軌的顏色 */ }

CSS 語法 ,[object Object],[object Object],<style type="text/css"> A:link {color: blue} A:visited {color: gray} A:active {color: green} A:hover {color: red} </style> 樣式表 <CSS 樣式表開始 > 一般連結：｛顏色：藍色｝參觀過的連結：｛顏色：灰色｝正在執行的連結：｛顏色：綠色｝當滑鼠移到連結上：｛顏色：紅色｝ <CSS 樣式表結束 > <style type="text/css"> A:link {color: blue} A:visited {color: gray} A:active {color: green} A:hover {color: red} </style> 其意義如下原始 CSS

10 css設計

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (16)

Similar a 10 css設計

Similar a 10 css設計 (20)

Más de 欣彥郭

Más de 欣彥郭 (14)

10 css設計

10 css設計

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (16)

Similar a 10 css設計

Similar a 10 css設計 (20)

Más de 欣彥 郭

Más de 欣彥 郭 (14)

10 css設計

Más de 欣彥郭

Más de 欣彥郭 (14)