css簡(jiǎn)介

CSS 是層疊樣式表 ( Cascading Style Sheets ) 的簡(jiǎn)稱(chēng).
有時(shí)我們也會(huì)稱(chēng)之為 CSS 樣式表或級(jí)聯(lián)樣式表录肯。
CSS 是一種標(biāo)記語(yǔ)言
CSS 主要用于設(shè)置 HTML 頁(yè)面中的文本內(nèi)容（字體、大小老客、對(duì)齊方式等）、圖片的外形（寬高炊豪、邊框樣式在跳、邊距等）以及版面的布局和外觀顯示樣式。
CSS 讓我們的網(wǎng)頁(yè)更加豐富多彩伶选，布局更加靈活自如史飞。簡(jiǎn)單理解：CSS 可以美化 HTML , 讓 HTML 更漂亮， 讓頁(yè)面布局更簡(jiǎn)單仰税。
CSS 最大價(jià)值: 由 HTML 專(zhuān)注去做結(jié)構(gòu)呈現(xiàn)构资，樣式交給 CSS，即 結(jié)構(gòu) ( HTML ) 與樣式( CSS ) 相分離

css語(yǔ)法規(guī)范

1.使用 HTML 時(shí)陨簇，需要遵從一定的規(guī)范吐绵，CSS 也是如此。要想熟練地使用 CSS 對(duì)網(wǎng)頁(yè)進(jìn)行修飾河绽，首先需要了解CSS 樣式規(guī)則己单。
2.CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器以及一條或多條聲明。

1.選擇器是用于指定 CSS 樣式的 HTML 標(biāo)簽葵姥，花括號(hào)內(nèi)是對(duì)該對(duì)象設(shè)置的具體樣式
2.屬性和屬性值以“鍵值對(duì)”的形式出現(xiàn)
3.屬性是對(duì)指定的對(duì)象設(shè)置的樣式屬性荷鼠，例如字體大小、文本顏色等
4.屬性和屬性值之間用英文“:”分開(kāi)
5.多個(gè)“鍵值對(duì)”之間用英文“;”進(jìn)行區(qū)分

css選擇器的作用

選擇器(選擇符)就是根據(jù)不同需求把不同的標(biāo)簽選出來(lái)這就是選擇器的作用榔幸。  簡(jiǎn)單來(lái)說(shuō)允乐，就是選擇標(biāo)簽用的矮嫉。

找到所有的 h1 標(biāo)簽。  選擇器（選對(duì)人）
設(shè)置這些標(biāo)簽的樣式牍疏，比如顏色為紅色（做對(duì)事）蠢笋。

css基礎(chǔ)選擇器

基礎(chǔ)選擇器又包括：標(biāo)簽選擇器、類(lèi)選擇器鳞陨、id 選擇器和通配符選擇器

標(biāo)簽選擇器：

標(biāo)簽選擇器（元素選擇器）是指用 HTML 標(biāo)簽名稱(chēng)作為選擇器昨寞，按標(biāo)簽名稱(chēng)分類(lèi)，為頁(yè)面中某一類(lèi)標(biāo)簽指定統(tǒng)一的 CSS 樣式厦滤。

語(yǔ)法：
標(biāo)簽選擇器{
屬性：屬性值
...
}
作用：
標(biāo)簽選擇器（元素選擇器）是指用 HTML 標(biāo)簽名稱(chēng)作為選擇器援岩，按標(biāo)簽名稱(chēng)分類(lèi)，為頁(yè)面中某一類(lèi)標(biāo)簽指定統(tǒng)一的 CSS 樣式掏导。

類(lèi)選擇器

如果想要差異化選擇不同的標(biāo)簽享怀，單獨(dú)選一個(gè)或者某幾個(gè)標(biāo)簽，可以使用類(lèi)選擇器.

