[CSS] 常用語法
CSS 層疊樣式表
Cascading Style Sheets 樣式通常是將它保存在外部的 .css 檔案文件中。由簡單的 CSS 外部樣式表，使網頁開發提高工作效率，可同時改變網站中所有頁面佈局和外觀樣式。<link rel="stylesheet" href="theme.css" />
〈1〉超連結的連結樣式 • a 加入所有超連結樣式
• a:link 加入超連結文字樣式
• a:visited 加入瀏覽過的連結文字樣式
•
a:hover 加入滑鼠指標指著連結樣式• a:active 加入按下啟用連結的樣式
〈2〉文字風格樣式 •
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; 強制水平排序不斷行
〈3〉項目符號及編號 •
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; 縮排
〈4〉背景樣式 •
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; 置中對齊
〈5〉指定滑鼠游標的型態 •
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)
〈6〉border 框線樣式 • 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 凸框
border:none; 與 border:0; 的區別
【border:0;】把 border 設為 “0” 像素，雖然在頁面上看不見，但按 border 默認值理解，瀏覽器依然對 border-width/border-color 進行了渲染，即已經占用了內存值。
【border:none;】把 border 設為 “none”，即沒有，瀏覽器解析 “none” 時將不作出渲染動作，即不會消耗內存值。設計之家
〈7〉margin & padding 容器外緣及邊框空白(邊界)樣式 • 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; 左邊框空白
< 連結寫法有4種 >
padding:10px 5px 10px 5px; --> (上) (右) (下) (左)
padding:10px 5px; -->(上下) (左右)
padding:10px 5px 10px; -->(上) (左右) (下)
padding:10px; -->四個邊同樣値
〈8〉position 物件定位 • position : static; 依照正常流程佈局
• position : relative; top: 10px; left: 10px; 物件左上角開始位置
• position : absolute; top: 10px; left: 10px; 網頁左上角開始位置
• position : fixed; top: 10px; left: 10px; 固定在參考物上
button
☞ 11 Incredible css3 button animations for hover effects☞ 40 CSS3 Button Tutorials For Designers
☞ Awesome CSS3 Buttons
☞ Create CSS3 Buttons Compatible with All Browsers(範例下載)
☞ 12 Professional CSS Buttons
顏色
☞ CSS顏色☞ Color Hex Color Codes 找顏色
〔範例下載〕
☞ 選單(桌機版)☞ 選單(桌機/手機切換)
References
☞ Cross fading images☞ CSS Image Gallery
☞ Element revealed on hover
☞ [CSS相關] 超實用CSS表格線上產生器 (CSSTableGenerator)
☞ CSSTableGenerator
☞ 漂亮的FORM
沒有留言: