常用的CSS語(yǔ)法總結(jié)

1、常用的CSS語(yǔ)法總結(jié)一：網(wǎng)頁(yè)的基本命名規(guī)范 網(wǎng)頁(yè)布局的時(shí)候（命名代碼規(guī)范）： 頭部div取值為：id=header 中間div取值為：id=container 中間左部分div取值為：class=left 中間中部分div取值為：class=middle 中間右部分div取值為：class=right 底部div取值為：id=footer二：字體設(shè)置1：字體樣式字體類型 font-family font-family:隸書（楷體）;字體大小 font-size font-size:12px;（單位像素）字體風(fēng)格 font-style font-style:italic; normal:默認(rèn) i

2、talic:傾斜體字體的粗細(xì)font-weight font-weight:bold; normal:標(biāo)準(zhǔn) 、bold:粗體字體 lighter:細(xì)體在一個(gè)聲明中設(shè)置所有字體屬性 font font:italic bold 36px 宋體;2：文本樣式：顏色:color black blue green red gray orange purple white yellow 黑色 藍(lán)色 綠色 紅 灰色 橙 紫 白色 黃色：水平對(duì)齊方式：text-align left:左 right:右 center:居中 justify：兩端對(duì)齊 ：首行縮進(jìn)（text-indent:2em） ：行高（line

3、-height:12px）：文本添加修飾：text-decoration none:標(biāo)準(zhǔn)文本 underline:設(shè)置文本的下劃線 overline:設(shè)置文本的下劃線 line-through:設(shè)置文本的刪除線 blink:設(shè)置文本的閃爍（IE無(wú)效）：垂直對(duì)齊方式（只用于圖像與文本的居中對(duì)齊）vertical-align xxxxx 示例： p imgvertical-align:middle;三：超鏈接 1：根據(jù)用戶 未單擊訪問(wèn)前（a:link） 鼠標(biāo)懸浮在超鏈接上(a:hover)【必須設(shè)置在a:link和a:visited之后才有效】 單擊未釋放(a:active)【必須設(shè)置在a：hov

4、er之后才有效】 單擊訪問(wèn)后(a:visited) 的四個(gè)狀態(tài)顯示。 語(yǔ)法： 標(biāo)簽名:偽類名聲明; a:hover color:#B46210;text-decoration:underline; 2:設(shè)置鼠標(biāo)形狀:cursor default：默認(rèn) 箭頭 pointer: 超鏈接的指針（小手） wait:指示程序正在忙（） help:可用的幫助（箭頭問(wèn)好） text:指示文本（細(xì)I的形狀） crosshair:呈現(xiàn)十字狀四：背景樣式 1:可將HTML文檔分割成獨(dú)立的，不同的部分，常用來(lái)進(jìn)行網(wǎng)頁(yè)的布局 width:寬度（200px）height:高度（290px） 或 #iys2width:1

5、80px ;height:180px; 2：背景屬性 背景顏色：background-color（值：red、yellow或#ff0000） 背景圖像 背景圖像：background-image:url(bg.jpg) 背景重復(fù)：background-repeat(repeat:水平垂直方向重復(fù) repeat-x:水平方向重復(fù) repeat-y:在垂直方向重復(fù) no-repeat:背景圖像僅顯示一次 顯示背景圖像上的起始位置（基準(zhǔn)的位置：左上方）：background-position 正方向偏移的位置為：右下方 簡(jiǎn)寫背景樣式：順序（顏色 url 背景定位 背景重復(fù)方式）五：列表樣式1：列表項(xiàng)

6、標(biāo)記的類型 list-style-type none:無(wú)標(biāo)記符號(hào) disc:實(shí)心圓，默認(rèn)類型 circle:空心圓 square:實(shí)心正方形 decimal：數(shù)字2：圖像替換列表項(xiàng)的標(biāo)記（設(shè)置它后list-style-type將不起作用） list-style-image list-style-image:url(image/arrow-right.gif);3：何處放置列表項(xiàng)標(biāo)記 list-style-position inside:標(biāo)記放置在文本（范圍）以內(nèi) outside:標(biāo)記放置在文本以外4：設(shè)置所有列表的屬性 list-style 順序：list-style-type list-st