語(yǔ)法：
.類(lèi)名 {
屬性1: 屬性值1;
...
}
結(jié)構(gòu)需要用class屬性來(lái)調(diào)用 class 類(lèi)的意思
<div class="類(lèi)名"> 紅色 </div>
1.如果想要差異化選擇不同的標(biāo)簽趟咆，單獨(dú)選一個(gè)或者某幾個(gè)標(biāo)簽添瓷，可以使用類(lèi)選擇器。
2.類(lèi)選擇器在 HTML 中以 class 屬性表示值纱，在 CSS 中鳞贷，類(lèi)選擇器以一個(gè)點(diǎn)“.”號(hào)顯示。
3.類(lèi)選擇器使用“.”（英文點(diǎn)號(hào)）進(jìn)行標(biāo)識(shí)虐唠，后面緊跟類(lèi)名（自定義搀愧，我們自己命名的）。
4.可以理解為給這個(gè)標(biāo)簽起了一個(gè)名字疆偿，來(lái)表示妈橄。
5.長(zhǎng)名稱(chēng)或詞組可以使用中橫線來(lái)為選擇器命名。
6.不要使用純數(shù)字翁脆、中文等命名眷蚓，盡量使用英文字母來(lái)表示。
7.命名要有意義反番，盡量使別人一眼就知道這個(gè)類(lèi)名的目的沙热。

多類(lèi)名選擇器

我們可以給一個(gè)標(biāo)簽指定多個(gè)類(lèi)名，從而達(dá)到更多的選擇目的罢缸。 這些類(lèi)名都可以選出這個(gè)標(biāo)簽.
簡(jiǎn)單理解就是一個(gè)標(biāo)簽有多個(gè)名字. 
多類(lèi)名的具體使用：
    1. <div class="red font20">亞瑟</div>
注意：
    1.在標(biāo)簽class 屬性中寫(xiě) 多個(gè)類(lèi)名
    2.多個(gè)類(lèi)名中間必須用空格分開(kāi)
    3.這個(gè)標(biāo)簽就可以分別具有這些類(lèi)名的樣式

id選擇器：

id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式篙贸。
HTML 元素以 id 屬性來(lái)設(shè)置 id 選擇器，CSS 中 id 選擇器以“#" 來(lái)定義枫疆。
語(yǔ)法：
     #id名 {
        屬性1: 屬性值1;  
        ...
    } 
    注意：id 屬性只能在每個(gè) HTML 文檔中出現(xiàn)一次

id選擇器和類(lèi)選擇器的區(qū)別：

1.類(lèi)選擇器（class）好比人的名字爵川，一個(gè)人可以有多個(gè)名字，同時(shí)一個(gè)名字也可以被多個(gè)人使用息楔。
2.id 選擇器好比人的身份證號(hào)碼寝贡，全中國(guó)是唯一的扒披，不得重復(fù)。
3.id 選擇器和類(lèi)選擇器最大的不同在于使用次數(shù)上圃泡。
4.類(lèi)選擇器在修改樣式中用的最多碟案，id 選擇器一般用于頁(yè)面唯一性的元素上，經(jīng)常和 JavaScript 搭配使用颇蜡。

通配符選擇器：

語(yǔ)法：
    * {
        屬性1: 屬性值1;  
        ...
    }
通配符選擇器不需要調(diào)用价说， 自動(dòng)就給所有的元素使用樣式
 * {
        margin: 0;
        padding: 0;
    } 

文本對(duì)齊：

text-align 屬性用于設(shè)置元素內(nèi)文本內(nèi)容的水平對(duì)齊方式。
語(yǔ)法：
div {
text-align: center;
}

文本縮進(jìn)

語(yǔ)法：
div {
text-indent：20px风秤；
}
div {
text-indent：2em鳖目；
}

em 是一個(gè)相對(duì)單位，就是當(dāng)前元素（font-size) 1 個(gè)文字的大小, 如果當(dāng)前元素沒(méi)有設(shè)置大小缤弦，則會(huì)按照父元素的 1 個(gè)文字大小疑苔。

行間距：

line-height 屬性用于設(shè)置行間的距離（行高）〉槟瘢可以控制文字行與行之間的距離

