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

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

p{background-color: #ccc;}

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

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

1.內部樣式表：將css語法寫在style標簽里面，而style標簽寫在head里面。作用域是本頁面上。

    
    
    
        
        
        
       
    
    
        
內部樣式表
    
    

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

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

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

html文件：



    
    
    


    
外部樣式表

3.內聯樣式表（行內）：將style作為html屬性，將聲明（css屬性:css屬性值;）作為html屬性值。作用域是當前元素

    
    


    
內聯樣式表

前提：出現層疊性（對同一個元素添加相同的css屬性）問題的時候，才會有優先級的比較。

優先級：內聯樣式>內部樣式,內聯樣式>外部樣式。內部樣式與外部樣式，誰寫在后面，就覆蓋前面的相同元素的相同屬性。

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

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

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

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

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

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

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

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

!important>行內樣式>id選擇器>類選擇器>標簽選擇器>通配符選擇器

    
    
    


    
選擇器優先級

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

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

p{font-size:24px;}

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

p{font-weight:bold;}

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

p{font-style:oblique;}

4.字體家族 font-family

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

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

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

十六進制：0-9 a b c d e f;

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

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

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

p{text-transform: none;}

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

p{text-decoration:blink;}

3.首行縮進 text-indent,單位:em,以當前字體的大小為基準(可以為負值)

p{font-size:16px;text-indent:-2em}
p{text-indent:2em}//常用，首行縮進2個文字

4.字間距 letter-spacing

p{letter-spacing:30px}

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

p{word-spacing: 30px}

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

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

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

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

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

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

3.列表樣式的位置 list-style-position,屬性值為：outside列表項外邊（默認） inside列表項里邊。

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

1.邊框寬度 border-width

2.邊框樣式 border-style,屬性值為：solid實線 dashed虛線 dotted點線 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.改變某條邊框的某個屬性的屬性值,border-方向-屬性(width、style、color)

border-right-style:dotted;

屬性值為:normal(默認) 具體像素值或者數值(eg:44px/2) 百分比(%,基于當前字體尺寸的百分比行間距。) 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.背景圖片重復background-repeat （repeat默認重復 no-repeat不重復 repeat-x水平方向重復 repeat-y垂直方向重復）

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

5.背景圖片的固定 background-attachment,屬性值為：scroll默認滾動 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不浮動

在標準的文檔流中，頁面布局必須遵循從左往右，從上往下

1.浮動后的元素會脫離標準流,但是里面的內容不會脫離文檔流。

2.浮動后的元素相當于行內塊級元素（一行顯示多個、可以設置寬高）

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

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

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