CSS簡(jiǎn)介及CSS 選擇器 1.CSS 簡(jiǎn)介
CSS也是一種標(biāo)記語(yǔ)言，它主要用于設(shè)置HTML頁(yè)面中的文本內(nèi)容（字體、大小、對(duì)齊方式等）、圖片的外形（寬高、邊框樣式、邊框等）以及版面的布局和外觀顯示樣式等。CSS的最大價(jià)值便是使結(jié)構(gòu)（HTML）與樣式（CSS）相分離
1.1 CSS語(yǔ)法規(guī)范
CSS規(guī)則由兩個(gè)主要的部分構(gòu)成，選擇器以及一條或多條聲明
（1）選擇器是用于指定CSS樣式的HTML標(biāo)簽網(wǎng)頁(yè)添加css樣式表的方式，花括號(hào)內(nèi)是對(duì)該對(duì)象設(shè)置的具體樣式
（2）屬性和屬性值以”鍵值對(duì)“的形式出現(xiàn)
（3）屬性是對(duì)指定的對(duì)象設(shè)置的樣式屬性，例如字體大小、文本顏色等
（4）屬性和屬性值之間由半角字符” : "分開(kāi)
（5）每一組鍵值對(duì)之間用半角符號(hào)” ；“結(jié)尾
1.2 CSS代碼風(fēng)格
1.2.1 樣式格式書(shū)寫(xiě)
（1）緊湊格式
<style>
h3 {color: deeppink;font-size: 20px}
style>
（2）展開(kāi)格式
<style>
h3 {
color: deeppink;
font-size: 20px;
}
style>
//一般使用第二種（展開(kāi)格式），更加直觀，清晰
1.2.2 樣式大小寫(xiě)
(1)小寫(xiě)
<style>
h3 {
color:pink;
}
style>
（2）大寫(xiě)
<style>
H3 {
color:pink;
}
style>
//推薦樣式選擇器、屬性名、屬性值、關(guān)鍵字全部使用小寫(xiě)，特殊情況除外
1.2.3 空格規(guī)范
<style>
h3 {
color: deeppink;
}
style>
//在屬性值前面，冒號(hào)后面，應(yīng)保留一個(gè)空格
//選擇器（標(biāo)簽）和大括號(hào)中間保留空格
2.CSS選擇器
要使用CSS對(duì)HTML頁(yè)面中的元素實(shí)現(xiàn)一對(duì)一，一對(duì)多或者多對(duì)一的控制，這就需要用到CSS選擇器。
選擇器就是選擇標(biāo)簽用的。
選擇器分為基礎(chǔ)選擇器和復(fù)合選擇器兩個(gè)大類(lèi)，我們這里先講解一下基礎(chǔ)選擇器。
2.1 標(biāo)簽選擇器
標(biāo)簽選擇器（元素選擇器）是指用HTML標(biāo)簽名稱(chēng)作為選擇器，按標(biāo)簽名稱(chēng)分類(lèi)，為頁(yè)面中某一類(lèi)標(biāo)簽指定統(tǒng)一的CSS樣式
<style>
標(biāo)簽名 {
屬性1: 屬性值1;
屬性2: 屬性值2;
}
style>
作用： 標(biāo)簽選擇器可以把某一類(lèi)標(biāo)簽全部選擇出來(lái)，比如所有的< div>標(biāo)簽和所有的< span>標(biāo)簽
優(yōu)點(diǎn)： 能快速為頁(yè)面中同類(lèi)型的標(biāo)簽統(tǒng)一樣式
缺點(diǎn)： 不能設(shè)計(jì)差異化樣式，只能選擇全部的當(dāng)前標(biāo)簽
2.2 類(lèi)選擇器
如果想要差異化選擇不同的標(biāo)簽，單獨(dú)選一個(gè)或者某幾個(gè)標(biāo)簽，可以使用類(lèi)選擇器
<style>
.類(lèi)名 {
屬性1: 屬性值1;
}
style>
……
<body>
<div class="類(lèi)名">內(nèi)容div> //結(jié)構(gòu)需要用class屬性來(lái)調(diào)用class類(lèi)的意思
body>
注意：
類(lèi)選擇器使用 . (英文點(diǎn)號(hào)) 進(jìn)行標(biāo)識(shí)，后面緊跟類(lèi)名（自定義的名字）
不要使用純數(shù)字、中文等來(lái)給類(lèi)命名，盡量使用英文字母來(lái)表示，較長(zhǎng)的名字可以用中橫線來(lái)命名。例如：star-sing
web前端開(kāi)發(fā)有命名規(guī)范，可參考，不強(qiáng)制
2.3 類(lèi)選擇器
可以給一個(gè)標(biāo)簽指定多個(gè)類(lèi)名，從而達(dá)到更多的選擇的目的
<body>
<div class="類(lèi)名1 類(lèi)名2">內(nèi)容div>
body>
注意：
多個(gè)類(lèi)名中間必須用空格分開(kāi)
這個(gè)標(biāo)簽可以分別具有這些類(lèi)名的樣式
可以把一些標(biāo)簽相同的樣式 （共同的部分） 放到一個(gè)類(lèi)里面
這些標(biāo)簽都可以調(diào)用這個(gè)公共的類(lèi)，然后再調(diào)用自己獨(dú)有的類(lèi)，節(jié)省CSS代碼，統(tǒng)一修改也非常方便
2.4 id選擇器
id 選擇器可以給標(biāo)有特定 id 的 HTML 元素指定特定的樣式
HTML 元素以 id屬性 來(lái)設(shè)置id 選擇器，CSS中 id 選擇器 以# 來(lái)定義
<style>
#id名 {
屬性1: 屬性值1;
}
style>
……
<body>
<div id="id名">內(nèi)容div>
body>
注意：
id 屬性只能在每個(gè) HTML 文檔中出現(xiàn)一次
口訣：樣式#定義，結(jié)構(gòu)id調(diào)用，只能調(diào)用一次，別人切勿使用
id選擇器和類(lèi)選擇器的區(qū)別
2.5 通配符選擇器
通配符使用*定義，它表示選取頁(yè)面中所有元素 (標(biāo)簽)
<style>
* {
屬性1:屬性值1;
}
style>
注意：
通配符選擇器不需要調(diào)用，自動(dòng)就給所有的元素使用樣式
經(jīng)常用于清除元素標(biāo)簽的內(nèi)外邊距
<style>
* {
margin: 0;
padding: 0;
}
style>
總結(jié)
3.字體屬性
用于定義字體系列、大小、粗細(xì)和文字樣式(如斜體)
3.1 font-
設(shè)置文本的字體
<style>
p {
font-family: "微軟雅黑";
}
div {
font-family: Arial, "Microsoft Yahe", "微軟雅黑";
}
style>
注意：
各種字體之間必須使用英文狀態(tài)下的逗號(hào)隔開(kāi)
一般情況下，如果有空格隔開(kāi)的多個(gè)單詞組成的字體，加引號(hào)
最常見(jiàn)的幾個(gè)字體：
body {font-family: "Microsoft Yahe", tahoma, arial, "Hiragino Sans GB";}
3.2 font-size
設(shè)置字體大小
<style>
div {
font-size: 20px;
}
style>
注意：
px (像素)大小是我們網(wǎng)頁(yè)的最常用的單位
谷歌瀏覽器默認(rèn)的文字大小為 16px
可以給body指定整個(gè)頁(yè)面文字的大小，但注意標(biāo)題標(biāo)簽比較特殊，需要單獨(dú)指定大小
3.3 font-
設(shè)置字體的粗細(xì)
font-weight: normal | bold | bolder | lighter |number
<style>
h2 {
font-weight: 400;
/*等同于 font-weight: normal;*/
}
style>
3.4 font-style
設(shè)置文字樣式（文本風(fēng)格）
<style>
em { //em本身就是傾斜效果
font-style: normal; //讓傾斜的變得不傾斜
}
style>
3.5 字體屬性復(fù)合寫(xiě)法
<style>
div {
font-style: normal;
font-weight: 800;
font-size: 18px;
font-family: 'Microsoft yahe';
}
style>
//字體復(fù)合屬性可以把以上文字樣式綜合來(lái)寫(xiě)，這樣寫(xiě)更節(jié)約代碼
<style>
div {
font: italic 700 16px 'Microsoft yahe';
}
style>
注意：
順序：文字樣式 文字粗細(xì) 文字大小 文字字體
使用font屬性時(shí)，必須按照上面語(yǔ)法格式中的順序書(shū)寫(xiě)，不能更換順序，并且各個(gè)屬性間以空格隔開(kāi)
不需要設(shè)置的屬性可以省略(取默認(rèn)值)，但必須保留font-size 和font-family屬性，否則 font 屬性將不起作用
總結(jié)
4.文本屬性
CSS 文本屬性可以設(shè)置文本的外觀，比如文本顏色、對(duì)齊文本、裝飾文本、文本縮進(jìn)、行間距的等
4.1 color
設(shè)置文本的顏色
<style>
div {
color: blue;
}
style>
//開(kāi)發(fā)中用的最多的是十六進(jìn)制的
4.2 text-align
設(shè)置文本內(nèi)容的水平對(duì)齊方式
<style>
div {
text-align: center;
}
style>
4.3 text-
用于裝飾文本，可以給文本添加下劃線，刪除線網(wǎng)頁(yè)添加css樣式表的方式，上劃線等
<style>
div {
text-decoration: none; //例如取消超鏈接的下劃線
}
style>
4.4 text-
用于指定文本的第一行縮進(jìn)，通常是將段落的首行縮進(jìn)
<style>
div {
text-indent: 18px;
}
span {
text-indent: 2em;
}
style>
注意：
通過(guò)設(shè)置該水屬性，所有元素的第一行都可以縮進(jìn)一個(gè)給定的長(zhǎng)度，甚至該長(zhǎng)度可以是負(fù)值
em是一個(gè)相對(duì)單位，就是當(dāng)前元素(font-size)1個(gè)文字的大小；如果當(dāng)前元素沒(méi)有設(shè)置大小，則會(huì)按照父元素的一個(gè)文字大小
4.5 line-
用于設(shè)置行間的距離(行高)，可以控制文字行與行之間的距離，包括上間距、文本高度、下間距
<style>
div {
line-height: 20px;
}
style>
總結(jié)
5.CSS的引入方式
按照CSS樣式書(shū)寫(xiě)的位置（或者引入的方式），CSS樣式表可以分為以下三大類(lèi)：
行內(nèi)樣式表（行內(nèi)式）
內(nèi)部樣式表（嵌入式）
外部樣式表（鏈接式）
5.1 行內(nèi)樣式表
行內(nèi)樣式表，也稱(chēng)為行內(nèi)式引入，它是在元素標(biāo)簽內(nèi)部的style屬性中設(shè)定CSS樣式，只適用于修改簡(jiǎn)單的樣式
<div style="color: blue; font-size: 16px;">測(cè)試div>
注意：
1.style是標(biāo)簽的屬性
2.它可以控制當(dāng)前的標(biāo)簽設(shè)置樣式
5.2 內(nèi)部樣式表
內(nèi)部樣式表，通常也稱(chēng)嵌入式引入，它是把所有的CSS代碼抽取出來(lái)，單獨(dú)放在一個(gè)< style >標(biāo)簽中
<style>
div {
color: blue;
font-size: 16px;
}
style>
注意：
1.<style>標(biāo)簽理論上可以放在HTML文檔的任何地方，但一般都會(huì)放在文檔的<head>標(biāo)簽中
2.通過(guò)這種方式，可以控制當(dāng)前整個(gè)頁(yè)面中的元素樣式設(shè)置
5.3 外部樣式表
實(shí)際開(kāi)發(fā)都是外部樣式表，適合于樣式比較多的情況。核心是:樣式單獨(dú)寫(xiě)到CSS文件中，之后把CSS文件引入到HTML頁(yè)面中使用。
引入外部樣式表的步驟：
（1）新建一個(gè)后綴名為.css的樣式文件，把所有CSS代碼都放入此文件中
（2）在HTML頁(yè)面中，使用< link >標(biāo)簽引入文件，具體引入代碼如下所示：
<link rel="styleheet" href="css文件路徑">
總結(jié)