摘要：語法選擇器聲明聲明由屬性屬性值組成屬性寬度單位高度單位背景顏色顏色的英文或者十六進(jìn)制顏色字體顏色字體大小注釋單行注釋多行注釋樣式表內(nèi)部樣式表將語法寫在標(biāo)簽里面，而標(biāo)簽寫在里面。

聲明由 css屬性:屬性值; 組成

p{background-color: #ccc;}

width 寬度(單位：px)
height 高度（單位:px）
background-color 背景顏色(顏色的英文或者十六進(jìn)制顏色)
color 字體顏色
font-size 字體大小
……

 /*h3{width:300px;}*/ 單行注釋
 
 /* p{
        width:300px;
        height: 300px;
    } */多行注釋

1.內(nèi)部樣式表：將css語法寫在style標(biāo)簽里面，而style標(biāo)簽寫在head里面。作用域是本頁面上。

    
    
    
        
        
        
       
    
    
        
內(nèi)部樣式表
    
    

2.外部樣式表：新建一個(gè)css文件，在css文件里寫css語法.接著在html文件里通過link標(biāo)簽（寫在head里面）的href屬性鏈接到該css文件。作用域是只要鏈接到該css文件的所有html頁面。

[注] linkrel="stylesheet"說明鏈接的是一個(gè)樣式表文件。

test.css文件：
h3{
    width:300px;
    height:300px;
    background-color:red;
}

html文件：



    
    
    


    
外部樣式表

3.內(nèi)聯(lián)樣式表（行內(nèi)）：將style作為html屬性，將聲明（css屬性:css屬性值;）作為html屬性值。作用域是當(dāng)前元素

    
    


    
內(nèi)聯(lián)樣式表

前提：出現(xiàn)層疊性（對同一個(gè)元素添加相同的css屬性）問題的時(shí)候，才會有優(yōu)先級的比較。

優(yōu)先級：內(nèi)聯(lián)樣式>內(nèi)部樣式,內(nèi)聯(lián)樣式>外部樣式。內(nèi)部樣式與外部樣式，誰寫在后面，就覆蓋前面的相同元素的相同屬性。

1.標(biāo)簽選擇器，通過標(biāo)簽名獲取元素(相當(dāng)于人的姓名)

    div{
        width:200px;
        height:200px;
        background-color:#666;
    }

2.類選擇器，通過.類名獲取元素(相當(dāng)于人的外號)

.box{
    width:200px;
    height:200px;
    background-color:#666;
}

3.id選擇器，通過#id名獲取元素(相當(dāng)于人的身份證號碼，元素的id有且只有一個(gè))

#box{
    width:200px;
    height:200px;
    background-color: #666;
}

[注]類和id選擇器的命名規(guī)則：英文開頭，包含數(shù)字、下劃線

    
類選擇器和id選擇器
    
id選擇器

!important>行內(nèi)樣式>id選擇器>類選擇器>標(biāo)簽選擇器>通配符選擇器

    
    
    


    
選擇器優(yōu)先級

1.字體大小 font-size,單位為px、rem、pt等。

瀏覽器默認(rèn)字體大小為16px,最小字體為12px。(9pt=12px,12pt=16px)

p{font-size:24px;}

2.字體加粗 font-weight,屬性值為：bolder更加粗 bold加粗600-900 normal默認(rèn)正常100-500。

p{font-weight:bold;}

3.字體傾斜 font-style,屬性值為：normal默認(rèn)正常 italic傾斜 oblique更傾斜

p{font-style:oblique;}

4.字體家族 font-family

該屬性的屬性值若為中文字體或多個(gè)單詞組成，則需要加上雙引號。若存在多個(gè)字體，則用逗號隔開。表示找不到前一個(gè)字體時(shí)，就用后面的。

p{font-family:"Times New Roman","楷體","宋體";}

5.字體顏色 color，屬性值為：顏色的單詞或者十六進(jìn)制

十六進(jìn)制：0-9 a b c d e f;

表示顏色:#000000,前兩個(gè)0代表紅色，中間兩個(gè)0代表綠色，后兩個(gè)0代表藍(lán)色.若是所有表示同一顏色的兩個(gè)數(shù)是一樣的，則可以省略成三個(gè)數(shù)字。