7、yle-position list-style-image六：盒子模型 1：邊框（第一層） 2：元素內(nèi)容及內(nèi)邊距（第二層） 3：背景圖（第三層） 4：外邊距 盒子模型的寬度=content(內(nèi)容)+padding(填充：內(nèi)容與邊框之間）+border(內(nèi)容的邊框)+margin(兩個(gè)內(nèi)容之間的距離)1：邊框 border-color：顏色 屬性 說(shuō)明 示例 border-top-color 上邊框顏色border-top-color:#369; border-right-color右邊框顏色border-right-color:#369; border-bottom-color下邊框顏色bor

8、der-bottom-color:#fae45b; border-left-color左邊框顏色border-left-color:#efcd56; 四個(gè)邊框?yàn)橥活伾玝order-color:#eeff34; 上、下邊框顏色：#369 左、右邊框顏色：#000border-color:#369 #000; border-color 上邊框顏色：#369左、右邊框顏色：#000 border-color:#369 #000 #f00; 上、右、下、左邊框顏色：#369、#000、#f00、#00fborder-color:#369 #000 #f00 #00f; border-width：粗細(xì)

9、 thin 設(shè)置細(xì)的邊框 medium 默認(rèn)值（設(shè)置中等的邊框） thick 設(shè)置粗的邊框 像素值 自定義設(shè)置邊框的寬度 border-top-width:5px; border-right-width:10px; border-bottom-width:8px; border-left-width:22px; border-width:5px ; border-width:20px 2px; border-width:5px 1px 6px; border-width:1px 3px 5px 2px; border-style：樣式 none：無(wú)邊框 dotted：點(diǎn)線邊框 dashed：虛

10、線邊框 solid：實(shí)線邊框 double：雙線邊框 簡(jiǎn)寫（border）：在一個(gè)聲明中設(shè)置所有的邊框?qū)傩?border-top border-right border-bottom border-left 順序?yàn)椋簑idth style color2：外邊距(與其他盒子之間的距離) 屬性 margin-top：上邊距 margin-right：右邊距 margin-bottom：下邊距 margin-left：左邊距 margin 示例 auto:居中顯示 margin-top: 1 px margin-right : 2 px margin-bottom : 2 px margin-lef

11、t : 1 px margin :3px 5px 7px 4px; 上、右、下、左邊距 margin :3px 5px; 上下3px 左右邊距5px margin :3px 5px 7px; 上下為3和7；左右為5 margin :8px; 四個(gè)邊距都是8px 3：內(nèi)邊距（內(nèi)容與邊框之間的距離） 屬性 padding-left padding-right padding-top padding-bottom padding 示例 padding-left:10px; padding-right: 5px; padding-top: 20px; padding-bottom:8px; paddi

12、ng:20px 5px 8px 10px ; padding:10px 5px; padding:30px 8px 10px ; ：上下為30和10；左右為8 padding:10px;4：標(biāo)準(zhǔn)文檔流（CSS默認(rèn)的排列規(guī)則） 塊級(jí)元素：以一塊區(qū)域顯示的元素(獨(dú)占一行，擁有自己的區(qū)域) 內(nèi)聯(lián)元素:字母之間橫向排列，到最右端自動(dòng)拆行（沒(méi)有自己的區(qū)域） 內(nèi)聯(lián)標(biāo)簽可以包含在塊級(jí)標(biāo)簽之中；但塊級(jí)標(biāo)簽無(wú)法包含在內(nèi)聯(lián)標(biāo)簽之中 display屬性（控制元素的顯示方式） 值 說(shuō)明 block塊級(jí)元素的默認(rèn)值，元素會(huì)被顯示為塊級(jí)元素，該元素前后會(huì)帶有換行符 inline內(nèi)聯(lián)元素的默認(rèn)值。元素會(huì)被顯示為內(nèi)聯(lián)元素，該

