- 文字屬性
- 邊框
- 邊界
- 列表符號(hào)屬性
- 背景樣式
- 連接屬性
- a
- 鼠標(biāo)光標(biāo)樣式
- 邊框基本樣式屬性
- 邊框倒角
- 邊框陰影：(元素陰影颓影，盒子陰影)
- 邊框輪廓
- 表單運(yùn)用
文字屬性
控制字體：如字體大小、字體系列懒鉴、字體加粗等
設(shè)置文本格式：如字體顏色诡挂、文本排列、文本縮進(jìn)等
建議：使用文本格式化相關(guān)的樣式临谱，取代加粗<b>,傾斜<i>等html元素
[ 控制字體 ]
font-family : 宋體,sans-serif; /*文字字體*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜體*/
font-variant:small-caps; /*小字體*/
font-weight:bold; /*文字粗體*/
vertical-align:sub; /*下標(biāo)字*/
vertical-align:super; /*上標(biāo)字*/
text-decoration:line-through; /*加刪除線*/
text-decoration: overline; /*加頂線*/
text-decoration:underline; /*加下劃線*/
text-decoration:none; /*刪除鏈接下劃線*/
text-transform : capitalize; /*首字大寫(xiě)*/
text-transform : uppercase; /*英文大寫(xiě)*/
text-transform : lowercase; /*英文小寫(xiě)*/
[ 設(shè)置文本格式 ]
color : #999999; /*文字顏色*/
letter-spacing : 1pt; /*字間距離*/
line-height : 200%; /*設(shè)置行高*/
text-align:right; /*文字右對(duì)齊*/
text-align:left; /*文字左對(duì)齊*/
text-align:center; /*文字居中對(duì)齊*/
text-align:justify; /*文字分散對(duì)齊*/
vertical-align屬性
vertical-align:top; /*垂直向上對(duì)齊*/
vertical-align:bottom; /*垂直向下對(duì)齊*/
vertical-align:middle; /*垂直居中對(duì)齊*/
vertical-align:text-top; /*文字垂直向上對(duì)齊*/
vertical-align:text-bottom; /*文字垂直向下對(duì)齊*/
邊框
padding-top:10px; /*上邊框留空白*/
padding-right:10px; /*右邊框留空白*/
padding-bottom:10px; /*下邊框留空白*/
padding-left:10px; /*左邊框留空白
【簡(jiǎn)寫(xiě)】
padding:value; 四個(gè)方向內(nèi)邊距
padding:v1 v2; 上下 左右
padding:v1 v2 v3; 上 左右 下
padding:v1 v2 v3 v4; 上 右 下 左
邊界
margin-top:10px; /*上邊界*/
margin-right:10px; /*右邊界值*/
margin-bottom:10px; /*下邊界值*/
margin-left:10px; /*左邊界值*/
【簡(jiǎn)寫(xiě)】
margin:value; 四個(gè)方向內(nèi)邊距
margin:v1 v2; 上下 左右
margin:v1 v2 v3; 上 左右 下
margin:v1 v2 v3 v4; 上 右 下 左
列表符號(hào)屬性
list-style-type:none; /*不編號(hào)*/
list-style-type:decimal; /*阿拉伯?dāng)?shù)字*/
list-style-type:lower-roman; /*小寫(xiě)羅馬數(shù)字*/
list-style-type:upper-roman; /*大寫(xiě)羅馬數(shù)字*/
list-style-type:lower-alpha; /*小寫(xiě)英文字母*/
list-style-type:upper-alpha; /*大寫(xiě)英文字母*/
list-style-type:disc; /*實(shí)心圓形符號(hào)*/
list-style-type:circle; /*空心圓形符號(hào)*/
list-style-type:square; /*實(shí)心方形符號(hào)*/
list-style-image:url(/dot.gif); /*圖片式符號(hào)*/
list-style-position: outside; /*凸排*/
list-style-position:inside; /*縮進(jìn)*/
背景樣式
background-color:#F5E2EC; /*背景顏色*/
background:transparent; /*透視背景*/
background-image : url(/image/1.jpg); /*背景圖片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*重復(fù)排列-網(wǎng)頁(yè)默認(rèn)*/
background-repeat : no-repeat; /*不重復(fù)排列*/
background-repeat : repeat-x; /*在x軸重復(fù)排列*/
background-repeat : repeat-y; /*在y軸重復(fù)排列*/
指定背景位置
background-position : 90% 90%; /*背景圖片x與y軸的位置*/
background-position : top; /*向上對(duì)齊*/
background-position : buttom; /*向下對(duì)齊*/
background-position : left; /*向左對(duì)齊*/
background-position : right; /*向右對(duì)齊*/
background-position : center; /*居中對(duì)齊*/
連接屬性
a /*所有超鏈接*/
a:link /*超鏈接文字格式*/
a:visited /*瀏覽過(guò)的鏈接文字格式*/
a:active /*按下鏈接的格式*/
a:hover /*鼠標(biāo)轉(zhuǎn)到鏈接*/
【鼠標(biāo)光標(biāo)樣式】
cursor: hand /*鏈接手指*/
cursor:crosshair /*十字體*/
cursor:s-resize /*箭頭朝*/
cursor:move /*十字箭頭*/
cursor:move /*箭頭朝右*/
cursor:help /*加一問(wèn)號(hào)*/
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(“光標(biāo)文件名.cur”),text;} /*光標(biāo)圖案(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 /*設(shè)置上框線top顏色*/
border-top-width :1px /*設(shè)置上框線top寬度*/
border-top-style : solid/*設(shè)置上框線top樣式*/
【簡(jiǎn)寫(xiě)方式】
四個(gè)邊框一次性定義:border:width style color;
【width】
邊框?qū)挾攘祝詐x為單位
【style】
邊框樣式
solid /*實(shí)線框*/
dotted /*虛線框*/
double /*雙線框*/
groove /*立體內(nèi)凸框*/
ridge /*立體浮雕框*/
inset /*凹框*/
outset /*凸框*/
【color】
顏色，合法的顏色值
也可取值為 transparent（透明）
邊框倒角
將 元素 四個(gè)角的 直角倒換成圓角
【語(yǔ)法】
屬性：border-radius
取值：px/百分比
取一個(gè)值：表示的四個(gè)角的半徑相同
... ...
取四個(gè)值：表示從左上角開(kāi)始悉默，按順時(shí)針?lè)较蛟O(shè)置四個(gè)角
單獨(dú)定義:
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)默認(rèn)值改為內(nèi)部陰影
【綜合屬性】
box-shadow：h-shadow吱晒、v-shadow、blur沦童、color
如：box-shadow：0px 0px 1px #ddd;
邊框輪廓
輪廓是繪制于元素周?chē)囊粭l線仑濒，位于邊框的外圍
屬性：outline:width style color
outline-width：輪廓的寬度
outline-style：輪廓的樣式
outline-color：輪廓的顏色
如：outline:none; 或 outlint:0;
表單運(yùn)用
CSS樣式用戶(hù)留言表單美化
文字方塊
按鈕
復(fù)選框
選擇鈕
多行文字方塊
下拉式菜單 選項(xiàng)1選項(xiàng)2
