BLOGGER  CSS 樣式16 CSS 常用語法

CSS 常用語法

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


超連結的連結樣式

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

文字風格樣式   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; 十字小方格 (Firefox, Opera)
  • cursor: move; 十字箭頭
  • cursor: all-scroll; 四方捲動 (IE, Opera)
  • 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; 選單 (Opera)

框線樣式   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; 固定在參考物上
1

IETester

IETester 是一套包括 IE 5.5、IE 6、IE7、IE8IE9 的瀏覽軟體,分別在不同的頁籤中顯示所指定的 IE 瀏覽器版本的工具,對於網頁撰寫者來說,可幫助測試較舊版本的 IE 相容性,且可以使用檢測較舊的瀏覽器版本來觀看不正常顯示的網頁。

Browser Compatibility Check for Internet Explorer Versions

http://www.my-debugbar.com/wiki/IETester/HomePage


部落格版主  2011/07/05, 星期二

Leave Response    

請先登入






TM+ © 2002-2014 hANjAN STUDIO and author.
Script Execution time: 0.16 seconds.