CSS 常用語法

CSS 層疊樣式表 Cascading Style Sheets 樣式通常是將他保存在外部的 .css 檔案文件中。
由簡單的 CSS 外部樣式表，使網頁開發提高工作效率可同時改變網站中所有頁面佈局和外觀樣式。

文字風格樣式 CSS文字風格樣式範例

color: #0f0f0f; /*文字顏色*/
font-family: Arial, Tahoma; /*文字風格字型*/
font-size: 13px; /*文字大小*/
font-weight: bold; /*文字粗體*/
font-style: italic; /*文字斜體*/
font-variant: small-caps; /*小字體*/
letter-spacing: 1px; /*字體間距離*/
line-height: 18px; /*設定行高*/
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; /*文字分散對齊*/
vertical-align: sub; /*下標字*/
vertical-align: super; /*上標字*/
vertical-align: top; /*垂直向上對齊*/
vertical-align: bottom; /*垂直向下對齊*/
vertical-align: middle; /*垂直置中對齊*/
vertical-align: text-top; /*文字垂直向上對齊*/
vertical-align: text-bottom; /*文字垂直向下對齊*/
word-spacing: 5px; /*設定詞的間距(詞間需有空白)*/
word-wrap: break-word; /*任意斷字，適用於英文*/
word-wrap: nowrap; /*強制水平排序不斷行*/

項目符號及編號 CSS項目樣式範例

list-style-type: none; /*沒有標誌，不編號*/
list-style-type: disc; /*實心圓形符號*/
list-style-type: circle; /*空心圓形符號*/
list-style-type: square; /*實心方形符號*/
list-style-type: decimal; /*阿拉伯數字*/
list-style-type: decimal-leading-zero; /*阿拉伯數字(十進制前置零)*/
list-style-type: lower-roman; /*小寫羅馬數字*/
list-style-type: upper-roman; /*大寫羅馬數字*/
list-style-type: lower-alpha; /*小寫英文字母*/
list-style-type: upper-alpha; /*大寫英文字母*/
list-style-type: lower-greek; /*希臘語*/
list-style-type: armenian; /*亞美尼亞*/
list-style-type: georgian; /*格魯吉亞語*/
list-style-image: url(dot.gif); /*圖片式符號*/
list-style-position: outside; /*凸排(預設值)*/
list-style-position: inside; /*縮排*/

背景樣式 CSS背景樣式範例

background-color: #5f5f5f; /*背景色彩*/
background: transparent; /*透明背景*/
background-image: url(bg.gif); /*背景圖片*/
background-attachment: fixed; /*浮水印固定背景*/
background-repeat: repeat; /*重複排列-網頁預設*/
background-repeat: no-repeat; /*不重複排列*/
background-repeat: repeat-x; /*在 X 軸重複排列*/
background-repeat: repeat-y; /*在 Y 軸重複排列*/
background-position: 90% 90%; /*背景圖片 X 與 Y 軸的位置*/
background-position: top; /*向上對齊*/
background-position: bottom; /*向下對齊*/
background-position: left; /*向左對齊*/
background-position: right; /*向右對齊*/
background-position: center; /*置中對齊*/

指定滑鼠游標的型態 CSS滑鼠樣式範例

cursor: crosshair; /*十字線型*/
cursor: cell; /*十字小方格*/
cursor: move; /*十字箭頭*/
cursor: all-scroll; /*四方捲動*/
cursor: n-resize; /*箭頭朝上*/
cursor: s-resize; /*箭頭朝下*/
cursor: e-resize; /*箭頭朝右*/
cursor: w-resize; /*箭頭朝左*/
cursor: nw-resize; /*箭頭朝左上*/
cursor: sw-resize; /*箭頭斜左下*/
cursor: se-resize; /*箭頭斜右下*/
cursor: ne-resize; /*箭頭朝右上*/
cursor: col-resize; /*改變直行數*/
cursor: row-resize; /*改變橫欄數*/
cursor: text; /*I 輸入文字符號*/
cursor: vertical-text; /*垂直文字*/
cursor: help; /*協助加一問號*/
cursor: wait; /*等待中；漏斗*/
cursor: progress; /*進行中；作業中*/
cursor: pointer; /*手型，表示超連結*/
cursor: not-allowed; /*無法使用*/
cursor: context-menu; /*選單*/

框線樣式 CSS框線樣式範例

border-top:/*上框線*/
border-bottom:/*下框線*/
border-left:/*左框線*/
border-right:/*右框線*/
border:/*四邊框線*/
border-style: solid /*實線框*/
border-style: dotted /*點線框*/
border-style: dashed /*分段線*/
border-style: double /*雙線框*/
border-style: groove /*立體內凸框*/
border-style: ridge /*立體浮凸框*/
border-style: inset /*凹框*/
border-style: outset /*凸框*/

容器外緣及邊框空白(邊界)樣式 CSS邊界樣式範例

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; /*左邊框空白*/

物件定位 CSS物件定位範例

position: static; /*依照正常流程佈局*/
position: relative; top: 10px; left: 10px; /*物件左上角開始位置*/
position: absolute; top: 10px; left: 10px; /*網頁左上角開始位置*/
position: fixed; top: 10px; left: 10px; /*固定在參考物上*/

超連結的連結樣式

a /*加入所有超連結樣式*/
a:link /*加入超連結文字樣式*/
a:visited /*加入瀏覽過的連結文字樣式*/
a:hover /*加入滑鼠指標指著連結樣式*/
a:active /*加入按下啟用連結的樣式*/