- 文字屬性
- 邊框
- 邊界
- 列表符號屬性
- 背景樣式
- 連接屬性
- a
- 鼠標光標樣式
- 邊框基本樣式屬性
- 邊框倒角
- 邊框陰影：(元素陰影，盒子陰影)
- 邊框輪廓
- 表單運用
文字屬性
控制字體：如字體大小、字體系列、字體加粗等
設置文本格式：如字體顏色、文本排列、文本縮進等
建議：使用文本格式化相關的樣式，取代加粗<b>,傾斜<i>等html元素
[ 控制字體 ]
font-family : 宋體,sans-serif; /*文字字體*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜體*/
font-variant:small-caps; /*小字體*/
font-weight:bold; /*文字粗體*/
vertical-align:sub; /*下標字*/
vertical-align:super; /*上標字*/
text-decoration:line-through; /*加刪除線*/
text-decoration: overline; /*加頂線*/
text-decoration:underline; /*加下劃線*/
text-decoration:none; /*刪除鏈接下劃線*/
text-transform : capitalize; /*首字大寫*/
text-transform : uppercase; /*英文大寫*/
text-transform : lowercase; /*英文小寫*/
[ 設置文本格式 ]
color : #999999; /*文字顏色*/
letter-spacing : 1pt; /*字間距離*/
line-height : 200%; /*設置行高*/
text-align:right; /*文字右對齊*/
text-align:left; /*文字左對齊*/
text-align:center; /*文字居中對齊*/
text-align:justify; /*文字分散對齊*/
vertical-align屬性
vertical-align:top; /*垂直向上對齊*/
vertical-align:bottom; /*垂直向下對齊*/
vertical-align:middle; /*垂直居中對齊*/
vertical-align:text-top; /*文字垂直向上對齊*/
vertical-align:text-bottom; /*文字垂直向下對齊*/
邊框
padding-top:10px; /*上邊框留空白*/
padding-right:10px; /*右邊框留空白*/
padding-bottom:10px; /*下邊框留空白*/
padding-left:10px; /*左邊框留空白
【簡寫】
padding:value; 四個方向內邊距
padding:v1 v2; 上下 左右
padding:v1 v2 v3; 上 左右 下
padding:v1 v2 v3 v4; 上 右 下 左
邊界
margin-top:10px; /*上邊界*/
margin-right:10px; /*右邊界值*/
margin-bottom:10px; /*下邊界值*/
margin-left:10px; /*左邊界值*/
【簡寫】
margin:value; 四個方向內邊距
margin:v1 v2; 上下 左右
margin:v1 v2 v3; 上 左右 下
margin:v1 v2 v3 v4; 上 右 下 左
列表符號屬性
list-style-type:none; /*不編號*/
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-type:disc; /*實心圓形符號*/
list-style-type:circle; /*空心圓形符號*/
list-style-type:square; /*實心方形符號*/
list-style-image:url(/dot.gif); /*圖片式符號*/
list-style-position: outside; /*凸排*/
list-style-position:inside; /*縮進*/
背景樣式
background-color:#F5E2EC; /*背景顏色*/
background:transparent; /*透視背景*/
background-image : url(/image/1.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 : buttom; /*向下對齊*/
background-position : left; /*向左對齊*/
background-position : right; /*向右對齊*/
background-position : center; /*居中對齊*/
連接屬性
a /*所有超鏈接*/
a:link /*超鏈接文字格式*/
a:visited /*瀏覽過的鏈接文字格式*/
a:active /*按下鏈接的格式*/
a:hover /*鼠標轉到鏈接*/
【鼠標光標樣式】
cursor: hand /*鏈接手指*/
cursor:crosshair /*十字體*/
cursor:s-resize /*箭頭朝*/
cursor:move /*十字箭頭*/
cursor:move /*箭頭朝右*/
cursor:help /*加一問號*/
cursor:w-resize /*箭頭朝左*/
cursor:n-resize /*箭頭朝上*/
cursor:ne-resize /*箭頭朝右上*/
cursor:nw-resize /*箭頭朝左上*/
cursor:text /*文字I型*/
cursor:se-resize /*箭頭斜右下*/
cursor:sw-resize /*箭頭斜左下*/
cursor:wait /*漏斗*/
p {cursor:url(“光標文件名.cur”),text;} /*光標圖案(IE6) */
邊框基本樣式屬性
border-top : 1px solid #6699cc; /*上框線*/
border-bottom : 1px solid #6699cc; /*下框線*/
border-left : 1px solid #6699cc; /*左框線*/
border-right : 1px solid #6699cc; /*右框線*/
border-top-color : #369 /*設置上框線top顏色*/
border-top-width :1px /*設置上框線top寬度*/
border-top-style : solid/*設置上框線top樣式*/
【簡寫方式】
四個邊框一次性定義:border:width style color;
【width】
邊框寬度，以px為單位
【style】
邊框樣式
solid /*實線框*/
dotted /*虛線框*/
double /*雙線框*/
groove /*立體內凸框*/
ridge /*立體浮雕框*/
inset /*凹框*/
outset /*凸框*/
【color】
顏色，合法的顏色值
也可取值為 transparent（透明）
邊框倒角
將 元素 四個角的 直角倒換成圓角
【語法】
屬性：border-radius
取值：px/百分比
取一個值：表示的四個角的半徑相同
... ...
取四個值：表示從左上角開始，按順時針方向設置四個角
單獨定義:
border-bottom-right-radius
border-bottom-left-radius
border-top-right-radius
border-top-left-radius
邊框陰影：(元素陰影，盒子陰影)
屬性:box-shadow
值：
（1）h-shadow
陰影的水平偏移距離,必須的
取值為+，陰影右偏移
取值為-，陰影左偏移
（2）v-shadow
陰影的垂直偏移距離,必須的
取值為+，陰影下偏移
取值為-，陰影上偏移
（3）blur
可選，模糊距離
（4）spread
可選，陰影的尺寸大小
（5）color
可選，陰影的顏色
（6）inset
將外部陰影(outset)默認值改為內部陰影
【綜合屬性】
box-shadow：h-shadow、v-shadow、blur、color
如：box-shadow：0px 0px 1px #ddd;
邊框輪廓
輪廓是繪制于元素周圍的一條線，位于邊框的外圍
屬性：outline:width style color
outline-width：輪廓的寬度
outline-style：輪廓的樣式
outline-color：輪廓的顏色
如：outline:none; 或 outlint:0;
表單運用
CSS樣式用戶留言表單美化
文字方塊
按鈕
復選框
選擇鈕
多行文字方塊
下拉式菜單 選項1選項2
