CSS

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章