css簡介
CSS 是層疊樣式表 ( Cascading Style Sheets ) 的簡稱.
有時(shí)我們也會稱之為 CSS 樣式表或級聯(lián)樣式表。
CSS 是一種標(biāo)記語言
CSS 主要用于設(shè)置 HTML 頁面中的文本內(nèi)容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局和外觀顯示樣式。
CSS 讓我們的網(wǎng)頁更加豐富多彩，布局更加靈活自如。簡單理解：CSS 可以美化 HTML , 讓 HTML 更漂亮， 讓頁面布局更簡單。
CSS 最大價(jià)值: 由 HTML 專注去做結(jié)構(gòu)呈現(xiàn)，樣式交給 CSS，即 結(jié)構(gòu) ( HTML ) 與樣式( CSS ) 相分離
css語法規(guī)范
1.使用 HTML 時(shí)，需要遵從一定的規(guī)范，CSS 也是如此。要想熟練地使用 CSS 對網(wǎng)頁進(jìn)行修飾，首先需要了解CSS 樣式規(guī)則。
2.CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器以及一條或多條聲明。
1.選擇器是用于指定 CSS 樣式的 HTML 標(biāo)簽，花括號內(nèi)是對該對象設(shè)置的具體樣式
2.屬性和屬性值以“鍵值對”的形式出現(xiàn)
3.屬性是對指定的對象設(shè)置的樣式屬性，例如字體大小、文本顏色等
4.屬性和屬性值之間用英文“:”分開
5.多個(gè)“鍵值對”之間用英文“;”進(jìn)行區(qū)分
css選擇器的作用
選擇器(選擇符)就是根據(jù)不同需求把不同的標(biāo)簽選出來這就是選擇器的作用。 簡單來說，就是選擇標(biāo)簽用的。
找到所有的 h1 標(biāo)簽。 選擇器（選對人）
設(shè)置這些標(biāo)簽的樣式，比如顏色為紅色（做對事）。
css基礎(chǔ)選擇器
基礎(chǔ)選擇器又包括：標(biāo)簽選擇器、類選擇器、id 選擇器和通配符選擇器
標(biāo)簽選擇器：
標(biāo)簽選擇器（元素選擇器）是指用 HTML 標(biāo)簽名稱作為選擇器，按標(biāo)簽名稱分類，為頁面中某一類標(biāo)簽指定統(tǒng)一的 CSS 樣式。
語法：
標(biāo)簽選擇器{
屬性：屬性值
...
}
作用：
標(biāo)簽選擇器（元素選擇器）是指用 HTML 標(biāo)簽名稱作為選擇器，按標(biāo)簽名稱分類，為頁面中某一類標(biāo)簽指定統(tǒng)一的 CSS 樣式。
類選擇器
如果想要差異化選擇不同的標(biāo)簽，單獨(dú)選一個(gè)或者某幾個(gè)標(biāo)簽，可以使用類選擇器.
語法：
.類名 {
屬性1: 屬性值1;
...
}
結(jié)構(gòu)需要用class屬性來調(diào)用 class 類的意思
<div class="類名"> 紅色 </div>
1.如果想要差異化選擇不同的標(biāo)簽，單獨(dú)選一個(gè)或者某幾個(gè)標(biāo)簽，可以使用類選擇器。
2.類選擇器在 HTML 中以 class 屬性表示，在 CSS 中，類選擇器以一個(gè)點(diǎn)“.”號顯示。
3.類選擇器使用“.”（英文點(diǎn)號）進(jìn)行標(biāo)識，后面緊跟類名（自定義，我們自己命名的）。
4.可以理解為給這個(gè)標(biāo)簽起了一個(gè)名字，來表示。
5.長名稱或詞組可以使用中橫線來為選擇器命名。
6.不要使用純數(shù)字、中文等命名，盡量使用英文字母來表示。
7.命名要有意義，盡量使別人一眼就知道這個(gè)類名的目的。
多類名選擇器
我們可以給一個(gè)標(biāo)簽指定多個(gè)類名，從而達(dá)到更多的選擇目的。 這些類名都可以選出這個(gè)標(biāo)簽.
簡單理解就是一個(gè)標(biāo)簽有多個(gè)名字.
多類名的具體使用：
1. <div class="red font20">亞瑟</div>
注意：
1.在標(biāo)簽class 屬性中寫 多個(gè)類名
2.多個(gè)類名中間必須用空格分開
3.這個(gè)標(biāo)簽就可以分別具有這些類名的樣式
id選擇器：
id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。
HTML 元素以 id 屬性來設(shè)置 id 選擇器，CSS 中 id 選擇器以“#" 來定義。
語法：
#id名 {
屬性1: 屬性值1;
...
}
注意：id 屬性只能在每個(gè) HTML 文檔中出現(xiàn)一次
id選擇器和類選擇器的區(qū)別：
1.類選擇器（class）好比人的名字，一個(gè)人可以有多個(gè)名字，同時(shí)一個(gè)名字也可以被多個(gè)人使用。
2.id 選擇器好比人的身份證號碼，全中國是唯一的，不得重復(fù)。
3.id 選擇器和類選擇器最大的不同在于使用次數(shù)上。
4.類選擇器在修改樣式中用的最多，id 選擇器一般用于頁面唯一性的元素上，經(jīng)常和 JavaScript 搭配使用。
通配符選擇器：
語法：
* {
屬性1: 屬性值1;
...
}
通配符選擇器不需要調(diào)用， 自動(dòng)就給所有的元素使用樣式
* {
margin: 0;
padding: 0;
}
文本對齊：
text-align 屬性用于設(shè)置元素內(nèi)文本內(nèi)容的水平對齊方式。
語法：
div {
text-align: center;
}
文本縮進(jìn)
語法：
div {
text-indent：20px；
}
div {
text-indent：2em；
}
em 是一個(gè)相對單位，就是當(dāng)前元素（font-size) 1 個(gè)文字的大小, 如果當(dāng)前元素沒有設(shè)置大小，則會按照父元素的 1 個(gè)文字大小。
行間距：
line-height 屬性用于設(shè)置行間的距離（行高）?？梢钥刂莆淖中信c行之間的距離
語法：
p {
line-height: 26px;
}
行高的文本分為 上間距 文本高度 下間距 = 行間距
css樣式表：
按照 CSS 樣式書寫的位置（或者引入的方式），CSS 樣式表可以分為三大類：
行內(nèi)樣式表（行內(nèi)式）
行內(nèi)樣式表（內(nèi)聯(lián)樣式表）是在元素標(biāo)簽內(nèi)部的 style 屬性中設(shè)定 CSS 樣式。適合于修改簡單樣式.
語法：
<div style="color: red; font-size: 12px;">青春不常在，抓緊談戀愛</div>
1.style 其實(shí)就是標(biāo)簽的屬性
在雙引號中間，寫法要符合 CSS 規(guī)范
2.可以控制當(dāng)前的標(biāo)簽設(shè)置樣式
3.由于書寫繁瑣，并且沒有體現(xiàn)出結(jié)構(gòu)與樣式相分離的思想，所以不推薦大量使用，只有對當(dāng)前元素添加簡單樣式的時(shí)候，可以考慮使用
4.使用行內(nèi)樣式表設(shè)定 CSS，通常也被稱為行內(nèi)式引入
內(nèi)部樣式表（嵌入式）
內(nèi)部樣式表（內(nèi)嵌樣式表）是寫到html頁面內(nèi)部. 是將所有的 CSS 代碼抽取出來，單獨(dú)放到一個(gè) <style> 標(biāo)簽中
語法：
<style>
div {
color: red;
font-size: 12px;
}
</style>
1.<style> 標(biāo)簽理論上可以放在 HTML 文檔的任何地方，但一般會放在文檔的<head>標(biāo)簽中
2.通過此種方式，可以方便控制當(dāng)前整個(gè)頁面中的元素樣式設(shè)置
3.代碼結(jié)構(gòu)清晰，但是并沒有實(shí)現(xiàn)結(jié)構(gòu)與樣式完全分離
4.使用內(nèi)部樣式表設(shè)定 CSS，通常也被稱為嵌入式引入，這種方式是我們練習(xí)時(shí)常用的方式
外部樣式表（鏈接式）
實(shí)際開發(fā)都是外部樣式表. 適合于樣式比較多的情況. 核心是:樣式單獨(dú)寫到CSS 文件中，之后把CSS文件引入到 HTML 頁面中使用.
引入外部樣式表分為兩步：
1. 新建一個(gè)后綴名為 .css 的樣式文件，把所有 CSS 代碼都放入此文件中。
2. 在 HTML 頁面中，使用<link> 標(biāo)簽引入這個(gè)文件。
語法：
<link rel="stylesheet" href="css文件路徑">
Chrome調(diào)試工具：
1.Ctrl+滾輪 可以放大開發(fā)者工具代碼大小。
2.左邊是 HTML 元素結(jié)構(gòu)，右邊是 CSS 樣式。
3.右邊 CSS 樣式可以改動(dòng)數(shù)值（左右箭頭或者直接輸入）和查看顏色。
4.Ctrl + 0 復(fù)原瀏覽器大小。
5.如果點(diǎn)擊元素，發(fā)現(xiàn)右側(cè)沒有樣式引入，極有可能是類名或者樣式引入錯(cuò)誤。
6.如果有樣式，但是樣式前面有黃色嘆號提示，則是樣式屬性書寫錯(cuò)誤。