div{color:yellow;}
p{color:#ccc;}
span{color:#ff0000;}//紅色，可簡寫為:#f00;
a{color:#00ff00;}//綠色，可簡寫為:#0f0;
i{color:#0000ff;}//藍(lán)色，可簡寫為:#00f;

1.文本設(shè)置大小寫 text-transform，屬性值為：lowercase小寫 uppercase大寫 capitalize首字母大寫 none默認(rèn)不變換。

p{text-transform: none;}

2.文本修飾 text-decoration，屬性值為：underline下劃線 overline上劃線 line-through刪除線 none默認(rèn)沒有修飾 blink閃爍

p{text-decoration:blink;}

3.首行縮進(jìn) text-indent,單位:em,以當(dāng)前字體的大小為基準(zhǔn)(可以為負(fù)值)

p{font-size:16px;text-indent:-2em}
p{text-indent:2em}//常用，首行縮進(jìn)2個(gè)文字

4.字間距 letter-spacing

p{letter-spacing:30px}

5.詞間距 word-spacing(以空格作為標(biāo)識符)

p{word-spacing: 30px}

6.文本在當(dāng)前容器中的水平對齊方式 text-align，屬性值為：left默認(rèn)向左 right向右對齊 center居中對齊 justify調(diào)整,對英文有效果。

p{
    width: 200px;
    height: 200px;
    font-size:18px;
    text-align:center;
}

7.文本在垂直方向的對齊方式(行內(nèi)元素):vertical-align,屬性值為：baseline默認(rèn)以基線對齊 middle中線 top頂線 bottom底線。

a{
    font-size:24px;
    vertical-align:middle;
}
span{
    vertical-align:middle;
}
img{
    vertical-align:middle;
}

1.列表樣式類 list-style-type,屬性值為：disc默認(rèn)實(shí)心圓 circle空心圓 square方塊 none沒有。

2.列表樣式圖片 list-style-image:url(路徑)

3.列表樣式的位置 list-style-position,屬性值為：outside列表項(xiàng)外邊（默認(rèn)） inside列表項(xiàng)里邊。

ul,li{
    list-style-type: none;//常用
    list-style-image: url("../images/arror.jpg");
    list-style-position: inside;
    
}
//關(guān)于li前面的小圖標(biāo)，一般會給li留個(gè)padding的位置，再給li加上背景圖片，而且要no-repeat，background-position一般都是0 center

1.邊框?qū)挾?border-width

2.邊框樣式 border-style,屬性值為：solid實(shí)線 dashed虛線 dotted點(diǎn)線 double雙線

3.邊框顏色 border-color

div{
    width: 200px;
    height: 200px;
    border-width:3px;
    border-style: double;
    border-color:red;
    
}

4.改變某條邊框的屬性值,border-方向left、right、top、bottom）

border-left:2px dashed red;

5.改變某條邊框的某個(gè)屬性的屬性值,border-方向-屬性(width、style、color)

border-right-style:dotted;

屬性值為:normal(默認(rèn)) 具體像素值或者數(shù)值(eg:44px/2) 百分比(%,基于當(dāng)前字體尺寸的百分比行間距。) inherit(從父元素繼承 line-height 屬性的值。)

p{
    width:100px;
    height:30px;
    font-size:18px;
    text-align:center;
    line-height:30px;
}
//常用的文本水平和垂直方向都居中：text-align:center;line-height:numpx;line-height的值與元素的高度一致。

1.背景顏色background-color

2.背景圖片background-image:url()

3.背景圖片重復(fù)background-repeat （repeat默認(rèn)重復(fù) no-repeat不重復(fù) repeat-x水平方向重復(fù) repeat-y垂直方向重復(fù)）

4.背景圖片在容器中的位置 background-position:水平方向 垂直方向;屬性值可以為數(shù)值、方位（leftcenterright、topcenterbottom）。

5.背景圖片的固定 background-attachment,屬性值為：scroll默認(rèn)滾動 fixed固定。

div{
    width: 800px;
    height: 800px;
    border:10px solid #ccc;
    /*background-color:#ffffd;*/
    background-image:url("../images/666.jpg");
    background-repeat:repeat-y;
    background-position:center center;
    
    background-attachment: fixed;
}

屬性值為：left向左浮動 right向右浮動 none不浮動

在標(biāo)準(zhǔn)的文檔流中，頁面布局必須遵循從左往右，從上往下

1.浮動后的元素會脫離標(biāo)準(zhǔn)流,但是里面的內(nèi)容不會脫離文檔流。

2.浮動后的元素相當(dāng)于行內(nèi)塊級元素（一行顯示多個(gè)、可以設(shè)置寬高）

3.若是一行放不下所有的浮動元素，則放不下的那個(gè)浮動元素會在它上一個(gè)元素的最低點(diǎn)開始擺放。

屬性值為0-1之間的小數(shù)，數(shù)值越大越不透明

div{
    width:100%;
    height:100%;
    background:#999;
    opacity:0.2;
}