CSS樣式表---------第三章：樣式屬性

標籤：

 

三、樣式屬性

1、背景與前景

background-color:#90; ------------背景色，樣式表優先順序高。

background-image:url(路徑）--------------設定背景圖片。

background-repeat:no-repeat;----------------no-repeat,不平鋪；repeat,平鋪；repeat-x,橫向平鋪；repeat-y,縱向平鋪。

background-position:center;-----------------背景圖置中，設定背景圖位置時，repeat必須為"no-repeat"。

background-position:top;-------------------背景圖放到右上方（方位可以自己更改）。

background-position:left 100px top 200px;-------------------離左邊100像素，離上邊200像素（可以設為負值）。

background-attachment:fixed;-----------------------------背景是固定的，不隨字型滾動。

background-attachment:scroll;------------------------------背景隨字型滾動。

2、字型

font-family:"新宋體"；------------------------------------字型。

font-size:12px;---------------------------------------字型大小。常用像素12px、14px、18px、還可以用"em","2.5em"即：預設字型的2.5倍，還可以用百分數。

font-weight:bold;--------------------------------------bold是加粗，normal是正常。

font-style:italic;-------------------------------------italic是傾斜，normal是正常。

color:#03C;-----------------------------------------顏色。

text-decoration:-------------------------------------underline:底線，overline：上劃線，line-through:刪除線，none：去掉底線。

text-align:-------------------------------------------center:水平置中對齊，left:靠左對齊，right:靠右對齊。

vertical-align:-----------------------------------middle：垂直置中對齊，top:頂部對齊，bottom:底部對齊。一般設定行高後使用。

text-indent:28px-------------------------------------首行縮排量。

line-height:24px------------------------------------行高。一般為1.5~2倍字型大小。

 

3、邊界與邊框

*註：四個邊框的順序按順時針方向：上，右，下，左。

border(表格邊框、樣式等）、 margin（表外間距）、padding（內容與儲存格間距）

 

（1）邊框

/*邊框設定*/    border:5px solid blue;（四邊框、5像素寬、實線、藍色）相當於下面三行紅的。    border-width:5px;    border-style:solid;    border-color:blue;    border-top:5px solid blue;    border-bottom:5px solid blue;    border-left:5px solid blue;    border-right:5px solid blue;

（2）邊距

 

    /*四邊外邊框之間的距離*/    margin:10px;            ------四邊外邊框寬度為10像素。auto，置中。    margin-top:10px;        ------上邊外邊框寬度為10像素；其他三邊邊框類似。    margin:20px 0px 20px 0px;------上-右-下-左，四邊外邊框順時針順序。    /*內容與邊框之間的距離*/    padding:10px;           --------內容與邊框的四邊間距為10像素。    padding-top:10px;       --------內容與邊框的上間距為10像素；其他三邊間距類似。    padding:20px 0 20px 0px;--------上-右-下-左，內容與邊框的四邊間距順時針順序。

 

4、列表與方塊

width、height、（top、right、bottom、left)--------------------只有在絕對座標情況下才能用。

list-style:none;----------取消序號。

list-style:circle;--------序號變為圓圈，樣式相當於無序。

list-style-image:url(圖片地址）；-----------圖片做序號。

list-style-position:outside;--------------序號在內容外。

list-style-position:inside;-------------序號跟內容在一起。

 

5、格式與布局

    position:fixed; ------------------------鎖定位置（相對於瀏覽器的位置），上浮不可排列。

 

    position:absolute;---------------------------絕對位置 1、外層沒有position:absolute(或relative),那麼div相對於瀏覽器定位 2、如果有，那麼div相對於外層邊框定位。

    position:relative;----------------------相對於預設位置的移動。   

 
    float:left; --------------------------------左浮動。

    float:right; ------------------------------右浮動   

    <div style="clear:both"></div> ----------------------截斷流。

   
    overflow:hidden;  ---------------------------超出範圍時隱藏; soroll,auto超出範圍時出捲軸。
    
    display:none;   ------------------------------none,不顯示;inline-block,顯示為塊，不自動換行，寬高可設;

    block------------------------------------------顯示為塊,自動換行;

 

    inline------------------------------------------效果同span標籤,不自動換行,寬高不可設。

    visibility:hidden;  ----------------------------可視性。hidden,隱藏但是占空間;visible,顯示。

 

    z-index:2;---------------------------------上浮到第二層，預設是第一層。

 

超連結變色：

a:hover{    color:red;}

DIV置中

如何讓一個DIV置中對齊？第一步：設定外層的DIV的text-align:center;第二步：設定裡層的DIV的margin:auto以上兩個DIV都不要設定float.

 

 

 

CSS樣式表---------第三章：樣式屬性