css簡介
什麼是css
- css是層疊樣式表（Cascading Style Sheets）的簡稱。有時我們也會稱之爲CSS樣式表或級聯樣式表
- css也是一種標記語言
有什麼用
- CSS主要用於設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的佈局和外觀顯示樣式。
- CSS讓我們的網頁更加豐富多彩，佈局更加靈活自如。簡單理解：CSS 可以美化 HTML , 讓 HTML 更漂亮， 讓頁面佈局更簡單。
- CSS 最大價值: 由 HTML 專注去做結構呈現，樣式交給 CSS，即 結構 ( HTML ) 與樣式( CSS ) 相分離
引入css(css三種引入方式)
行內樣式表（行內式）
行內樣式表（內聯樣式表）是在元素標籤內部的 style 屬性中設定 CSS 樣式。適合於修改簡單樣式.
語法：
<div style="color: red; font-size: 12px;">helloword</div>
1.style 其實就是標籤的屬性
在雙引號中間，寫法要符合 CSS 規範
2.可以控制當前的標籤設置樣式
3.由於書寫繁瑣，並且沒有體現出結構與樣式相分離的思想，所以不推薦大量使用，只有對當前元素添加簡單樣式的時候，可以考慮使用
4.使用行內樣式表設定 CSS，通常也被稱爲行內式引入
內部樣式表（嵌入式）
內部樣式表（內嵌樣式表）是寫到html頁面內部. 是將所有的 CSS 代碼抽取出來，單獨放到一個
<style>
div {
color: red;
font-size: 12px;
}
</style>
1.
外部樣式表（鏈接式）
實際開發都是外部樣式表. 適合於樣式比較多的情況. 核心是:樣式單獨寫到CSS 文件中，之後把CSS文件引入到 HTML 頁面中使用.
引入外部樣式表分爲兩步：
1. 新建一個後綴名爲 .css 的樣式文件，把所有 CSS 代碼都放入此文件中。
2. 在 HTML 頁面中，使用 標籤引入這個文件。
語法：
<link rel="stylesheet" href="css文件路徑">
css選擇器
-
ID選擇器
#elem{} id=“elem”1. ID是唯一值，在一個頁面中只能出現一次，出現多次是不符合規範的。 2. 命名的規範，由字母、下劃線、中劃線、字母（並且第一個不能是數字） 3. 駝峯寫法 : searchButton (小駝峯) SearchButton (大駝峯) searchSmallButton 短線寫法：search-small-button 下劃線寫法：search_small_button -
CLASS選擇器
.elem{} class=“elem”1. class選擇器是可以複用的。 2. 可以添加多個class樣式。 3. 多個樣式的時候，樣式的優先級根據CSS決定，而不是class屬性中的順序。 4. 標籤+類的寫法 -
標籤選擇器(TAG選擇器)
div{}
使用的場景：
1. 去掉某些標籤的默認樣式時
2. 複雜的選擇器中，如 層次選擇器 -
羣組選擇器(分組選擇器)
可以通過逗號的方式，給多個不同的選擇器添加統一的CSS樣式，來達到代碼的複用。
<style>
div,
p,
ul>li{
color: aqua;
}
</style>
-
通配選擇器
*{ } -> div,ul,li,p,h1,h2....{} 注：儘量避免使用通配選擇器，因爲會給所有的標籤添加樣式，慎用。 使用的場景： 1. 去掉所有標籤的默認樣式時 -
層次選擇器
後代 M N { } 當前M的子孫後代 父子 M > N { } 當前M的兒子 兄弟 M ~ N { } 當前M下面的所有兄弟N標籤 相鄰 M + N { } 當前M下面相鄰的N標籤 -
屬性選擇器
M[attr] {} = : 完全匹配 *= : 部分匹配 ^= : 起始匹配 $= : 結束匹配 [][][] : 組合匹配 -
僞類選擇器
M:僞類{}
:link 訪問前的樣式 ( 只能添加給a標籤 )
:visited 訪問後的樣式 ( 只能添加給a標籤 )
:hover 鼠標移入時的樣式 (可以添加給所有的標籤)
:active 鼠標按下時的樣式 (可以添加給所有的標籤)注： 一般的網站都只設置 a{} ( link visited active ) a:hover{} :after、:before 通過僞類的方式給元素添加一段文本內容，使用content屬性 :checked、:disabled 、:focus 都是針對表單元素的 結構性僞類選擇器 nth-of-type() nth-child() 角標是從1開始的，1表示第一項，2表示第二項 | n值 表示從0到無窮大 first-of-type last-of-type only-of-type nth-of-type()和nth-child()之間的區別 type : 類型 child : 孩子 -
:focus 僞類選擇器
定義：
:focus 僞類選擇器用於選取獲得焦點的表單元素。
焦點就是光標，一般情況 類表單元素才能獲取
css元素顯示模式
1、什麼是元素的顯示模式
定義：
元素顯示模式就是元素（標籤）以什麼方式進行顯示，比如
作用：
網頁的標籤非常多，在不同地方會用到不同類型的標籤，瞭解他們的特點可以更好的佈局我們的網頁。
2、元素顯示模式的分類
2.1、塊元素
常見的塊元素：
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
塊級元素的特點：
- 比較霸道，自己獨佔一行。
- 高度，寬度、外邊距以及內邊距都可以控制。
- 寬度默認是容器（父級寬度）的100%。
- 是一個容器及盒子，裏面可以放行內或者塊級元素。
注意：
文字類的元素內不能放塊級元素
<p> 標籤主要用於存放文字，因此 <p> 裏面不能放塊級元素，特別是不能放<div>
同理， <h1>~<h6>等都是文字類塊級標籤，裏面也不能放其他塊級元素
2.2、行內元素
常見的行內元素：
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
標籤是最典型的行內元素。有的地方也將行內元素稱爲內聯元素。
行內元素的特點：
-
相鄰行內元素在一行上，一行可以顯示多個。
-
高、寬直接設置是無效的。
-
默認寬度就是它本身內容的寬度。
-
行內元素只能容納文本或其他行內元素。
注意：
鏈接裏面不能再放鏈接
特殊情況鏈接< a> 裏面可以放塊級元素，但是給 <a>轉換一下塊級模式最安全
2.3、行內塊元素
常見的行內塊標籤：
<img />、<input />、<td>
它們同時具有塊元素和行內元素的特點。有些資料稱它們爲行內塊元素。
行內塊元素的特點：
- 和相鄰行內元素（行內塊）在一行上，但是他們之間會有空白縫隙。
- 一行可以顯示多個（行內元素特點）。
- 默認寬度就是它本身內容的寬度（行內元素特點）。
- 高度，行高、外邊距以及內邊距都可以控制（塊級元素特點）。
2.4、元素顯示模式總結
學習元素顯示模式的主要目的就是分清它們各自的特點，當我們網頁佈局的時候，在合適的地方用合適的標籤元素。
3、元素顯示模式的轉換
簡單理解:
一個模式的元素需要另外一種模式的特性
比如想要增加鏈接 <a> 的觸發範圍。
轉換方式
- 轉換爲塊元素：display:block;
- 轉換爲行內元素：display:inline;
- 轉換爲行內塊：display: inline-block;
4、單行文字垂直居中的代碼
解決方案:
讓文字的行高等於盒子的高度 就可以讓文字在當前盒子內垂直居中
簡單理解:
行高的上空隙和下空隙把文字擠到中間了，
如果行高小於盒子高度,文字會偏上，
如果行高大於盒子高度,則文字偏下。
CSS繼承
文字相關的樣式可以被繼承
佈局相關的樣式不能被繼承 ( 默認是不能繼承的，但是可以設置繼承屬性 inherit 值 )
CSS優先級
1. 相同樣式優先級
當設置相同樣式時，後面的優先級較高，但不建議出現重複設置樣式的情況。
2. 內部樣式與外部樣式
內部樣式與外部樣式優先級相同，如果都設置了相同樣式，那麼後寫的引入方式優先級高。
3. 單一樣式優先級
style行間 > id > class > tag > * > 繼承
注：style行間 權重 1000
id 權重 100
class 權重 10
tag 權重 1
4. !important
提升樣式優先級，非規範方式，不建議使用。( 不能針對繼承的屬性進行優先級的提升 )
5. 標籤+類與單類
標籤+類 > 單類
6. 羣組優先級
羣組選擇器與單一選擇器的優先級相同，靠後寫的優先級高。
7. 層次優先級
1. 權重比較
ul li .box p input{} 1 + 1 + 10 + 1 + 1
.hello span #elem{} 10 + 1 + 100
2. 約分比較
ul li .box p input{} li p input{}
.hello span #elem{} #elem{}