1.CSS 中邊框的使用 2.CSS 中邊界的使用 16.1 CSS 中邊框的使用 屬性名稱 屬性值 說明 border-color 十六進位 可依序設置上，右，下，左線顏色 英文名稱 border-color:red(四邊均為紅色) 三原色 border-color:red green (上下為紅 ...
1.CSS 中邊框的使用
2.CSS 中邊界的使用
16.1 CSS 中邊框的使用
屬性名稱 屬性值 說明
border-color 十六進位 可依序設置上，右，下，左線顏色
英文名稱 border-color:red(四邊均為紅色)
三原色 border-color:red green
(上下為紅色，左右為綠色)
border-color:red green blue
(上為紅色、左右為綠色、下為藍色)
border-color:red green blue yellow
(上右下左分別為紅綠藍黃)
border-style none 不顯示邊線
dotted 點線
dashed 虛線
solid 實線
double 雙線
border-width 長度 border-width:0.2cm 0.3cm 0.4cm 0.5cm;
border-width:1 2 3 4;
簡化方案：border:形態 長度 顏色
例如 border:1px solid black;
16.2 CSS 中邊界的使用
padding 屬性介紹
屬性名稱 屬性值 說明
padding-bottom 長度/百分比 元件下端邊線的空隙
padding-left 長度/百分比 元件左端邊線的空隙
padding-right 長度/百分比 元件右端邊線的空隙
padding-top 長度/百分比 元件上端邊線的空隙
簡易寫法：padding:10px
padding:2px 4px
padding:2px 6px 10px
padding:1px 2px 3px 4px
margin 系列屬性介紹
屬性名稱 屬性值 說明
margin-bottom auto 自動調整空隙
長度/百分比 設置下端空隙
margin-left auto 自動調整空隙
長度/百分比 設置左端空隙
margin-right auto 自動調整空隙
長度/百分比 設置右端空隙
margin-top auto 自動調整空隙
長度/百分比 設置上端空隙
簡化方案：margin:2px 4px
margin:2px 6px 10px
margin:1px 2px 3px 4px
常用網頁頂格設置：margin:0;
CSS 1CSS 中邊框的使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>中邊框的使用</title>
<style type="text/css">
img{
border-width: 6px;
border-color:red green blue yellow;
border-style: solid;/*必須要填，不填預設為不顯示邊線*/
}
</style>
</head>
<body>
<img src="images/pic7.jpg">
<P><pre>
CSS 中邊框的使用
屬性名稱 屬性值 說明
border-color 十六進位 可依序設置上，右，下，左線顏色
英文名稱 border-color:red(四邊均為紅色)
三原色 border-color:red green
(上下為紅色，左右為綠色)
border-color:red green blue
(上為紅色、左右為綠色、下為藍色)
border-color:red green blue yellow
(上右下左分別為紅綠藍黃)
border-style none 不顯示邊線
dotted 點線
dashed 虛線
solid 實線
double 雙線
border-width 長度 border-width:0.2cm 0.3cm 0.4cm 0.5cm;
border-width:1 2 3 4;
簡化方案：border:形態 長度 顏色
例如 border:1px solid black;
</pre></P>
</body>
</html>
CSS 2CSS 中邊界的使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>中邊界的使用</title>
<style type="text/css">
td{
padding-top:20px;
padding-left:10px;
}
table{
margin-top: 80px;
}
</style>
</head>
<body>
<table border="1" width="300" height="200" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">padding 屬性介紹</td>
</tr>
</table>
<P><pre>
CSS 中邊界的使用
padding 屬性介紹
屬性名稱 屬性值 說明
padding-bottom 長度/百分比 元件下端邊線的空隙
padding-left 長度/百分比 元件左端邊線的空隙
padding-right 長度/百分比 元件右端邊線的空隙
padding-top 長度/百分比 元件上端邊線的空隙
簡易寫法：padding:10px
padding:2px 4px
padding:2px 6px 10px
padding:1px 2px 3px 4px
margin 系列屬性介紹
屬性名稱 屬性值 說明
margin-bottom auto 自動調整空隙
長度/百分比 設置下端空隙
margin-left auto 自動調整空隙
長度/百分比 設置左端空隙
margin-right auto 自動調整空隙
長度/百分比 設置右端空隙
margin-top auto 自動調整空隙
長度/百分比 設置上端空隙
簡化方案：margin:2px 4px
margin:2px 6px 10px
margin:1px 2px 3px 4px
常用網頁頂格設置：margin:0;
</pre></P>
</body>
</html>
