font-family 設(shè)置字體名稱

可以使用多個(gè)名稱，用逗號(hào)分隔，瀏覽器則按照先后順序依次使用可用字體

p { font-family:'宋體','黑體','Arial'; }

font-size 設(shè)置字體大小

length 用長(zhǎng)度值指定文字大小，不允許負(fù)值

percentage 用百分比指定文字大小，其百分比取值是基于父對(duì)象中字體的尺寸，不允許負(fù)值

p { font-size:14px;}

font-weight 控制字體粗細(xì)

normal 正常的字體，相當(dāng)于數(shù)字值400

bold 粗體，相當(dāng)于數(shù)字值700

100~900 定義由細(xì)到粗的字符

p { font-weight:bold;}

font-style 控制字體是否傾斜

normal 指定文本字體樣式為正常的字體

italic 指定文本字體樣式為斜體，對(duì)于沒有設(shè)計(jì)斜體的特殊字體，如果要使用斜體外觀將應(yīng)用oblique

oblique 指定文本字體樣式為傾斜的字體，人為的使文字傾斜，而不是去選取字體中的斜體字

p { font-style: italic;}

color 文本顏色

• 英文單詞，比如：red，yellow，green …
• 十六進(jìn)制表示方式，#開頭，6個(gè)十六進(jìn)制的字符或數(shù)字組合，比如：#FFFFFF，#000000 …
• RGB模式，紅 0-255，綠 0-255，藍(lán) 0-255，比如：RGB(120,33,234)
• RGBA模式，比如：RGBA(255,0,0,0.5)，最后的A表示透明度50%

text-decoration 文本裝飾線條

none 默認(rèn)。定義標(biāo)準(zhǔn)的文本

underline 定義文本下的一條線

overline 定義文本上的一條線

line-through 定義穿過文本的一條線

blink 定義閃爍的文本

p { text-decoration:overline;}

text-shadow 文本陰影

h-shadow 必需。水平陰影的位置。允許負(fù)值

v-shadow 必需。垂直陰影的位置。允許負(fù)值

blur 可選。模糊的距離

color 可選。陰影的顏色

h1{ text-shadow: 2px 2px 2px #ff0000;}

寬度 width : auto | length

高度 height : auto | length

外邊距 margin : auto | length

margin-top 設(shè)置上邊的外邊距

margin-bottom 設(shè)置下邊的外邊距

margin-left 設(shè)置左邊的外邊距

margin-right 設(shè)置右邊的外邊距

縮寫型式：

margin: 上邊距  右邊距  下邊距  左邊距

margin: 上下邊距  左右邊距

margin: 上邊距  左右邊距  下邊距

css外邊距合并

內(nèi)邊距 padding : length

padding-top 設(shè)置上邊的內(nèi)邊距

padding-bottom 設(shè)置下邊的內(nèi)邊距

padding-left 設(shè)置左邊的內(nèi)邊距

padding-right 設(shè)置右邊的內(nèi)邊距

透明度 opacity :

number值為 0.0-1.0 之間的小數(shù)

兼容全瀏覽器的寫法：

div{ filter:alpha(opacity=50); }  /* IE6-IE8 */

div{ opacity:0.5; }  /* 現(xiàn)代瀏覽器 */

border-style 邊框樣式

none 定義無(wú)邊框

hidden 與"none"相同。不過應(yīng)用于表時(shí)除外，對(duì)于表，hidden用于解決邊框沖突

dotted 定義點(diǎn)狀邊框

dashed 定義虛線

solid 定義實(shí)線

double 定義雙線。雙線的寬度等于border-width的值

groove 定義3D凹槽邊框。其效果取決于border-color的值

ridge 定義3D壟狀邊框。其效果取決于border-color的值

inset 定義3D inset邊框。其效果取決于border-color的值

outset 定義 3D outset邊框。其效果取決于border-color的值

border-top-style 設(shè)置上邊框線

border-bottom-style 設(shè)置下邊框線

border-left-style 設(shè)置左邊框線

border-right-style 設(shè)置右邊框線

border-width 邊框?qū)挾?/SPAN>

thin 定義細(xì)的邊框

medium 默認(rèn)。定義中等的邊框

thick 定義粗的邊框

length 允許你自定義邊框的寬度

border-top-width 設(shè)置上邊框?qū)挾?/SPAN>

border-bottom-width 設(shè)置下邊框?qū)挾?/SPAN>

border-left-width 設(shè)置左邊框?qū)挾?/SPAN>

