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

1、常用的CSS語法總結(jié)一：網(wǎng)頁<div>的基本命名規(guī)范 網(wǎng)頁布局的時候（命名代碼規(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:"

2、隸書"（楷體）;字體大小 font-size font-size:12px;（單位像素）字體風(fēng)格 font-style font-style:italic; normal:默認(rèn) italic:傾斜體字體的粗細(xì)font-weight font-weight:bold; normal:標(biāo)準(zhǔn) 、bold:粗體字體 lighter:細(xì)體在一個聲明中設(shè)置所有字體屬性 font font:italic bold 36px "宋體"2：文本樣式：顏色:color black blue green red gray orange purple white yellow 黑色 藍(lán)色

3、 綠色 紅 灰色 橙 紫 白色 黃色：水平對齊方式：text-align left:左 right:右 center:居中 justify：兩端對齊 ：首行縮進(jìn)（text-indent:2em） ：行高（line-height:12px）：文本添加修飾：text-decoration none:標(biāo)準(zhǔn)文本 underline:設(shè)置文本的下劃線 overline:設(shè)置文本的下劃線 line-through:設(shè)置文本的刪除線 blink:設(shè)置文本的閃爍（IE無效）：垂直對齊方式（只用于圖像與文本的居中對齊）vertical-align <p><img ./>xxxxx<

4、/p> 示例： p imgvertical-align:middle;三：超鏈接 1：根據(jù)用戶 未單擊訪問前（a:link） 鼠標(biāo)懸浮在超鏈接上(a:hover)【必須設(shè)置在a:link和a:visited之后才有效】 單擊未釋放(a:active)【必須設(shè)置在a：hover之后才有效】 單擊訪問后(a:visited) 的四個狀態(tài)顯示。 語法： 標(biāo)簽名:偽類名聲明; a:hover color:#B46210;text-decoration:underline; 2:設(shè)置鼠標(biāo)形狀:cursor default：默認(rèn) 箭頭 pointer: 超鏈接的指針（小手） wait:指示程序正在忙

5、（） help:可用的幫助（箭頭問好） text:指示文本（細(xì)I的形狀） crosshair:呈現(xiàn)十字狀四：背景樣式 1:<div>:可將HTML文檔分割成獨立的，不同的部分，常用來進(jìn)行網(wǎng)頁的布局 width:寬度（200px）height:高度（290px） <div id="iys2" style="width:180px ;height:180px;"> 或 #iys2width:180px ;height:180px; 2：背景屬性 背景顏色：background-color（值：red、yellow或#ff0000） 背

6、景圖像 背景圖像：background-image:url(bg.jpg) 背景重復(fù)：background-repeat(repeat:水平垂直方向重復(fù) repeat-x:水平方向重復(fù) repeat-y:在垂直方向重復(fù) no-repeat:背景圖像僅顯示一次 顯示背景圖像上的起始位置（基準(zhǔn)的位置：左上方）：background-position 正方向偏移的位置為：右下方 簡寫背景樣式：順序（顏色 url 背景定位 背景重復(fù)方式）五：列表樣式1：列表項標(biāo)記的類型 list-style-type none:無標(biāo)記符號 disc:實心圓，默認(rèn)類型 circle:空心圓 square:實心正方形 d

7、ecimal：數(shù)字2：圖像替換列表項的標(biāo)記（設(shè)置它后list-style-type將不起作用） list-style-image list-style-image:url(image/arrow-right.gif);3：何處放置列表項標(biāo)記 list-style-position inside:標(biāo)記放置在文本（范圍）以內(nèi) outside:標(biāo)記放置在文本以外4：設(shè)置所有列表的屬性 list-style 順序：list-style-type list-style-position list-style-image六：盒子模型 1：邊框（第一層） 2：元素內(nèi)容及內(nèi)邊距（第二層） 3：背景圖（第三層）

8、 4：外邊距 盒子模型的寬度=content(內(nèi)容)+padding(填充：內(nèi)容與邊框之間）+border(內(nèi)容的邊框)+margin(兩個內(nèi)容之間的距離)1：邊框 border-color：顏色 屬性 說明 示例 border-top-color 上邊框顏色border-top-color:#369; border-right-color右邊框顏色border-right-color:#369; border-bottom-color下邊框顏色border-bottom-color:#fae45b; border-left-color左邊框顏色border-left-color:#efcd5

9、6; 四個邊框為同一顏色border-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ì) thin 設(shè)置細(xì)的邊框 medium 默認(rèn)值（設(shè)置中等的邊框） thick 設(shè)置粗的邊框 像素值 自定義設(shè)置邊框的寬度 border-top-

10、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：無邊框 dotted：點線邊框 dashed：虛線邊框 solid：實線邊框 double：雙線邊框 簡寫（border）：在一個聲明中設(shè)置所有的邊框?qū)傩?border-top border-

11、right border-bottom border-left 順序為：width 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-left : 1 px margin :3px 5px 7px 4px; 上、右、下、左邊距 margin :3px 5px; 上下3px 左右邊距5

12、px margin :3px 5px 7px; 上下為3和7；左右為5 margin :8px; 四個邊距都是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; padding:20px 5px 8px 10px ; padding:10px 5px; padding:30px 8px 10px ; ：上下為30和

13、10；左右為8 padding:10px;4：標(biāo)準(zhǔn)文檔流（CSS默認(rèn)的排列規(guī)則） 塊級元素：以一塊區(qū)域顯示的元素(獨占一行，擁有自己的區(qū)域) <ul><ol><dl><h1><p><div> 內(nèi)聯(lián)元素:字母之間橫向排列，到最右端自動拆行（沒有自己的區(qū)域） <span><a><img><strong> 內(nèi)聯(lián)標(biāo)簽可以包含在塊級標(biāo)簽之中；但塊級標(biāo)簽無法包含在內(nèi)聯(lián)標(biāo)簽之中 display屬性（控制元素的顯示方式） 值 說明 block塊級元素的默認(rèn)值，元素會被顯示為塊級元素，該元素前

14、后會帶有換行符 inline內(nèi)聯(lián)元素的默認(rèn)值。元素會被顯示為內(nèi)聯(lián)元素，該元素前后沒有換行符 none設(shè)置元素不會被顯示七：頁面布局（131型、121型）1：浮動 float屬性（元素向哪個方向浮動） none:不浮動（默認(rèn)值） left:向左浮動 right：向右浮動 設(shè)置了浮動后，該元素將會脫離標(biāo)準(zhǔn)文檔流，盒子的元素將不再延伸，而是根據(jù)內(nèi)容的寬度來確定2：清除浮動 clear屬性（設(shè)置元素的哪一側(cè)不允許有浮動元素） left:左側(cè)不允許有浮動 right:右側(cè)不允許有浮動 both:兩側(cè)均不允許有浮動 none:兩側(cè)允許有浮動元素（默認(rèn)值）3：控制元素的大?。?lt;div>） wid

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

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