文章目錄
目標(biāo)：
能夠說(shuō)出什么是css
能夠使用css基礎(chǔ)選擇器
能夠設(shè)置字體樣式
能夠設(shè)置文本樣式
能夠說(shuō)出css三種引入方式
能夠使用調(diào)試工具調(diào)試樣式 1. css簡(jiǎn)介
css的主要使用場(chǎng)景就是美化網(wǎng)頁(yè)，布局頁(yè)面的。
1.1 HTML的局限性
html是個(gè)很單純的家伙，它只關(guān)注內(nèi)容的語(yǔ)義。
1.2 css-網(wǎng)頁(yè)的美容師
css是層疊樣式表（ style ）的簡(jiǎn)稱。
有時(shí)我們也會(huì)稱之為css樣式表或級(jí)聯(lián)樣式表。
css也是一種標(biāo)記語(yǔ)言。
css主要用于設(shè)置html頁(yè)面中的文本內(nèi)容（字體、大小、對(duì)齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局和外觀顯示樣式。
總結(jié)：
HTML主要做結(jié)構(gòu)，顯示元素內(nèi)容。css美化html，布局網(wǎng)頁(yè)。css最大的價(jià)值：由html專注去做結(jié)構(gòu)呈現(xiàn)，樣式交給css，即結(jié)構(gòu)（html）和樣式（css）相分離。 1.3 css語(yǔ)法規(guī)范
css規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器以及一條或多條聲明。
h1(選擇器) {
color（屬性）: red（值）;（聲明）
font-size（屬性）: 25px（值）;（聲明）
}
1.4 css代碼風(fēng)格
以下代碼書寫風(fēng)格不是強(qiáng)制規(guī)范，而是符合實(shí)際開(kāi)發(fā)書寫方式。
1.4.1 樣式格式書寫
h3 {
color: pink;
font-size: 20px;
}
1.4.2 樣式大小寫
選擇器，屬性名，屬性值和關(guān)鍵字全部使用小寫字母，特殊情況除外。
1.4.3 空格規(guī)范 在屬性值前面，冒號(hào)后面，保留一個(gè)空格。選擇器（標(biāo)簽）和大括號(hào)中間保留空格。 2. css基礎(chǔ)選擇器 2.1 css選擇器的作用
選擇器（選擇符）就是根據(jù)不同需求吧不同的標(biāo)簽選出來(lái)這就是選擇器的作用。
2.2 選擇器分類
選擇器分為基礎(chǔ)選擇器和復(fù)合選擇器兩大類
2.3 標(biāo)簽選擇器
標(biāo)簽選擇器（元素選擇器）是指用HTML標(biāo)簽名稱作為選擇器，按標(biāo)簽名稱分類，為頁(yè)面中某一類標(biāo)簽指定統(tǒng)一的css樣式。
**作用：**標(biāo)簽選擇器可以把某一類標(biāo)簽全部選擇出來(lái)。
**優(yōu)點(diǎn)：**能快速為頁(yè)面中同類型的標(biāo)簽統(tǒng)一設(shè)置樣式。
**缺點(diǎn)：**不能設(shè)置差異化樣式，只能選擇全部的當(dāng)前標(biāo)簽。
2.4 類選擇器（開(kāi)發(fā)最常用）
如果想要差異化選擇不同的標(biāo)簽，單獨(dú)選一個(gè)或者某幾個(gè)標(biāo)簽，可以使用類選擇器。
類選擇器在HTML中以class屬性表示，在css中，類選擇器以一個(gè)點(diǎn) . 號(hào) 顯示。
注意：
類選擇器用英文點(diǎn)號(hào)進(jìn)行標(biāo)識(shí)，后面緊跟類名（自定義）。可以理解為給這個(gè)標(biāo)簽起了一個(gè)名字，來(lái)表示。長(zhǎng)名稱或詞組可以使用中橫線來(lái)為選擇器命名。不要是用純數(shù)字、中文等命名，盡量使用英文字母來(lái)表示。命名要有意義，見(jiàn)名知意。命名規(guī)范（web前端開(kāi)發(fā)規(guī)范手冊(cè)）。
語(yǔ)法：
.類名{
屬性1：屬性值1；
}
/*將所有擁有red類的HTML元素均為紅色*/
.red{
color：red；
}
結(jié)構(gòu)需要用class屬性來(lái)調(diào)用class類的意思。
"red"> 變紅色
多類名
我們可以給一個(gè)標(biāo)簽指定多個(gè)類名，從而達(dá)到更多的選擇目的。這些類名都可以選出這個(gè)標(biāo)簽。
簡(jiǎn)單理解就是一個(gè)標(biāo)簽有多個(gè)名字。
多類名使用方式
①在標(biāo)簽class屬性中寫多個(gè)類名。
②多個(gè)類名中間必須用空格分開(kāi)。
③這個(gè)標(biāo)簽就可以分別具有這些類名的樣式。
多類名在開(kāi)發(fā)中使用的場(chǎng)景
①可以把一些標(biāo)簽元素相同的樣式（共同的部分）放到一個(gè)類里面。
②這些標(biāo)簽都可以調(diào)用這個(gè)公共的類，然后再調(diào)用自己獨(dú)有的類。
③從而節(jié)省css代碼，統(tǒng)一修改也非常方便。
2.5 id 選擇器
id 選擇器可以為標(biāo)有特定id 的HTML元素指定特定的樣式。
html元素以id屬性來(lái)設(shè)置id選擇器，css中id選擇器以”#“來(lái)定義。
/*id只能調(diào)用一次。*/
#id名 {
屬性1：屬性值1；
}
#nav {
color：red；
}
id選擇器和類選擇器的區(qū)別：
①class（類選擇器）比作人的名字，一個(gè)人可以有多個(gè)名字，同時(shí)一個(gè)名字也可以被多個(gè)人使用。
②id選擇器好比人的身份證號(hào)碼，全中國(guó)是唯一的，不得重復(fù)。
③類選擇器在修改樣式中用的最多，id選擇器一般用于頁(yè)面唯一性的元素上，經(jīng)常和搭配使用。
2.6 通配符選擇器
在css中，通配符選擇器使用 * 定義，它表示選取頁(yè)面中所有的元素（標(biāo)簽）。
語(yǔ)法：
* {
屬性1：屬性值1：
}
* {
margin： 0;
padding： 0;
}
2.7 基礎(chǔ)選擇器總結(jié) 基礎(chǔ)選擇器作用特點(diǎn)使用情況
標(biāo)簽選擇器
可以選擇所有相同的標(biāo)簽，比如p
不能差異化選擇
較多
類選擇器
可以選出1個(gè)或者多個(gè)標(biāo)簽
可以根據(jù)需求選擇
非常多
id選擇器
一次只能選擇一個(gè)標(biāo)簽
id屬性只能在每個(gè)html文檔中出現(xiàn)出現(xiàn)一次
一般和js搭配
通配符選擇器
選擇所有的標(biāo)簽
選擇的太多
特殊情況使用
3. css字體屬性
css fonts （字體）屬性用于定義字體系列、大小、粗細(xì)和文字樣式（如斜體）。
3.1 字體系列
css使用font-屬性定義文本的字體系列。
p{
font-family:"微軟雅黑"；
}
div{
font-family：Arial,"Microsoft Yehei","微軟雅黑";
/*可以寫上多個(gè)字體，如果用戶電腦未安裝第一種字體，就執(zhí)行第二個(gè)字體，以此類推。*/
}
3.2 字體大小
css使用font-size屬性定義字體大小。
p {
font-size：20px；
}
3.3 字體粗細(xì)
css使用font-屬性設(shè)置字體粗細(xì)。
屬性值描述
默認(rèn)（不加粗的）數(shù)字等于400 注意數(shù)字后面不跟單位
bold
加粗 700
更粗
3.4 文本樣式
css使用font-style屬性設(shè)置文本的風(fēng)格。
屬性值作用
默認(rèn)值，瀏覽器會(huì)顯示標(biāo)準(zhǔn)的字體樣式：font-style:；
斜體
注意：平時(shí)我們很少給文字加斜體，反而要給斜體標(biāo)簽（em，i）改為不傾斜字體。
3.5 font 復(fù)合屬性寫法
div {
font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: 'Microsoft yahei';
}
字體屬性可以把以上文字樣式綜合來(lái)寫，這樣可以更節(jié)約代碼。
div {
font: font-style font-weight font-size font-family;
/*比如：italic 700 16px 'Microsoft yahei';*/
}
3.6 總結(jié) 屬性表示
font-size
字號(hào)
font-
字體
font-
字體粗細(xì)
font-style
字體樣式
font
字體連寫
4. css文本屬性
css text（文本）屬性可定義文本的外觀，比如文本的顏色、對(duì)齊文本、裝飾文本、文本縮進(jìn)、行間距等。
4.1 文本顏色
color 屬性用于定義文本的顏色。
顏色表示屬性值
預(yù)定義的顏色值
red、green、blue、pink
十六進(jìn)制
#，#，#
RGB代碼
rgb(255,0,0)或rgb（100%，0%，0%）
4.2 對(duì)齊文本
test-align 屬性用于設(shè)置元素內(nèi)文本內(nèi)容的水平對(duì)齊方式。
div {
text-align：；
/屬性值：left（默認(rèn)）、right、/
}
4.3 裝飾文本
text-屬性規(guī)定添加到文本的修飾。可以給文本添加下劃線、刪除線、上劃線。
屬性值描述
none
默認(rèn)。沒(méi)有裝飾線
下劃線。鏈接a自帶下劃線。（常用）
上劃線
line-
刪除線
4.4 文本縮進(jìn)
text-屬性用來(lái)指定文本的第一行的縮進(jìn)，通常是將段落的首行縮進(jìn)。
通過(guò)設(shè)置該屬性，所有元素的第一行都可以縮進(jìn)一個(gè)給定的長(zhǎng)度，甚至該長(zhǎng)度可以是負(fù)值。
p {
text-: 2em;
}
em是一個(gè)相對(duì)單位，就是當(dāng)前元素（font-size）1個(gè)文字的大小，如果當(dāng)前元素沒(méi)有設(shè)置大小，則會(huì)按照父元素的1個(gè)文字大小。
4.5 行間距
line-屬性用于設(shè)置行間的距離（行高）。可以控制文字行與行之間的距離。
行間距=上間距+中間文本高度+下間距/*
5. css的引入方式 5.1 css的三種樣式表
按照css樣式書寫的位置（或者引入的方式），css樣式表可以分為三大類：
1.內(nèi)部樣式表（嵌入式）
內(nèi)部樣式表是寫道html頁(yè)面內(nèi)部。是將所有的css代碼抽取出來(lái)，單獨(dú)放到一個(gè)標(biāo)簽中。
2.行內(nèi)樣式表（行內(nèi)式）
（內(nèi)聯(lián)樣式表）是在元素標(biāo)簽內(nèi)部的style屬性中設(shè)定css樣式。適合于修改簡(jiǎn)單 樣式。
"color:red;font-size:12px;">青春不常在，抓緊談戀愛(ài)
沒(méi)有體現(xiàn)出結(jié)構(gòu)與樣式相分離的思想，所以不推薦大量使用，只有對(duì)當(dāng)前元素添加簡(jiǎn)單樣式的時(shí)候，可以考慮使用。
3.外部樣式表（鏈接式）
實(shí)際開(kāi)發(fā)都是外部樣式表。適合于樣式比較多的情況。核心：樣式單獨(dú)寫到css文件中，之后把css文件引入到HTML頁(yè)面中使用。
引入外部樣式表分為兩步：
1.新建一個(gè)后綴名為.css的樣式文件，把所有css代碼都放入到此文件中。 css文件里只有樣式，沒(méi)有標(biāo)簽。
2. 在html頁(yè)面中網(wǎng)頁(yè)添加css樣式表的方式，使用標(biāo)簽引入這個(gè)文件。
"stylesheet" href="css文件路徑">
屬性作用
rel
定義當(dāng)前文檔于被鏈接文檔之間的關(guān)系網(wǎng)頁(yè)添加css樣式表的方式，在這里需要指定為“”，表示被鏈接的文檔是一個(gè)樣式表文件。
href
定義所鏈接外部樣式表文件的url，可以是相對(duì)路徑，也可以是絕對(duì)路徑。
使用外部樣式表設(shè)定css，通常也被稱為外鏈?zhǔn)交蜴溄邮揭耄@種方式是開(kāi)發(fā)中常用的方式。
5.5 css引入方式總結(jié) 樣式表優(yōu)點(diǎn)缺點(diǎn)使用情況控制范圍
行內(nèi)樣式表
書寫方便，權(quán)重高
結(jié)構(gòu)樣式混寫
較少
控制一個(gè)標(biāo)簽
內(nèi)部樣式表
部分結(jié)構(gòu)和樣式相分離
沒(méi)有徹底分離
較多
控制一個(gè)頁(yè)面
外部樣式表
完全實(shí)現(xiàn)結(jié)構(gòu)和樣式相分離
需要引入
最多
控制多個(gè)頁(yè)面
6. 調(diào)試工具 ctrl+滾輪可以放大開(kāi)發(fā)者工具代碼大小。左邊是HTML元素結(jié)構(gòu)，右邊是css樣式。右邊css樣式可以改動(dòng)數(shù)值（左右箭頭或者直接輸入）和查看顏色。ctrl+0復(fù)原瀏覽器大小。如果點(diǎn)擊元素，發(fā)現(xiàn)右側(cè)沒(méi)有樣式引入，極有可能是類名或者樣式引入錯(cuò)誤。如果有樣式，但是樣式前面有黃色感嘆號(hào)提示，則是樣式屬性書寫錯(cuò)誤。