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