引入 <link rel=”stylesheet” type=”text/css” href="style.css"/> <style type="text/css">@import "style.css"</style>文字屬性 屬性名稱 屬性值 說明font-style normal 正常顯示 ...
引入
<link rel=”stylesheet” type=”text/css” href="style.css"/>
<style type="text/css">@import "style.css"</style>
文字屬性
屬性名稱 屬性值 說明
font-style normal 正常顯示
italic/obligue 斜體
font-variant normal 正常顯示
small-caps 將英文大小寫字母寫調為同寬
font-weight normal 正常顯示
bold 粗體
font-size 像素/百分比 字體大小
font-family 字體名稱 設置字體名稱
font屬性簡化的使用方法：
font:是否斜體 是否同寬 是否粗體 大小 字體名稱
例如:font:italic bold 200 隸書
文本屬性
屬性名稱 屬性值 說明
color 十六/英文/三原色 顏色
letter-spacing normal 正常顯示
長度 文本間隔
word-spacing normal 正常顯示
數字 單詞間距
white-space normal 文本自動處理換行
pre 換行和空白受保護
nowrap 強制在同一行顯示
text-align left 文字靠左
right 文字靠右
center 文字靠中
justify 兩端對齊
text-decoration none 正常顯示
underline 加上下劃線
overline 加頂線
line-through 加刪除線
text-indent 長度/百分比 首行縮進
line-height 像素/數字/百分比 行高
text-space pre-wrap 保留空白符、換行符、自動換行
pre-line 保留換行符、自動換行、合併空白符
text-transform none 正常顯示可以包含大，小字元
capitalize 字元串第一個字元大寫
uppercase 設置大寫字元
lowercase 設置小寫字元
vertical-align sub 設置文字為下標。
super 設置文字為上標。
top 元件往上端靠齊。
middle 設置文字是在中線位置。
bottom 元件往下端靠齊。
單行顯示，省略結尾：overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
背景
屬性名稱 屬性值 說明
background-attachment scroll 設置背景圖像會隨視窗滾動條的移動而移動。
fixed 設置背景圖像不會隨視窗滾動條的移動而移動。
background-color 十六/英文/三原色 顏色
transparent 透明
background-image URL 背景圖片//background-image:url("bg.jpg")
none 不設置背景圖片
background-position top left/像素/百分比 設置背景圖案出現方位。
background-repeat repeat 將背景圖案填滿整個背景。
repeat-x 將背景圖案在水平方向添滿。
repeat-y 將背景圖案在垂直方向添滿。
no-repeat 圖案只出現一次。
背景圖案簡化方案：background:顏色 背景圖片 repeat attachment position
列表的使用
屬性名稱 屬性值 說明
list-style-type none 無符號
disc 實體的小圓點。
circle 空心的小圓點。
square 實心的小方塊。
decimal 1,2,3...
lower-roman i,ii,iii...
upper-roman I,II,III...
lower-alpha a,b,c,d,e...
upper-alpha A,B,C,D,E...
list-style-position inside 清單項目較往右移。
outside 清單項目正常顯示。
list-style-image URL list-style-image:url(img.gif)
none 不會顯示任何圖象
清單的簡化設置：list-style:circle inside url
邊框
屬性名稱 屬性值 說明
border-color 十六/英文/三原色 顏色//border-color:red green blue(上為紅色、左右為綠色、下為藍色)
border-style none 不顯示邊線
dotted 點線
dashed 虛線
solid 實線
double 雙線
border-width 長度 border-width:0.2cm 0.3cm 0.4cm 0.5cm;border-width:1 2 3 4;
簡化方案：border:形態 長度 顏色 例如 border:1px solid black;
邊界
padding
屬性名稱 屬性值 說明
padding-bottom 長度/百分比 元件下端邊線的空隙
padding-left 長度/百分比 元件左端邊線的空隙
padding-right 長度/百分比 元件右端邊線的空隙
padding-top 長度/百分比 元件上端邊線的空隙
margin
屬性名稱 屬性值 說明
margin-bottom auto 自動調整空隙
長度/百分比 設置下端空隙
margin-left auto 自動調整空隙
長度/百分比 設置左端空隙
margin-right auto 自動調整空隙
長度/百分比 設置右端空隙
margin-top auto 自動調整空隙
長度/百分比 設置上端空隙
區塊
屬性名稱 屬性值 說明
width 像素/百分比/auto 區塊的寬度
height 像素/百分比/auto 區塊的高度
min-height 像素/百分比/auto 區塊最小高度
max-height 像素/百分比/auto 區塊最大高度
min-width 像素/百分比/auto 區塊最小寬度
max-width 像素/百分比/auto 區塊最大寬度
浮動
屬性名稱 屬性值 說明
float none 正常顯示
left 左浮動
right 右浮動
clear none 允許兩邊浮動
left 不允許左邊浮動
right 不允許右邊浮動
both 不允許兩邊浮動
定位
屬性名稱 屬性值 說明
position relative 設置區塊基準點為左上角
absolute 設置網頁的為基準點左上角
static 無設置
z-index auto 自動調整高度
數字 數字越大越往上層
溢出
屬性名稱 屬性值 說明
overflow visible 不剪切內容也不添加滾動條
auto 在必需時對象內容才會被裁切或顯示滾動條
hidden 不顯示超過對象尺寸的內容
scroll/overflow-x/overflow-y 總是顯示滾動條
滾動條
屬性名稱 屬性值 說明
scrollbar-3dlight-color 顏色/十六進位 滾動條亮邊框
scrollbar-highlight-color 顏色/十六進位 滾動條 3D 界面亮邊
scrollbar-face-color 顏色/十六進位 滾動條 3D 錶面
scrollbar-arrow-color 顏色/十六進位 滾動條方向箭頭
scrollbar-shadow-color 顏色/十六進位 滾動條 3D 暗邊
scrollbar-darkshadow-color 顏色/十六進位 滾動條暗邊框
scrollbar-base-color 顏色/十六進位 滾動條基準顏色
scrollbar-track-color 顏色/十六進位 滾動條的拖動區域
超鏈接偽類
a:link 表示該超鏈接文字尚未被點選
a:visited 表示該超鏈接文字已被點選過
a:active 表示該超鏈接文字正被點選,但未被放開
a:hover 表示當滑鼠停留在文字上
游標
屬性名稱 屬性值 說明
cursor auto 游標是手指
crosshair 游標是十子形
default 游標是箭頭
hand/pointer 游標是手形
move 游標是移動的符號
text 輸入文字的符號
wait 漏斗
help 幫助
縮放
屬性名稱 屬性值 說明
zoom normal 使用對象的實際尺寸
百分數/浮點實數 放大縮小