語(yǔ)法：
p {
line-height: 26px;
}
行高的文本分為 上間距 文本高度 下間距 = 行間距

css樣式表：

按照 CSS 樣式書(shū)寫(xiě)的位置（或者引入的方式），CSS 樣式表可以分為三大類(lèi)： 

行內(nèi)樣式表（行內(nèi)式）

    行內(nèi)樣式表（內(nèi)聯(lián)樣式表）是在元素標(biāo)簽內(nèi)部的 style 屬性中設(shè)定 CSS 樣式兵迅。適合于修改簡(jiǎn)單樣式.
    語(yǔ)法：
        <div style="color: red; font-size: 12px;">青春不常在抢韭，抓緊談戀愛(ài)</div>
    1.style 其實(shí)就是標(biāo)簽的屬性
    在雙引號(hào)中間，寫(xiě)法要符合 CSS 規(guī)范
    2.可以控制當(dāng)前的標(biāo)簽設(shè)置樣式
    3.由于書(shū)寫(xiě)繁瑣恍箭，并且沒(méi)有體現(xiàn)出結(jié)構(gòu)與樣式相分離的思想刻恭，所以不推薦大量使用，只有對(duì)當(dāng)前元素添加簡(jiǎn)單樣式的時(shí)候扯夭，可以考慮使用
    4.使用行內(nèi)樣式表設(shè)定 CSS鳍贾，通常也被稱(chēng)為行內(nèi)式引入

內(nèi)部樣式表（嵌入式）

    內(nèi)部樣式表（內(nèi)嵌樣式表）是寫(xiě)到html頁(yè)面內(nèi)部. 是將所有的 CSS 代碼抽取出來(lái)，單獨(dú)放到一個(gè) <style> 標(biāo)簽中
    語(yǔ)法：
        <style>
            div {
            color: red;
            font-size: 12px;
            }
        </style>
    1.<style> 標(biāo)簽理論上可以放在 HTML 文檔的任何地方交洗，但一般會(huì)放在文檔的<head>標(biāo)簽中
    2.通過(guò)此種方式骑科，可以方便控制當(dāng)前整個(gè)頁(yè)面中的元素樣式設(shè)置
    3.代碼結(jié)構(gòu)清晰，但是并沒(méi)有實(shí)現(xiàn)結(jié)構(gòu)與樣式完全分離
    4.使用內(nèi)部樣式表設(shè)定 CSS构拳，通常也被稱(chēng)為嵌入式引入咆爽，這種方式是我們練習(xí)時(shí)常用的方式

外部樣式表（鏈接式）

實(shí)際開(kāi)發(fā)都是外部樣式表. 適合于樣式比較多的情況. 核心是:樣式單獨(dú)寫(xiě)到CSS 文件中，之后把CSS文件引入到 HTML 頁(yè)面中使用.
引入外部樣式表分為兩步：
1. 新建一個(gè)后綴名為 .css 的樣式文件置森，把所有 CSS 代碼都放入此文件中斗埂。
2. 在 HTML 頁(yè)面中，使用<link> 標(biāo)簽引入這個(gè)文件凫海。
語(yǔ)法：
    <link rel="stylesheet"  href="css文件路徑">

Chrome調(diào)試工具：

1.Ctrl+滾輪 可以放大開(kāi)發(fā)者工具代碼大小呛凶。
2.左邊是 HTML 元素結(jié)構(gòu)，右邊是 CSS 樣式行贪。
3.右邊 CSS 樣式可以改動(dòng)數(shù)值（左右箭頭或者直接輸入）和查看顏色漾稀。
4.Ctrl + 0 復(fù)原瀏覽器大小模闲。
5.如果點(diǎn)擊元素，發(fā)現(xiàn)右側(cè)沒(méi)有樣式引入县好，極有可能是類(lèi)名或者樣式引入錯(cuò)誤围橡。
6.如果有樣式，但是樣式前面有黃色嘆號(hào)提示缕贡，則是樣式屬性書(shū)寫(xiě)錯(cuò)誤翁授。