border-right-width 設(shè)置右邊框?qū)挾?/SPAN>

border-color 邊框顏色

transparent 默認(rèn)值。邊框顏色為透明

border-top-color 設(shè)置上邊框顏色

border-bottom-color 設(shè)置下邊框顏色

border-left-color 設(shè)置左邊框顏色

border-right-color 設(shè)置右邊框顏色

三角形

border-radius 邊框圓角

半圓

border-image 邊框圖片

設(shè)置了border-image之后，border-style則不顯示

border-image-source 用在邊框的圖片的路徑

border-image-slice 圖片邊框向內(nèi)偏移，是一個(gè)數(shù)值或百分比，不需要帶單位

border-image-width 圖片邊框的寬度

border-image-outset 邊框圖像區(qū)域超出邊框的量

border-image-repeat 圖像邊框是否應(yīng)平鋪(repeated)鋪滿(rounded)拉伸(stretched)

box-shadow 盒子陰影

h-shadow 必需。水平陰影的位置。允許負(fù)值

v-shadow 必需。垂直陰影的位置。允許負(fù)值

blur 可選。模糊距離

spread 可選。陰影的尺寸

color 可選。陰影的顏色

inset 可選。將外部陰影(outset)改為內(nèi)部陰影

使用方法：box-shadow : X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴(kuò)展半徑] [陰影顏色] [投影方式];

line-height 設(shè)置行間的距離(行高)

p { line-height:25px;}

p { line-height:150%;}

text-indent 規(guī)定文本塊中首行文本的縮進(jìn)

p { text-indent:2em;}

text-align 規(guī)定元素中的文本的水平對(duì)齊方式

left 把文本排列到左邊

right 把文本排列到右邊

center 把文本排列到中間

justify 實(shí)現(xiàn)兩端對(duì)齊文本效果

letter-spacing 增加或減少字符間的空白(字符間距)

p { letter-spacing:5px;}

text-overflow 規(guī)定當(dāng)文本溢出包含元素時(shí)發(fā)生的事情

clip 當(dāng)內(nèi)聯(lián)內(nèi)容溢出塊容器時(shí)，將溢出部分裁切掉

ellipsis 當(dāng)內(nèi)聯(lián)內(nèi)容溢出塊容器時(shí)，將溢出部分替換為（...）

text-overflow只是用來(lái)說(shuō)明文字溢出時(shí)用什么方式顯示，要實(shí)現(xiàn)溢出時(shí)產(chǎn)生省略號(hào)的效果，還須定義強(qiáng)制文本在一行內(nèi)顯示（white-space:nowrap）及溢出內(nèi)容為隱藏（overflow:hidden），只有這樣才能實(shí)現(xiàn)溢出文本顯示省略號(hào)的效果

 word-wrap 允許長(zhǎng)單詞或url地址換行到下一行

normal 允許內(nèi)容頂開或溢出指定的容器邊界

break-word 內(nèi)容將在邊界內(nèi)換行。如果需要，單詞內(nèi)部允許斷行

background-color 背景顏色

transparent 默認(rèn)。背景顏色為透明

gradient 漸變色彩

css3 gradient分為線性漸變(linear)和徑向漸變(radial)

background-image:linear-gradient(to left, red 30%,blue);

background-image 背景圖片

body { background-image:url(images/bg.gif);}

background-repeat 背景平鋪方式

repeat 默認(rèn)。背景圖像將在垂直方向和水平方向重復(fù)

repeat-x 背景圖像將在水平方向重復(fù)

repeat-y 背景圖像將在垂直方向重復(fù)

no-repeat 背景圖像將僅顯示一次

background-position 背景圖像定位

body { background-position:left bottom;}

body { background-position:30% 20px;} 

background-origin 背景原點(diǎn)

設(shè)置元素背景圖片的原始起始位置。必須保證背景是background-repeat為no-repeat此屬性才會(huì)生效

規(guī)定background-position屬性相對(duì)于什么位置來(lái)定位

padding-box 背景圖像相對(duì)于內(nèi)邊距框來(lái)定位

border-box 背景圖像相對(duì)于邊框盒來(lái)定位

content-box 背景圖像相對(duì)于內(nèi)容框來(lái)定位

background-clip 背景的顯示區(qū)域

設(shè)定背景圖像向外裁剪的區(qū)域

border-box 背景被裁剪到邊框盒

padding-box 背景被裁剪到內(nèi)邊距框

content-box 背景被裁剪到內(nèi)容框