CSS 教學

我留有一份以前 OECSPACE 網站所整理的 CSS 列表，對於 OECSPACE 關站實在有點可惜，我都把它當成 CSS 字典在查。
連結樣式

a {/*放入所有超連結樣式*/}
a:link {/*放入超連結文字樣式*/}
a:visited {/*放入瀏覽過的連結文字樣式*/}
a:active {/*放入按下連結的樣式*/}
a:hover {/*放入滑鼠移至連結樣式*/}

這邊大概注意 link visited active hover 這個4個動作，像是搭配 div 可做為大小變化控制。

.a1 {
 background:#000;
 height:25px;
 width:200px;
}
.a1:hover {
 height:250px;
 background-color:#FF0;
}

---

文字變化

color: #ffffff; /*文字顏色*/;
font-family: 微軟正黑體; /*文字字型*/;
font-size: 9pt; /*文字大小*/;
font-style: italic; /*文字斜體*/;
font-variant: small-caps; /*小字體*/;
letter-spacing: 1pt; /*字體間距離*/;
line-height: 200%; /*設定行高*/;
font-weight: bold; /*文字粗體*/;
vertical-align: sub; /*下標字*/;
vertical-align: super; /*上標字*/;
text-decoration: line-through; /*加刪線*/;
text-decoration: overline; /*加頂線*/;
text-decoration: underline; /*加底線*/;
text-decoration: none; /*刪除連結底線*/;
text-transform: capitalize; /*字首大寫*/;
text-transform: uppercase; /*英文大寫*/;
text-transform: lowercase; /*英文小寫*/;
text-align: right; /*文字靠右對齊*/;
text-align: left; /*文字靠左對齊*/;
text-align: center; /*文字置中對齊*/;
text-align: justify; /*文字分散對齊*/;
word-spacing: 5px; /*半形空格的間距*/;
vertical-align: top; /*垂直向上對齊*/;
vertical-align: bottom; /*垂直向下對齊*/;
vertical-align: middle; /*垂直置中對齊*/;
vertical-align: text-top; /*文字垂直向上對齊*/;
vertical-align: text-bottom; /*文字垂直向下對齊*/;

font-family 大概常用 Arial, Helvetica, sans-serif，其他字型可以參考 w3school CSS Web Safe Fonts。
text-align 這個東東在標準下只對文字有用，對於 div 是沒用的，但是為什麼特別提他，就是因為IE...，對於 DIV 排版置中方法後面會再提到。

---

框線

border-color:/*框線顏色*/;
border-style:/*框線樣式*/;
border-top:/*上框線*/;
border-bottom:/*下框線*/;
border-left:/*左框線*/;
border-right:/*右框線*/;
border:/*四邊框線*/;

框線樣式 solid 實線框
dotted 虛線框
double 雙線框
groove 立體內凸框
ridge 立體浮凸框
inset 凹框
outset 凸框
框線樣式解說
border: 1px solid #6699cc;
框線縮寫法
border: solid 1px #000;

---

邊界邊框

margin-top: 10px; /*上邊界*/;
margin-right: 10px; /*右邊界值*/;
margin-bottom: 10px; /*下邊界值*/;
margin-left: 10px; /*左邊界值*/;
margin: 10px; /*四邊邊界值*/;
padding-top: 10px; /*上邊框空白*/;
padding-right: 10px; /*右邊框空白*/;
padding-bottom: 10px; /*下邊框空白*/;
padding-left: 10px; /*左邊框空白*/;

邊界和邊框用法很類似，差於一個在外一個在內。
快速寫法 margin: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
依序為上右下左，依順時鐘方向記。 margin: 10px 10px;
padding: 10px 10px;
依序為上下同樣大小、左右統一大小。
margin: 10px auto;
左右為自動大小運用在 DIV 置中排版上

---

物件定位

position: relative;top: 10px;left: 10px; /*物件左上角開始位置*/ ;
position : absolute;top: 10px;left: 10px; /*網頁左上角開始位置*/;

---

項目符號及編號

list-style-type: none; /*不編號*/;
list-style-type: decimal; /*阿拉伯數字*/;
list-style-type: lower-roman; /*小寫羅馬數字*/;
list-style-type: upper-roman; /*大寫羅馬數字*/;
list-style-type: lower-alpha; /*小寫英文字母*/;
list-style-type: upper-alpha; /*大寫英文字母*/;
list-style-type: disc; /*實心圓形符號*/;
list-style-type: circle; /*空心圓形符號*/;
list-style-type: square; /*實心方形符號*/;
list-style-image: url(dot.gif); /*圖片式符號*/;
list-style-position: outside; /*凸排*/;
list-style-position: inside; /*縮排*/

---