13、元素前后沒(méi)有換行符 none設(shè)置元素不會(huì)被顯示七：頁(yè)面布局（131型、121型）1：浮動(dòng) float屬性（元素向哪個(gè)方向浮動(dòng)） none:不浮動(dòng)（默認(rèn)值） left:向左浮動(dòng) right：向右浮動(dòng) 設(shè)置了浮動(dòng)后，該元素將會(huì)脫離標(biāo)準(zhǔn)文檔流，盒子的元素將不再延伸，而是根據(jù)內(nèi)容的寬度來(lái)確定2：清除浮動(dòng) clear屬性（設(shè)置元素的哪一側(cè)不允許有浮動(dòng)元素） left:左側(cè)不允許有浮動(dòng) right:右側(cè)不允許有浮動(dòng) both:兩側(cè)均不允許有浮動(dòng) none:兩側(cè)允許有浮動(dòng)元素（默認(rèn)值）3：控制元素的大小（） width:元素寬度 height:元素高度4：擴(kuò)展盒子的高度 因?yàn)楹凶又械脑赜辛烁?dòng)，所以，盒子

14、本身的高度可能就會(huì)變低，那么如果想讓盒子的高度視覺(jué)上依然包含所有的元素，我們可以擴(kuò)展盒子的高度。 方法一：在盒子中元素的最下方添加空div,設(shè)置樣式clear:both清除浮動(dòng) 方法二：在父級(jí)的標(biāo)簽設(shè)置中添加overflow屬性為：hidden。5：溢出處理 就是將內(nèi)容放到一個(gè)固定寬度和高度的盒子中，超出的部分隱藏起來(lái)或以帶滾動(dòng)條的窗口顯示 owerflow屬性 visible:默認(rèn)值，內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在盒子之外 hidden:內(nèi)容會(huì)被修剪，并且其余的內(nèi)容是不可見(jiàn)的 scroll:內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容 沒(méi)有內(nèi)容溢出的方向也會(huì)出現(xiàn)滾動(dòng)條 auto:如果內(nèi)容

15、被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余內(nèi)容 沒(méi)有內(nèi)容溢出的方向不會(huì)出現(xiàn)滾動(dòng)條八：定位機(jī)制 標(biāo)準(zhǔn)流 浮動(dòng) 絕對(duì)定位 1：position屬性：相對(duì)于父級(jí)的位置和相對(duì)于它自身該在的位置 ：static:默認(rèn)值沒(méi)有定位（元素按照標(biāo)準(zhǔn)流進(jìn)行布局） ：relative:相對(duì)定位(移動(dòng)后的位置相對(duì)于原位置)（負(fù)數(shù)正方向/正數(shù)反方向） 同時(shí)還要指定一定的偏移量，水平方向：left或right; 垂直方向：top或tottom 元素移動(dòng)之后，元素的大小并沒(méi)有改變，原有的位置依然保留，其他的元素不受影響（不會(huì)被下面的其他的元素占用） #third background-color:#C5DECC; border:1px #395E4F dashed; position:relative; right:20px; bottom:30px; ：absolute:絕對(duì)定位 使用了絕對(duì)定位的元素以它最近的一個(gè)“已經(jīng)定位”的“祖先元素”為基準(zhǔn)進(jìn)行偏移。 如果沒(méi)有已經(jīng)定位的祖先元素，那么會(huì)以瀏覽器窗口為基準(zhǔn)進(jìn)行定位。 絕對(duì)定位的元素從標(biāo)準(zhǔn)文檔流中脫離，這意味著它們對(duì)其他元素的定位不會(huì)造成影響。 元素