CSS 常用語法

以下為CSS常用的標籤，在此記錄用，以便查詢。

 

 

 

 

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

文字變化
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; /*文字垂直向下對齊*/;

框線變化
border-top:/*上框線*/;
border-bottom:/*下框線*/;
border-left:/*左框線*/;
border-right:/*右框線*/;
border:/*四邊框線*/;

邊界樣式
margin-top: 10px; /*上邊界*/;
margin-right: 10px; /*右邊界值*/;
margin-bottom: 10px; /*下邊界值*/;
margin-left: 10px; /*左邊界值*/;
margin: 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; /*縮排*/

滑鼠樣式變化
cursor: progress;/*作業中*/;
cursor: crosshair;/*十字型 */;
cursor: n-resize;/*箭頭朝上*/;
cursor: s-resize;/*箭頭朝下*/;
cursor: move;/*十字箭頭*/;
cursor: e-resize;/*箭頭朝右*/;
cursor: w-resize;/*箭頭朝左*/;
cursor: help;/*加一問號*/;
cursor: nw-resize;/*箭頭朝左上*/;
cursor: se-resize;/*箭頭斜右下*/;
cursor: text;/*文字I型*/;
cursor: sw-resize;/*箭頭斜左下*/;
cursor: ne-resize;/*箭頭朝右上*/;
cursor: wait;/*漏斗*/;
cursor: pointer;/*手型*/;
cursor: not-allowed;/*無法使用 */;
cursor: url(“游標檔名.cur”),text;;/*游標圖案*/;