css的各類型及使用簡(jiǎn)介
/*
css其實(shí)很簡(jiǎn)單，不像c語(yǔ)言什么的有邏輯，基本是一個(gè)描述性的東西，也就是告訴你什么東西是什么樣子的。
格式是
樣式名稱 {屬性名:值;屬性名:值;屬性名:值;}
樣式名稱 可以是html內(nèi)定元素比方說(shuō) a， body， td， tr （簡(jiǎn)而言之就是不帶任何前綴的）
或者是自定義的 class 比方說(shuō) .nav , .clear , .layout （簡(jiǎn)而言之是帶.前綴的）
或者是自定義的 id 比方說(shuō) #leftbody ， #right （簡(jiǎn)而言之就是帶#前綴的）
id和class的不同就是 id唯一，class不唯一，同一個(gè)名字的'id 在頁(yè)面上只能應(yīng)用一次，class可以在多個(gè)地方應(yīng)用，你要為你頁(yè)面上唯一的一個(gè)元素寫(xiě)樣式就可以用id，你希望你的這個(gè)樣式在多個(gè)地方可以使用就使用class 。
下面的元素相同的我就解釋一次，其他的你自己補(bǔ)充起來(lái)。
再給你一個(gè)css在線手冊(cè)，不懂的可以查一查
*/
body,form,p,ul,li,img,h5{margin:0;padding:0;border:none}
/* body,form,p,ul,li,img,h5標(biāo)簽樣式為 mrigin:0(外邊距0)；padding:0(內(nèi)邊距0)；border:none(無(wú)邊框)*/
body{color:#333;font-size:14px;line-height:24px;background:#2E8B57;}
/*body標(biāo)簽樣式 color#333(文字顏色為#333);font-size:14px(文字大小為14像素 px就是pixel的簡(jiǎn)寫(xiě) 就是像素的意思，下面出現(xiàn)的所有px的單位都是 像素的意思)；line-height:24px(文字行高24像素)；
background:#2E8B57(背景顏色為#2E8B57)*/
a{color:#333;text-decoration:none}
/*text-decoration:none(文字下劃線)*/
a:hover{background:#00FF7F;color:#000;}
/*a：hover(a標(biāo)簽鼠標(biāo)懸浮的時(shí)候應(yīng)用的樣式)*/
.clear{clear:both;}
/*.clear(class為 clear的元素樣式，clear:both(清除所有浮動(dòng)))*/
div,td{table-layout:fixed;word-break:break-all;}
/*table-layout:fixed(表格單元格布局：固定布局)；word-break:break-all(文本換行：允許任意文字間換行-這是一個(gè)ie的專有屬性，并不是標(biāo)準(zhǔn)css屬性)。 前面 div，td 表示 有div和td2個(gè)元素應(yīng)用后面的樣式，中間用逗號(hào)隔開(kāi)。*/
.Layout{width:990px;background:#FFF;margin:0 auto;overflow:hidden; padding:0 5px;padding-top:5px;}
/*名為L(zhǎng)ayout的class樣式 width：990px(寬度為990像素)；overflow：hidden(超出范圍隱藏)；
padding-top:5px(頂內(nèi)邊距5像素)
這里寫(xiě)了2次padding 一次是 padding：0 5px ，這是一種簡(jiǎn)寫(xiě)方式 是 padding：0px 5px 0px 5px 的簡(jiǎn)寫(xiě)
意思是 頂邊距0px 右邊距5px 底邊距0px 左邊距5px，順序剛好是順時(shí)針的一個(gè)圈，如果頂和滴 左和右的邊距相同可以 簡(jiǎn)寫(xiě)到一起，就是 padding：0px 5px，0后面可以不帶單位，
但是非0數(shù)字都必須帶單位，這一點(diǎn)是css和html不同的地方。
之后又寫(xiě)了一個(gè)padding-top：5px 頂內(nèi)邊距5像素，
css 的優(yōu)先順序是 后面的屬性覆蓋前面相同的屬性， 這2句話寫(xiě)一起實(shí)際就是 padding：5px 5px 5px 0*/
#LeftBody{width:200px;border-top:1px solid #99FF99;float:left;display:inline;overflow:hidden;}
/*float：left（向左浮動(dòng)）；display:inline(布局方式：行布局)*/
#LeftBody .Content{border:1px solid #99FF99; border-top:none; padding:8px;}
/*#LeftBody .Content 這樣的寫(xiě)法表示 在所有id為#LeftBody的元素內(nèi)的class名為Content的元素。2個(gè)名稱中間用空格隔開(kāi)，前后順序表示包含關(guān)系，前面的包含后面的。
border:1px solid #99FF99表示 邊框?yàn)?1像素 實(shí)線 顏色為#99FF99
border-top是頂邊框 border-bottom是底邊框 同理 -left是左邊的，-right是右邊的 其他類似的屬性也相似*/
#LeftBody #Logo{ padding:0; text-align:center}
/*text-align:center（文本對(duì)齊：居中對(duì)齊）*/
#LeftBody #Calendar{text-align:center}
/*#LeftBody #Calendar（id名為#LeftBody的標(biāo)簽中間的id名為#Calendar標(biāo)簽）*/
#LeftBody .Content .Header{ font-weight:bold;padding:0 5px;}
/*font-weight:bold（文字加粗）*/
#LeftBody .Content .Bodyer{ letter-spacing:1px; padding:0 5px;line-height:25px;}
/*letter-spacing：1px（字符間距1像素）*/
#LeftBody #AdHeader{background:#B9E089; padding:0; border-bottom:none; text-align:center;}
#LeftBody #AdBodyer{padding:0; border:none;}
#LeftBody #AdBodyer table{border:1px solid #99FF99; border-bottom:none; border-right:none}
#LeftBody #AdBodyer table td{ text-align:center; padding:4px;border:1px solid #99FF99; border-top:none; border-left:none}
#RightBody{width:782px;margin-left:8px;float:left;display:inline;overflow:hidden;}
/*width:782px;(寬度782像素)margin-left:8px;（外左邊距8像素）*/
#RightBody #HeaderButton{width:172px;border:1px solid #99FF99; line-height:20px; font-size:12px; text-align:center;}
#RightBody .Header{margin-top:5px;border:2px solid #99FF99; border-bottom-width:1px;}
/*border-bottom-width:1px;（底邊框厚度1像素）*/
#RightBody .Header a{display:block;border-right:2px solid #99FF99;border-bottom:none; text-align:center;}
#RightBody .Header a.Selected{ background:#B9E089;font-weight:bold;}
#RightBody .BiaoGe{border:1px solid #99FF99; border-bottom:none; border-right:none}
#RightBody .BiaoGe td{border:1px solid #99FF99; border-top:none; border-left:none; padding:3px;}
#RightBody .BiaoGe .beijing{ background:#B9E089; text-align:center; padding:2px; font-weight:bold;font-size:14px;}
有問(wèn)題可以加我qq
【css的各類型及使用簡(jiǎn)介】相關(guān)文章：