1.css基本樣式

1.1 css背景

背景顏色 : background-color : red ;  | #FF0000(十六進(jìn)制) | RGB(255,0,0) 

背景圖片 : background-image: url("image/icon1.png");

背景重復(fù) : background-repeat : no-repeat | repeat-x | repeat-y
 ( 不重復(fù) | x方向重復(fù) | y方向重復(fù) )

背景吸附 : background-attachment : fixed | scroll ( 固定 | 從上到下移動(dòng) )

背景位置 : background-position: 10px 20px; | center top | 50% 50% 
兩個(gè)參數(shù),第一個(gè)參數(shù)表示離x軸的距離,y表示離y軸的距離

簡(jiǎn)寫(xiě) : background: color image repeat  position

圖片大小 : background-size: 50px 50px; | 100% 100% | cover (遮蓋 同 100% 100%)

1.2 css文本

字體顏色 : color: red; | #FF0000(十六進(jìn)制) | RGB(255,0,0) 

對(duì)齊方式 : text-align : right ; | left | center 

文本修飾 : text-decoration : underline | overline | line-through | none 
( 下劃線 | 上劃線 | 刪除線 | 沒(méi)有 )

文本轉(zhuǎn)換 : text-transform : uppercase | lowercase | capitalize ( 大寫(xiě) | 小寫(xiě) | 首字母大寫(xiě) )

文本縮進(jìn) : text-indent : 20px ; | 2em 

1.3 css字體

后備字體庫(kù) : body { font-family : Helvetica , Microsoft YaHei , 宋體 , 黑體 }

字體大小 : font-size : 16px ; (默認(rèn)16px)

字體樣式 : font-style : normal | italic | oblique ( 無(wú)樣式 | 斜字體 | 大傾斜 )

字體粗細(xì) : font-weight : normal | bold | bolder | lighter | 100~900 
( 無(wú)加粗 | 加粗 | 更粗 | 細(xì)字體 | 范圍粗細(xì) 400 等同于 normal 700 等同于 bold )

字體行高 : line-height : 50px ;

1.4 css鏈接

a : link {......}  - 正常，未訪問(wèn)過(guò)的鏈接

a : visited {......}  - 用戶已訪問(wèn)過(guò)的鏈接

a : hover {......}  - 當(dāng)用戶鼠標(biāo)放在鏈接上時(shí)

a : active {......}  - 鏈接被點(diǎn)擊的那一刻

若單獨(dú)設(shè)置幾個(gè)鏈接，必須遵守如下規(guī)則：
a:hover 必須跟在 a:link 和 a:visited后面
a:active 必須跟在 a:hover后面

1.5 css列表樣式 (不排序列表 ul li)

list-style : none ; 無(wú)小圓點(diǎn)

list-style-type : circle | square ; 小圓點(diǎn)形式

list-style-image : url("xxx") ; 可換成圖標(biāo)

1.6 css邊框

border-width  邊框的寬度

border-style   邊框的樣式

border-color 邊框的顏色

可以簡(jiǎn)寫(xiě)成 : border： width style color ;
p { border : 1px solid #333 }

單獨(dú)設(shè)置各邊 : p { border-top:1px solid #ccc; }

1.7 css表格

表格跨行 :
<table>
    <tr>
        <th rowspan="3">商城</th><td>帽子</td><td>衣服</td> 
    </tr>
    <tr>
        <td>帽子</td><td>衣服</td>
    </tr>
    <tr>
        <td>帽子</td><td>衣服</td>
    </tr>
</table>

表格跨列 :
<table >
    <tr>
        <th colspan="3">商城</th>
    </tr>
    <tr>
        <td>衣服</td><td>鞋子</td><td>帽子</td>
    </tr>
    <tr>
        <td>衣服</td><td>鞋子</td><td>帽子</td>
    </tr>

 table,th,td { border: 1px solid red; } 設(shè)置表格邊框

table { border-collapse : collapse } 
( 屬性設(shè)置表格的邊框被折疊成一個(gè)單一的邊框 )

1.8 css輪廓

p { outline :1px solid pink }  
繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用

1.9 css透明 (opacity)

opacity:0~1;

2.0 css隱藏/顯示

visibility : hidden | visible ( 隱藏 | 顯示 )

2.樣式的繼承

2.1 width和height

width : 如果子元素不設(shè)置寬度，默認(rèn)情況下繼承父元素的寬度

height : 如果父元素不設(shè)置高度，默認(rèn)情況下父元素繼承子元素的高度

2.2 css可以繼承的屬性

文本相關(guān)屬性 : color, text-align, text-decoration, text-transform, text-indent 
(內(nèi)聯(lián)標(biāo)簽不能設(shè)置此屬性)

字體相關(guān)屬性 : font-family, font-style, font-size, font-weight, line-height

列表相關(guān)屬性 : list-style

表格相關(guān)屬性 : border-collapse

其他屬性 : cursor, visibility  (鼠標(biāo)樣式 , 可見(jiàn))