CSS:Cascading Style Sheets層疊樣式表。
三種實現方式:
1.內聯方式 例如:<h style="color:red;width:300px">
2.內部樣式表 例如:<style type="text/css">
h2{
color:blue;
}
</style>
3.外部樣式表 例如:建立以.css結尾的文件,引入<link rel="stylesheet" type="text/css" href=""/>
規則特性:繼承性,層疊性,優先級。
選擇器:
選擇器組:用,隔開。
後代選擇器:空格
子代選擇器:>
僞類選擇器:
用於選擇一個元素在不同狀態下的形式。
常用的有:
:link
:visited
:active
:hover
:focus
border:
用於設置元素的邊框
border:width值 style值 color值
border-left:width值 style值 color值
border-right:width值 style值 color值
border-top:width值 style值 color值
border-bottom:width值 style值 color值
padding :內邊距
margin:外邊距
background-color:
background-image:url()
background-repeat:repeat,repeat-x,repeat-y,no-repeat
background-position:left,center,right,top,bottom
background-attachment:scroll,fixed 用於處理圖片是否隨頁面的滾動而移動。
當內容溢出元素框時overflow:可以有以下幾種處理方式:
visible
hidden
scroll
auto
設置文本:
font-family:
font-size:
font-weight:
color:
text-align:left、right、center
text-decoration:none、underline
line-height:
text-indent: 首行縮進
表格樣式:
border-collapse:separate、collapse
定位:
分爲5中:流定位(float:none、left、right,其中clear用於消除浮動所帶來的影響。例如:clear:none、left、right、both),浮動定位,相對定位,絕對定位,固定定位。
相對定位:div{
position:relative;
left:50px; (right)
top:50px; (bottom)
}
絕對定位:.outter{
position:relative;
}
.d{
position:absolute;
bottom:20px;
left:30px;
}
position:static、relative、absolute、fixed(固定定位)
偏移屬性:top、bottom、left、right
z-index:層疊順序
float/clear:浮動定位屬性
列表樣式:
無序列表:list-style-type:none,disc,circle,square
有序列表:list-style-type:none,decimal,lower-roman,upper-roman
圖片代替:list-style-image:url()
顯示:
用display:noen,block,inline,inline-block
設置鼠標樣式:
cursor:default,pointer,crosshair,text,wait,help