今天主要學習CSS
思維導圖：
一.CSS入門
1.什麼是CSS
css又被稱之爲層疊樣式、級聯樣式表，是一個用於來美化網頁的一種語法
2.CSS優點
（1）內容和表現進行了分離
（2）網頁的表現統一，易於維護
（3）具備非常豐富的樣式，使得頁面的佈局更加的靈活
（4）極度的減少了網頁的代碼量,增加了網頁的加載速度，節省了服務器資源和帶寬。
二．CSS的基礎語法
CSS的基礎選擇器
1.標籤選擇器
標籤名{
屬性名:屬性值;
}
------
h1{
color: red;
}
標籤選擇器的特點:
標籤選擇器選擇的是指定頁面的所有相關標籤，只要符合這個標籤就全部生效。
2.類選擇器
類名{
屬性名:屬性值;
}
------
.demo{
color: red;
}
<p class="demo"></p>
類選擇器的特點:
調用哪個class,則哪個class生效
（1）一個頁面當中允許定義N個class
（2）一個標籤允許定義多個class
（3）一個頁面當中允許出現N個同名的class
（4）class是存在命名規則
（5）不能使用數字進行開頭
（6）不能使用特殊符號進行類名的定義
（7）一般不建議使用中文
（8）一般不建議使用關鍵字(標籤名、屬性名)
3.ID選擇器
ID名{
屬性名:屬性值;
}
------
#demo{
color: red;
}
<p id="demo"></p>
ID選擇器的特點:
（1）一個ID選擇器只能在一個頁面被調用一次，如果是2次以上使用的話，就違背了W3C的標準，以後JS繼續調用就會出現問題。
（2）一個標籤允許同時定義類和ID，並且可以同時調用且生效
（3）一個標籤只能定義一個ID
4.通配選擇器
*{
屬性名:屬性值;
}
------
*{
color: red;
}
通配選擇器的特點:
（1）頁面當中的所有選擇器都會生效，但是優先級最低
（2）除非特殊原因，否則不推薦使用，因爲這種方式是生效整個頁面的所有類型的選擇器，極大的增加服務器的負擔
5.選擇器的優先級問題
ID選擇器 > 類選擇器 > 標籤選擇器 > 通配選擇器
三．複合選擇器
所謂的複合選擇器其實就是兩個以上的選擇器進行混合使用。
1.交集選擇器
標籤名類(ID)選擇器{
屬性名:值;
}
------
<style type="text/css">
p.t3{
color: red;
}
</style>
<p>TOOBUG1</p>
<h1>TOOBUG2</h1>
<p class="t3">TOOBUG3</p>
<h1 class="t3">TOOBUG4</h1>
交集選擇器的特點:
要求既要滿足是某一個標籤，同時還要滿足是某一個類或者ID選擇。
2.後代選擇器
選擇器 選擇器{
屬性名:值;
}
------
<style type="text/css">
.div_1 div{
color: red;
}
</style>
<div>
你好1
</div>
<!-- ------------ -->
<div>
<div>
你好2
</div>
</div>
<!-- ------------ -->
<div class="div_1">
<div>
<div>
你好3
</div>
</div>
</div>
後代選擇器的特點:
（1）使用後代選擇器的前提條件一定是存在嵌套關係
（2）父選擇器在前，後代選擇器在後
（3）存在無限隔代的問題
（4）後代選擇可以任意選擇器的自由組合
3.子代選擇器
選擇器>選擇器{
屬性名:值;
}
------
<style type="text/css">
div>span{
color: red;
}
</style>
<div class="d1">
<p>
<span>TOOBUG1</span>
</p>
</div>
<div class="d1">
<span>TOOBUG2</span>
</div>
子代選擇器的特點:
（1）使用子代選擇器的前提條件一定是存在嵌套關係
（2）父選擇器在前，後代選擇器在後
（3）不能存在任何隔代的問題
（4）子代選擇可以任意選擇器的自由組合
4.並集選擇器
選擇器,選擇器,選擇器,選擇器{
屬性名:值;
}
------
<style type="text/css">
h1,div,.d_1,p{
color: red;
}
</style>
<h1>h1</h1>
<div>div</div>
<div class="d_1">div2</div>
<p>p</p
並集選擇器的特點:
（1）並集選擇器可以任意選擇器無限混搭
（2）並集選擇器可以將多個選擇器實現同一種效果
四．樣式表的三種導入方式
1.行內樣式表
定義在標籤當中，只針對該標籤本身生效，不影響其他標籤
<h1 style="color: #7FFFD4;">不同樣式的導入方式</h1>
2.內部樣式表
定義在head當中，只針對該HTML本身生效，不影響其他HTML文件
<head>
<style type="text/css">
h1{
color: red;
}
</style>
</head>
<h1 style="color: #7FFFD4;">不同樣式的導入方式</h1>
3.外部樣式表
定義在一個獨立的css文件當中，可以影響任何的HTML文件,只需某一個HTML對他進行導入即可。
<head>
<link rel="stylesheet" href="css/demo06.css" />
</head>
<h1 style="color: #7FFFD4;">不同樣式的導入方式</h1>
4.導入樣式需要注意的問題:
（1）內部樣式表一定是寫在head當中，並且寫好<style type="text/css">
（2）外部樣式表是獨立的，不需要在獨立文件寫任何無關於樣式的代碼，包括<style type="text/css">的本身，並且在誰需要導入的HTML文件的head進行<link rel="stylesheet" href="css/demo06.css" />的導入。
（3）樣式表的優先級別爲行內樣式 > 內部樣式 > 外部樣式
（4）在實際開發當中，則儘量絕對優先使用外部樣式表,如有特殊情況(例如選擇器衝突需要提高優先級)纔可能考慮使用內部樣式，但也儘量避免。行內樣式因爲緊密的將顏色和內容捆綁，請儘量杜絕使用。
5.span標籤
在很多時候，我們需要給一個文字進行一些樣式的修飾，這個時候我們就需要使用一個標籤對文字進行包裹，但是如果使用的是h標籤或者p標籤等等，那麼這個文字就會受標籤自己附帶的一些屬性干擾，這個時候呢，我們就可以使用span標籤，span是一個用於修飾文字的標籤，這個標籤本身沒有任何的效果，非常的趕緊純粹，但是他可以應用任何修飾文字的CSS屬性。
6.字體CSS修飾
- font-family:設置的是字體的類型
- font-size:設置的是字體的大小
- font-style:設置是字體的風格
- font-weigth:設置字體的粗細
- font:字體設置連寫(風格 粗細 大小 類)
/* 設置字體大小 */
font-size: 30px;
/* 設置字體的風格 */
font-family: "仿宋";
/* 設置字體的風格 */
font-style:normal;
/* 設置字體的粗細 */
font-weight: bold;
7.字體的連寫
關於字體的連寫，要求順序必須一致，可以少些 但是不能打亂順序(但是字體的大小和類型爲必寫）
8.文本樣式
/* 文本顏色 */
color:red;
/* 文本水平對齊 left 左 |center 中 | right右*/
text-align:right ;
/* 文本的首行縮進 */
text-indent:2em ;
/* 文本的行高 */
line-height:30px ;
/* 文本的修飾 none 默認 | underline 下劃線 | overline 上劃線 | line-through 刪除線*/
text-decoration:line-through ;
9.DIV標籤
div標籤跟span標籤其實都是一個本身不具備任何功能和效果的標籤。
只不過span一般用於來修飾一段文字，而div一般是作爲佈局使用，他是一個容器。
div{
/* 設置高度 */
height: 300px;
/* 設置寬度 */
width: 300px;
/* 設置邊框 */
border: 1px solid red;
color: seagreen;
}
-----
<div>
我是一個div
</div>
網頁背景
/* 背景顏色 */
background-color: firebrick;
/* 設置網頁的背景圖像 url裏面寫入背景圖片的位置*/
background-image: url(d.jpg);
/* 設置網頁的背景重複 */
/* 設置網頁的x軸平鋪方式 repeat 平鋪| no-repeat 不平鋪 */
/* background-repeat-x: no-repeat; */
/* 設置網頁的y軸平鋪方式 repeat 平鋪| no-repeat 不平鋪 */
/* background-repeat-y: no-repeat; */
/* 設置網頁的x,y軸平鋪方式 repeat 平鋪| no-repeat 不平鋪(第一個參數爲x,第二個參數爲y) */
background-repeat:no-repeat;
/* 設置網頁背景的定位 */
/* 設置網頁的x軸定位 */
/* background-position-x:80px; */
/* 設置網頁的y軸定位 */
/* background-position-y:80px; */
/* 設置同時網頁的x,y軸定位 */
background-position:80px 80px;
10.列表樣式
/* 處理列表的樣式 */
list-style-type:none;
五．CSS其它內容
1.CSS的層疊性:
當一個標籤、類、ID被選擇器調用，且這個選擇器出現了衝突，根據CSS的層疊性在同等優先級下永遠只會調用最後面的選擇器樣式，跟CSS的調用順序無關。
2.CSS的繼承性:
在存在嵌套關係的情況下,子標籤沒有設置某一個樣式，而父標籤存在某一個的樣式，父標籤的樣式會繼承到子標籤當中，但是要注意兩個問題，有一些標籤本身就存在一些默認樣式，這種情況下，父標籤的樣式就不會被繼承下來：
（1）a標籤本身存在了樣式和下劃線，那麼父標籤的顏色和下劃線就不會被繼承
（2）h標籤本身存在的字體加粗和字號大小，那麼父標籤的字體加粗和大小的樣式就不會被繼承下來
（3）行內選擇器 > ID選擇器 > 類選擇器 > 標籤選擇器 > 默認樣式
六．標籤的元素分類(標籤對於瀏覽器的顯示方式):
1.塊級元素:
舉例:p、h、li
特點:
（1）獨自佔用整行
（2）可以允許設置高和寬度
（3）如果存在嵌套，子元素沒有定義寬度的情況下會默認參考父級元素
2.行內元素:
舉例:span、a、em、del...
特點:
（1）不獨佔一行，允許在同一行顯示
（2）不能設定高和寬
（3）實際的寬度是由內容進行撐開
3.行內塊元素:
舉例:img、input
特點:
（1）不獨佔一行，允許在同一行顯示
（2）可以設定高和寬
七.HTML的標準流:
1.其實就是HTML默認的流向方式，從上往下，從左往右。
浮動:float: left | right
2.特點:
（1）浮動的元素不會繼續佔據原來的位置(脫離標準流)
（2）浮動元素可以允許在同一行顯示(會默認的將一個元素類型轉換成行內塊)
因爲元素的浮動，會失去該元素本身存在的位置，所以後面會直接的受到影響 取代上一個元素的位置。。
八.網頁定位:
1.概念：
在實際的開發當中,很多標籤出現的位置其實的不標準,那麼這種不貼合上下左右的位置，如果使用所謂內外間距進行佈局，就非常難以實現，因爲所謂的間距佈局 只是非常公整的方向式佈局。
爲了固定某一個標籤的位置，以及靈活的調整這個位置，我們可以使用定位進行完成。
position:
top 上
bottom 下
left 左
right 右
2.三種定位方式:
（1）靜態定位(標準流,默認定位方式):
position:static
（2）絕對定位:(脫標)
position:absolute;
特點:
<1>出發的位置是參考瀏覽器的邊框(就是從瀏覽器開始出發)
<2>使用絕對定位之後,會脫標,不會繼續佔據原來的位置
<3>在嵌套情況下,如果父盒子使用絕對定位,子盒子使用絕對定位出發的位置是基於父盒子開始。
<4>在嵌套情況下,如果父盒子沒有使用絕對定位,子盒子使用絕對定位出發的位置是基於瀏覽器開始。
<5>如果使用了絕對定位，這個元素如果是行內元素會自動轉換行內塊元素(一般注意即可,不要作爲重點使用)
(3)相對定位:position: relative;
特點:
<1>使用相對定位,出發的位置是參考元素本身的位置(從自己位置出發)
<2>使用相對定位並不會造成脫標,仍然佔據自己元素本身的位置
<3>在嵌套的情況下，父盒子使用相對定位，子盒子使用相對定位，子盒子出發的位置是基於自身。
<4>在嵌套的情況下，父盒子使用相對定位，子盒子使用絕對定位，子盒子出發的位置是基於父盒子開始。
(4)那麼我們到底是使用相對還是使用絕對呢?
子絕父相(子盒子使用絕對定位，父盒子使用相對爲)
固定定位: position: fixed;
特點:
<1>使用固定定位,出發的位置是參考瀏覽器
<2>使用固定定位並不會造成脫標,仍然佔據自己元素本身的位置
<3>會自動的將行內元素轉換行內塊元素