1.匯入格式

• 內部樣式：在head中使用style標籤，在style中直接編寫css程式碼

    <style>
        h1{
            color: green;
        }
    </style>

• 外部樣式（推薦使用）:在head中用link標籤，link標籤中的href中填寫css檔案的地址

    <link rel="stylesheet" href="css/style.css">

• 行內樣式：在標籤元素中，編寫一個style屬性，編寫樣式即可

    <h1 style="color: red">我是標題</h1>
 

優先順序：就近原則，誰離程式碼最近，誰的優先順序最高（即行內樣式最高，外部樣式和內部樣式誰在下面誰優先）

2.選擇器

基本選擇器

1. 標籤選擇器：選擇頁面上所有的這個標籤的元素

h1{}
p{}

2. 類選擇器:選中所有該類的標籤

.class{}

3. id選擇器:選中該id的標籤(id必須全域性唯一)

#id{}

優先順序：不遵循就近原則！id選擇器>類選擇器>標籤選擇器

層次選擇器

1. 後代選擇器：父級元素下所有的該標籤

div div{}
body p{}

2. 子選擇器:父級元素下的第一代標籤元素（只有一代）

body>p{}

3. 相鄰兄弟選擇器:只選中一個，為該元素同級向下的第一個元素

.active+p{}

4. 通用選擇器:選中該元素同級向下的所有元素

.active~p{}

結構偽類選擇器

ul的第一個元素

ul li:first-child{
                  background: cornflowerblue;
        }

ul的最後一個元素

ul li:last-child{
            background: #cb7b1c;
       }

選中p元素，定位到其父元素，若父元素下的第一個子元素為p，則這個p元素的背景元素為紅色

p:nth-child(1){
            background:red
}
 

選中父元素下的p元素的第二個

       p:nth-of-type(2){
           background: darkgray;
       }

屬性選擇器

        /*選中class中含有links的元素*/
        a[class*="links"]{
            background: green;
        }
        /*選中有id的元素*/
        a[id]{
            background: yellow;
        }
        /*選中href中以/開頭的元素*/
        a[href^="/"]{
            background: #cb7b1c;
        }
        /*選中href中以.doc結尾的元素*/
        a[href$=".doc"]{
            background: deeppink;
        }

• =：絕對等於
• *=：包含
• ^=：以……開頭
• $=：以……結尾

3.美化網頁元素

span標籤

span元素是無語義的行內元素，它可以對元素進行分組，使它們以不同的樣式顯示

字型樣式

• font-size：字型大小
• font-weight：字型粗細
• font-family：字型選擇（楷體、宋體等）
  可以將所有樣式寫在一起：
  字型風格（斜體等） 字型粗細 字型大小 字型選擇

        p{
            font: oblique bolder 50px "楷體";
        }

文字樣式

    text-align                              排版（center居中）
    text-indent                             首行縮排（單位為em）
    行高(line-height)和框的高度(height)       一致即可上下居中
    text-decoration: underline              下劃線
    text-decoration: line-through           中劃線
    text-decoration: overline               上劃線
    text-decoration: none                   超連結去下劃線

文字與圖片水平對齊（用span標籤將文字選中）

img,span{
    vertical-align: middle;
}

超連結偽類

• 滑鼠懸浮的狀態

a:hover{}

• 滑鼠按住未釋放的狀態

a:active{}

• 陰影

text-shadow:陰影顏色 水平偏移 垂直偏移 陰影半徑

列表

• list-style：none 去掉圓點
• list-style：circle 空心圓
• list-style：square 正方形
• list-style：decimal 數字

背景

• 背景加圖片
  background-image: url("圖片地址");
• 圖片平鋪方式
  background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
• 寫在一起為：
  background: 背景顏色 url("圖片地址") 圖片位置（eg：10px 5px） 平鋪方式;

漸變

漸變css原始碼網址
點選跳轉

4.盒子模型

• 外邊距：margin
• 內邊距：padding
• 邊框：border
  外邊距的妙用：居中元素（前提：1. 塊元素 2. 有固定的寬度）
  margin：0 auto

邊框圓角

border-radius
當border-radius、width、height相同時，可變成圓形

5.display

• display：none 此元素不會顯示
• display：block 此元素將顯示為塊級元素，此元素前後會帶有換行符
• display：inline 預設。此元素會被顯示為內聯元素，元素前後沒有換行符
• display：inline-block 行內塊元素，是塊元素，但可以內聯，在同一行

6.浮動

float：left/right/none

清除浮動

 clear:right  右側不允許有浮動
       left   左側不允許有浮動
       both   兩側不允許有浮動

父級邊框塌陷問題解決

1. 增加一個新的空標籤，清除浮動

<div class="clear1"></div>

.clear1{
    margin: 0;
    padding: 0;
    clear: both;
}

2. 在父級元素中增加一個overflow：hidden

3. 父類新增一個偽類after

#father:after{
    content: '';
    display: block;
    clear: both;
}

7.定位

相對定位

position：relative
生成相對定位的元素，相對於其正常位置進行定位(仍然在標準文件流中，原來的位置會被保留)

絕對定位

position:absolute
1.沒有父級元素定位的前提下，相對於瀏覽器定位
2.假設父級元素存在定位，相對於父級元素進行偏移

固定定位

position:fixed
固定某處不動，具體效果類似於某些網頁中的小廣告

z-index

z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。（僅能在定位元素上奏效）