• 基本網頁設計
  • 認識CSS
  • 常用語法
  • import_contacts 常用語法
    3471
適用範圍

使用css等語法來建立一個網站吧!

實用性:
重要性:

教你認識常用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(放入滑鼠移至連結樣式)