教你認識常用CSS語法
列出所有 CSS 屬性。
在您看完這篇內容後，您將會 了解 CSS 的基本概念，同時可以利用常見的 CSS 屬性來改變您網站的外觀。
文字樣式
- color: #fff; (文字顏色)
- font-family: Arial, Tahoma;(文字字型)
- font-size: 16px; (文字大小)
- font-weight: bold;(文字粗體)
- 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: right; (文字靠右對齊)
- text-align: center; (文字置中對齊)
- text-align: justify; (文字分散對齊)
- text-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; (強制水平排序不斷行)
項目符號及編號
- list-style-type: none; (不編號)
- list-style-type: disc; (實心圓形符號)
- list-style-type: circle;(空心圓形符號)
- list-style-type: square; (實心方形符號)
- 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-image: url(dot.gif); (圖片式符號)
- list-style-position: outside; (凸排)
- list-style-position: inside; (縮排)
背景樣式
- background-color: #F5E2EC; (背景色彩)
- background: transparent; (透視背景)
- background-image : url(image/bg.jpg); (背景圖片)
- 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; (置中對齊)
滑鼠樣式變化
- cursor: crosshair; (十字線型)
- 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: text; (輸入文字符號)
- cursor: help; (加一問號)
- cursor: wait; (等待中；漏斗)
- cursor: progress; (進行中；作業中)
- cursor: pointer; (手型，表示超連結)
- cursor: url("游標檔名.cur"),text;(游標圖案)
框線樣式
- border-top:(上框線)
- border-bottom:(下框線)
- border-left:(左框線)
- border-right(右框線)
- border:(四邊框線)
- solid (實線框)
- dotted (虛線框)
- double (雙線框)
- groove (立體內凸框)
- ridge (立體浮凸框)
- inset (凹框)
- outset (凸框)
邊界樣式
- a(放入所有超連結樣式)
- margin-top: 10px; (上邊界)
- margin-right: 10px; (右邊界值)
- margin-bottom: 10px; (下邊界值)
- margin-left: 10px; (左邊界值)
- margin: 10px; (四邊邊界值)
物件定位
- a(放入所有超連結樣式)
- 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:active(放入按下連結的樣式)
- a:hover(放入滑鼠移至連結樣式)