1. 程式人生 > >CSS常見的屬性和值

CSS常見的屬性和值

內容有:
字型、文字、背景、位置、邊框、列表等等
一、修飾字體的屬性
font-family 字型族(Times、serif等)
font-size 字型大小(可用絕對大小、相對大小、長度、百分比等)
font-style 字型風格(normal\italic斜體\oblique傾斜)
font-Weight 字型加粗(nomal\bold\bolder\lighter等)
font-Variant 字型變形(normal\small-caps小型大寫字母)
或者font:[<字型風格>空格<字型變形>||<字型加粗>]?<字型大小>[/<行高>]?<字型族科>
p{
font:italic bold 20px times,serif
}

二、CSS中常見的控制文字的屬性
letter-spacing 字母間隔(必須符合長度格式,可使用負值)
word-spacing 文字間隔(同上)
text-decoration 文字修飾(underline-下劃線\overline上劃線、line-through刪除線、blink閃爍、預設為無):去掉a標籤設定的連結中預設的下劃線-a{text-decoration:none;}
text-align 橫向排列(left\right\center)
text-indent 縮排(必須是一個長度或者百分比,如果是百分比,則以上級元素的寬度而定)
text-transform (可以改變字型的大小寫)
line-height 行高(在控制文字基線之間的間隔的值,當值為數字時,行高為元素字型大小設定的量與該數字想乘;百分比的值是相對於元素字型的大小而定。不能有負值)

三、常見的控制背景的屬性
background-color(transparent透明)
background-image
background-repeat(repeat\repeat-x\repeat-y\no-repeat)
background-attachment 背景附件(scroll滾動、fixed固定)
background-position
background:<背景顏色>空格<背景影象>空格<背景重複>||<背景附件>||<背景位置>
文字在左對齊了的背景圖片後進行縮排:padding-left:18px;

四、邊框屬性
任何元素(標籤)都可設定邊框邊框屬性是用於設定某個元素邊框的風格、寬度、顏色的略寫。並且可一起設定4邊的邊框,也可對上、右、下、左邊框單獨設定。

1、邊框風格屬性:border-style:none(無邊框) dotted(點線式) dashed(破折線式) solid(直線式) double(雙線式) groove(槽線式) ridge(脊線式) inset(內嵌效果) outset(凸起效果);

4條邊框一起設定時,按照上、右、下、左的順序。

當單獨設定時:border-top-style:solid;
border-rightstyle:solid;
border-bottom-style:solid;
border-left-style:solid;

2、邊框寬度屬性:border-width:1px 2px 3px 4px;
等價於:border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;

3、邊框顏色:border-color:
4、也可以直接用border:3px solid green
5、滑鼠游標屬性:Cursor:default hand pointer wait help move(可用手冊查詢)
五、CSS中常見的控制列表的屬性
無序的:

<body>
    <ul style="list-style-type:disc\circle\square\none; list-style-image:url(圖示名); list-style-position:決定列表專案縮排的程度;">
        <li>wwwww</li>
        <li>wwwww</li>
        <li>wwwww</li>
        <li>wwwww</li>
    </ul>
</body>

有序的:list-style-type:decinal\lower-roman\upper-roman\lower-alpha\upper-alpha