CSS概念
css 全稱 cascading style sheets,層疊式樣式表, 是一種用來表現(xiàn) HTML 的文件樣式的計算機(jī)語言。
作用: 靜態(tài)地修飾網(wǎng)頁, 并且可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。
CSS 的出現(xiàn), 實現(xiàn)了網(wǎng)頁的結(jié)構(gòu)和樣式分離。美容師!
CSS的組成
| 層疊式 | 樣式 |
|---|---|
| css 中貫穿始終的加載特性 | 定義如何顯示 HTML 元素 |
| 層疊性 | 文字文本 |
| 繼承性 | 背景 |
| 盒模型 | |
| 浮動 | |
| 定位 | |
| 其他 |
CSS書寫
CSS 規(guī)則由兩個主要的部分構(gòu)成: 選擇器, 以及一條或多條聲明

書寫位置
內(nèi)聯(lián)式(不推薦)
行內(nèi)式
-
書寫位置:在 HTML 標(biāo)簽的 style 屬性中書寫 css 樣式
<div style="width: 360px;height: 100px;background-color: red;"></div>
內(nèi)聯(lián)式缺點(diǎn)
必須寫在標(biāo)簽,沒有脫離HTML標(biāo)簽
讓標(biāo)簽結(jié)構(gòu)繁重,不利于HTML結(jié)構(gòu)的解讀
一個CSS代碼,只能給一個標(biāo)簽使用,如有多個標(biāo)簽使用相同樣式,需要重寫,增加代碼量
內(nèi)嵌式
書寫位置:在HTML文件,<head>標(biāo)簽內(nèi)部的<style>標(biāo)簽中。<style> 標(biāo)簽書寫在< title> 標(biāo)簽后面, 所有 css 代碼書寫在 <style> 標(biāo)簽內(nèi)部
-
在<style> 標(biāo)簽有一個標(biāo)簽屬性叫做 type, 屬性值是 “ text/css”
<style type="text/css"> div { width: 360px; height: 100px; background-color: red; } </style>
內(nèi)嵌式特點(diǎn)
優(yōu)點(diǎn)
實現(xiàn)結(jié)構(gòu)與樣式初步分離
多個標(biāo)簽可用同一段代碼設(shè)置相同樣式
缺點(diǎn)
結(jié)構(gòu)與樣式?jīng)]有完全分離,依舊是寫在HTML文件里面
在HTML中CSS代碼過多,文件不美觀
外聯(lián)式
也稱作外鏈?zhǔn)?CSS、 外部 CSS
書寫位置:在一個單獨(dú)的擴(kuò)展名為.css的文件中
-
書寫語法:與內(nèi)嵌式類似,直接書寫,單并不需要添加<style>標(biāo)簽
/* 直接書寫css規(guī)則 */ div { width: 360px; height: 100px; background-color: red; }
外聯(lián)式引用
外聯(lián)式樣式表必須引入到 HTML 文件中, 才能正常進(jìn)行加載
-
引入方式: 在 HTML 中的 <head> 標(biāo)簽內(nèi)部使用 <link> 標(biāo)簽進(jìn)行引入
<link rel="stylesheet" href="01.css" type="text/css">
外聯(lián)式優(yōu)點(diǎn)
HTML 和 css 完全分離
多個 HTML 文件可以共用一個 css 文件, 便于提取公共 css, 減少代碼量
一個 css 變化, 多個 HTML 頁面同時變化, 減少工作量
一個 HTML 文件可以引入多個 css 文件, 可以實現(xiàn)同一個頁面中 css 代碼分層
導(dǎo)入式
書寫位置:在內(nèi)嵌式樣式表 <style> 標(biāo)簽內(nèi)部, 或者在外聯(lián)式樣式表的內(nèi)部, 導(dǎo)入其他的外部的.css 文件
-
導(dǎo)入方式: 利用一條 @import url(路徑) 語句進(jìn)行引入
<style> @import url(01.css); h1 { color: red; } </style>
導(dǎo)入式問題
與外聯(lián)式樣式表基本相同
但是由于導(dǎo)入式在瀏覽器中加載時, 會在 HTML 結(jié)構(gòu)加載完畢后再進(jìn)行編譯, 如果網(wǎng)速比較慢時, 會導(dǎo)致網(wǎng)頁出現(xiàn)沒有 css 樣式的效果, 體驗不好
實際工作中, 較少使用導(dǎo)入式, 推薦使用外聯(lián)式樣式表
實際應(yīng)用
小型案例: 可以使用內(nèi)嵌式 CSS
實際工作、 大型網(wǎng)站項目: 推薦使用外聯(lián)式 CSS
CSS語法
CSS規(guī)則
CSS 規(guī)則由兩個主要的部分構(gòu)成: 選擇器, 以及一條或多條聲明

樣式規(guī)則
以內(nèi)嵌式樣式表為例
所有的 css 代碼都必須書寫在 <head> 標(biāo)簽內(nèi)部的一對 <style> 標(biāo)簽內(nèi)
css 在給某個標(biāo)簽設(shè)置樣式前, 必須使用選擇器先選中標(biāo)簽
css 樣式的屬性, 屬性名和屬性值的鍵值對寫法為 k:v?
給每個選擇器添加的樣式屬性都必須寫在一對大括號 {} 之內(nèi)
-
給一個標(biāo)簽添加的所有需要的樣式, 都要在 {} 內(nèi)部一一羅列出來
<style type="text/css"> div { width: 360px; height: 100px; background-color: red; } </style>
注意事項
分號必要性: 每條屬性后面的分號必須寫, 如果不寫, 會導(dǎo)致后面所有的代碼加載錯誤。
css 中所有屬性與屬性之間對空格、 換行、 縮進(jìn)不敏感。
CSS 注釋語法
vs code快捷鍵: ctrl+/
/*中間部分為注釋內(nèi)容*/
CSS樣式格式
-
展開格式:開發(fā)過程使用, 代碼可讀性強(qiáng), 便于調(diào)錯
div { width: 360px; height: 100px; background-color: red; } -
緊湊格式:上傳服務(wù)器時使用, 減少不必要的空白字符, 壓縮文件大小, 利于傳輸
div {width: 360px; height: 100px; background-color: red;}
英文大小寫
CSS的英文可以大寫,也可以小寫
建議全部小寫!
空格規(guī)范
選擇器與大括號 {} 之間保留一個空格
-
冒號后面, 屬性值前面, 保留一個空格
div { width: 360px; height: 100px; background-color: red; }
CSS常用樣式
顏色color
作用: 給文字設(shè)置顏色
屬性名 k : color
屬性值 v : 顏色名、 顏色值
顏色名
顏色名就是使用顏色的英文單詞進(jìn)行表示
| 紅色 | red |
|---|---|
| 橙色 | orange |
| 黃色 | yellow |
| 綠色 | green |
| 青色 | cyan |
| 藍(lán)色 | blue |
| 紫色 | purple |
| 黑色 | black |
| 白色 | white |
| 金色 | gold |
| 粉色 | pink |
| 淺黃色 | lightyellow |
| 黃綠色 | yellowgreen |
| 天藍(lán)色 | skyblue |
更多的顏色名可以通過查詢手冊得到
顏色值
顏色值指使用具體顏色的數(shù)值表示。 包括: rgb 模式和十六進(jìn)制模式寫法
rgb 模式
rgb 模式: 是根據(jù)紅綠藍(lán)三原色進(jìn)行混合而成的顏色模式
每個原色的取值范圍是0-255, 一共256個數(shù)值。 三個原色共能混合成1677多萬種顏色
書寫方法: rgb(紅,綠,藍(lán))
常用顏色的 rgb 色值:
| 紅色 | rgb(255,0,0) |
|---|---|
| 綠色 | rgb(0,255,0) |
| 藍(lán)色 | rgb(0,0,255) |
| 黑色 | rgb(0,0,0) |
| 白色 | rgb(255,255,255) |
| 灰色 | rgb(128,128,128) |
十六進(jìn)制模式
十六進(jìn)制模式: 是 rgb 模式的一種簡化寫法, 使用十六進(jìn)制的數(shù)字字符去替換十進(jìn)制的 0--255 的數(shù)字
十六進(jìn)制: 逢十六進(jìn)一, 每個數(shù)位上只能出現(xiàn) 0-9, a-f 之間的字符
書寫為顏色值時, 紅、 綠、 藍(lán)每個色值都要使用兩位數(shù)的十六進(jìn)制進(jìn)行替換。0→00;255→ff
書寫方式: 使用 # 開頭, 后面連續(xù)書寫紅、 綠、 藍(lán)三個顏色的十六進(jìn)制的兩位數(shù)值
常用顏色的十六進(jìn)制色值:
| 紅色 | #ff0000 |
|---|---|
| 綠色 | #00ff00 |
| 藍(lán)色 #0000ff | |
| 黑色 | #000000 |
| 白色#ffffff | |
| 灰色 #808080 |
注:十六進(jìn)制顏色值簡寫模式: 如果紅、 綠、 藍(lán)三個原色的色值每一個都是由重疊的數(shù)字組成, 可以將重疊的數(shù)字簡化成一個進(jìn)行書寫。 如:紅色 #f00
字體font-family
作用: 定義元素內(nèi)文字的字體
屬性名 k : font-family, 字體屬于 font 綜合屬性的一個單一屬性
屬性值 v : 字體名稱, 必須包裹在一對引號中, 屬性值可以有多個, 值之間用逗號分隔
常用字體
-
常用的中文字體:
宋體 SimSun 微軟雅黑 Microsoft Yahei 常用的英文字體:Arial consolas
如果不設(shè)置字體屬性, 不同的瀏覽器有自己的默認(rèn)字體
注意事項
font-family 可以設(shè)置多個字體名稱, 在實際加載時只會選擇一種加載, 選擇的依據(jù)是按書寫順序進(jìn)行, 如果瀏覽器不支持第一個字體, 則會嘗試下一個, 直到找到第一個支持的字體
瀏覽器中加載的字體是用戶機(jī)器中自帶的, 如果用戶的電腦中沒有設(shè)置的字體則加載失敗, 需要查找下一個, 因此,必須在最后設(shè)置一個所有機(jī)器都具備的通用字體作為后路
中文字體中一般帶有英文可以加載的字體效果, 為了避免英文字的字體影響,建議將英文字體寫在屬性值最前面
實際應(yīng)用
首選字體需要根據(jù)設(shè)計圖確定, 最后需要設(shè)置備用字體
字號font-size
作用: 設(shè)置文字的大小。
屬性名 k : font-size, 字號屬于 font 綜合屬性的單一屬性
屬性值 v : 可以使用相對長度單位, 也可以使用絕對長度單位。 推薦使用相對長度單位
單位
| 相對長度單位 | 說明 |
|---|---|
| px | 像素值,最常使用的單位 |
| em | 倍數(shù),繼承自祖先元素設(shè)置的字號的倍數(shù) |
| % | 百分比,繼承自祖先元素設(shè)置的字號的百分比 |
| 絕對長度單位 | 說明 |
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 點(diǎn) |
注意事項
如果 HTML 中不設(shè)置字號, 不同的瀏覽器有自己默認(rèn)的加載字號, 比如 chrome、IE, 默認(rèn)顯示字號為 16px
不同的瀏覽器也有自己最小加載顯示字號, 如果設(shè)置的字號低于最小字號, 都以最小字號加載, 0除外。 chrome 瀏覽器最小加載顯示字號為8px, IE 瀏覽器最小可以支持1px的字號
實際應(yīng)用
最小設(shè)置字號必須是12px, 如果低于12px會出現(xiàn)兼容問題。 現(xiàn)在網(wǎng)頁中普遍使用14px+
盡量使用 14px、 16px等偶數(shù)的數(shù)字字號, ie6 等老式瀏覽器支持奇數(shù)會有bug
實際工作中的字號, 需要以設(shè)計圖為準(zhǔn)
盒子實體化屬性
| 屬性名 | 屬性值 | 說明 |
|---|---|---|
| width | px單位的數(shù)值 | 定義元素占有的寬度 |
| height | px單位的數(shù)值 | 定義元素占有的高度 |
| background-color | 顏色名、顏色值 | 定義元素的背景顏色 |
div {
width: 360px;
height: 100px;
background-color: red;
}
CSS選擇器
選擇器: 選擇要添加樣式的 HTML 標(biāo)簽的一種方法、 模式
-
首先學(xué)習(xí) css2.1 版本的七種選擇器:
基礎(chǔ)選擇器: 標(biāo)簽選擇器、 id 選擇器、 類選擇器、 通配符選擇器
高級選擇器: 后代選擇器、 交集選擇器、 并集選擇器
標(biāo)簽選擇器
通過標(biāo)簽名去選擇標(biāo)簽元素
書寫方式: 標(biāo)簽名,如p
選擇范圍: 選中的是HTML文件中所有的同名標(biāo)簽
注意: 標(biāo)簽選擇器可以選擇所有的同名標(biāo)簽, 會忽視 HTML 元素的嵌套關(guān)系, 不管嵌套多深, 都能被選中
標(biāo)簽選擇器特點(diǎn)
優(yōu)點(diǎn): 選中所有的同名標(biāo)簽, 設(shè)置所有同名標(biāo)簽的公共樣式
缺點(diǎn): 只能實現(xiàn)全選, 不能局部
p {
color: red;
}
id 選擇器(少用,不建議)
通過標(biāo)簽上的 id 屬性去選擇標(biāo)簽。
書寫方式:#id 屬性值
選擇范圍: 只能選中一個標(biāo)簽。
id 命名規(guī)則: 必須以字母開頭, 后面可以有字母、 數(shù)字、 下劃線、 橫線, 嚴(yán)格區(qū)分大小寫。 每個 id 屬性值必須是唯一的, 不能與其他的 id 同名
注意: 如果希望多個標(biāo)簽設(shè)置相同的樣式, 使用id選擇器的話, 必須給這多個標(biāo)簽取不同的 id 名, 分別選中設(shè)置
#para1 {
color: red;
}
#para2 {
color: red;
}
id 選擇器特點(diǎn)
缺點(diǎn): id 選擇器只能實現(xiàn)單選, 不能幫我們完成多選的功能
類選擇器
通過標(biāo)簽的 class 屬性去選擇標(biāo)簽。
書寫方式:.class屬性值
選擇范圍: 是頁面中所有 class 屬性值相同的標(biāo)簽。
class 命名規(guī)則: 必須以字母開頭, 后面可以有字母、 數(shù)字、 下劃線、 橫線, 嚴(yán)格區(qū)分大小寫。 class 屬性值可以與其他的class相同
.demo {
color: red;
}
類選擇器特點(diǎn)
多個不同的標(biāo)簽, 不區(qū)分標(biāo)簽類型, 只要 class 屬性值相同, 都可以被同一個類選擇器選中
一個標(biāo)簽的 class 屬性可以有多個屬性值, 值之間用空格分隔, 每個屬性值組成的選擇器, 都可以選中這一個標(biāo)簽, 每個選擇器后面的樣式都會添加給同一個標(biāo)簽
<p class="demo ddd">段落標(biāo)簽內(nèi)容</p>
類選擇器的特殊應(yīng)用
原子類: 在css中提前設(shè)置一些類名, 每個類選擇器后面只添加一條css樣式屬性, 這些屬性會在頁面中常被使用, 后期可以不需要多次書寫屬性, 只要將對應(yīng)的類名添加給需要的標(biāo)簽即可
類選擇器的優(yōu)點(diǎn)
通過一個類選擇器進(jìn)行多選, 選中多個標(biāo)簽, 添加公共樣式
一個標(biāo)簽可以被多個類選擇器選中, 可以將所有樣式進(jìn)行分離, 分別提取公共樣式和單獨(dú)樣式, 節(jié)省代碼量
實際工作中, 通常我們有一個使用規(guī)律: 類上樣式(CSS), id 上行為(JavaScript)
通配符選擇器
通過一個特殊符號選擇頁面內(nèi)所有的標(biāo)簽。
書寫方式: *
選擇范圍: 包含 <html>標(biāo)簽在內(nèi)的所有標(biāo)簽
* {
color: red;
margin: 0;
padding: 0;
}
通配符特點(diǎn)和應(yīng)用
優(yōu)點(diǎn): 實現(xiàn)全選, 簡化書寫
缺點(diǎn): 通配符選擇效率低, 設(shè)置的部分公共樣式不是所有標(biāo)簽都需要添加, 如果使用通配符選擇, 會讓不需要的標(biāo)簽也加載一次樣式, 導(dǎo)致瀏覽器多做無用的工作
注意: 實際上線的網(wǎng)站不允許使用 * 去清除默認(rèn)內(nèi)外邊距
不過普通的案例, 代碼量較少時, 為了節(jié)省書寫, 可以使用通配符
后代選擇器
通過標(biāo)簽之間存的嵌套關(guān)系(族譜關(guān)系) 去選擇元素, 基本組成部分就是基礎(chǔ)選擇器
后代選擇器也叫包含選擇器
書寫方式: 空格表示后代, 基礎(chǔ)選擇器中間使用空格分隔, 空格前面的選擇器選中的標(biāo)簽必須是后面選擇器選中標(biāo)簽的祖先級
選擇范圍: 通過后代選擇器中前面的一系列基礎(chǔ)選擇器縮小選擇范圍, 最終由最后一個選擇器確定選中的標(biāo)簽
注意: 后代選擇器必須滿足所有的后代關(guān)系才能夠被選中, 后代關(guān)系不一定只能是父子關(guān)系
后代選擇器特點(diǎn)
優(yōu)點(diǎn): 減少 class 屬性的使用, 選擇效率更高
.box1 ul li p {
color: red;
}
.box1 p {
color: green;
}
交集選擇器
通過一個標(biāo)簽之上滿足所有的基礎(chǔ)選擇器的需求去選擇標(biāo)簽
書寫方式: 基礎(chǔ)選擇器進(jìn)行如果有標(biāo)簽選擇器參與交集, 必須書寫在開頭
選擇范圍: 選擇的是滿足所有基礎(chǔ)選擇器需求的標(biāo)簽, 如果一個條件不滿足都不能被選中
比較常見的是標(biāo)簽與類的交集
.box1 p.demo {
color: green;
}
交集選擇器更多寫法
交集選擇器可以進(jìn)行類名的連續(xù)交集, 需要滿足更多的條件才能選中標(biāo)簽。
IE6 不支持類名連續(xù)交集寫法。
交集選擇器可以作為其他高級選擇器的組成部分
并集選擇器
-
不同選擇器選中的元素都要設(shè)置相同的樣式, 多次書寫相同的樣式屬性對代碼造成浪費(fèi), 可以將前面六種選擇器可以進(jìn)行并集書寫, 相當(dāng)于一種簡化寫法
書寫方式: 將多個選擇器中間用逗號進(jìn)行分隔, 最后一個后面不能加逗號
選擇范圍: 是所有的單獨(dú)選擇器選中的標(biāo)簽的并集集合。
body,h2,div,ul,li,p {
margin: 0;
padding: 0;
}
并集選擇器用途
如果多個標(biāo)簽具有公共樣式, 但是不能用一個選擇器選中, 可以使用并集寫法
可以使用標(biāo)簽選擇器的并集寫法, 進(jìn)行默認(rèn)樣式的清除, 替換通配符的功能
CSS層疊式
繼承性
如果一個標(biāo)簽沒有設(shè)置過一些樣式, 它的某個祖先級曾經(jīng)設(shè)置過, 在瀏覽器中該標(biāo)簽也加載了這些樣式, 這些樣式都是從祖先級繼承而來, 這種現(xiàn)象就是繼承性
能夠被繼承的樣式是所有的文字相關(guān)樣式屬性, 其他的屬性都不能被繼承
.box1 {
width: 200px;
height: 200px;
background-color: red;
color: green;
font-family: "宋體";
font-size: 14px;
}
繼承性應(yīng)用
繼承性是一個很好的性質(zhì), 可以將頁面中出現(xiàn)最多的文字樣式設(shè)置給一個較大的祖先級標(biāo)簽比如 <body>, 后期所有的后代標(biāo)簽都可以從 <body> 進(jìn)行繼承
body {
color: green;
font-family: "宋體";
font-size: 14px;
}
.box1 {
width: 200px;
height: 200px;
background-color: pink;
}
層疊性
思考問題: 同一個標(biāo)簽可以被多個選擇器選中, 如果選擇器后面設(shè)置了相同的樣式屬性, 標(biāo)簽最終該加載哪個? 或者, 在繼承性中, 如果多個祖先都設(shè)置了相同的文字樣式, 后代中該繼承哪個祖先級的?
解決方法: 就是使用層疊性去解決沖突。 多個選擇器在進(jìn)行對比的過程中, 最終只有一個屬性會成功加載, 它會層疊、 覆蓋掉其他的屬性。
判斷最終勝出的屬性是誰, 需要依賴判斷優(yōu)先級

選中目標(biāo)標(biāo)簽
-
第一步: 比較多個選擇器的權(quán)重, 權(quán)重高的層疊權(quán)重低的。
基礎(chǔ)選擇器的權(quán)重: 根據(jù)選擇范圍, 范圍越大權(quán)重越小, *< 標(biāo)簽選擇器 < 類選擇器 < id 選擇器。
高級選擇器權(quán)重比較方法: 依次比較組成高級選擇器的 id 的個數(shù), 類的個數(shù), 標(biāo)簽的個數(shù), 如果前面能夠比較出大小就不再比較后面, 如果前面相等就往后比較,直到比較出大小。
比較順序: id 個數(shù), 類的個數(shù), 標(biāo)簽的個數(shù)
第二步: 如果選擇器權(quán)重都相同, 需要比較 CSS 中代碼的書寫順序, 后寫的層疊先寫的
選中目標(biāo)標(biāo)簽的組先級
-
如果選擇器選中的是祖先元素, 文字的樣式可以被繼承。
比較就近原則, 比較選擇器選中的祖先級在 HTML 結(jié)構(gòu)中距離目標(biāo)標(biāo)簽的遠(yuǎn)近, 近的層疊遠(yuǎn)的
如果選中的祖先級距離目標(biāo)一樣近(同一個祖先級) , 比較選擇器權(quán)重,權(quán)重大的層疊小的。
如果距離一樣近, 權(quán)重也相同, 最后比較 CSS 中的書寫順序, 后面的層疊前面的
! important 關(guān)鍵字
如果在比較選擇器權(quán)重的過程中, 遇見一個 !important 關(guān)鍵字, 可以將某條 CSS樣式屬性的權(quán)重提升到最大。
書寫位置: 在某個css屬性的屬性值后面 空格加 !important
-
注意:
就近原則中, 不需要比較選擇器權(quán)重, 所有會失效
important 不能提升選擇器的權(quán)重, 只能提升某條屬性的權(quán)重到最大
#box2 {
color: yellow !important;
}
#box2 .box3 {
color: blue;
行內(nèi)式權(quán)重
行內(nèi)式樣式與內(nèi)嵌式或外鏈?zhǔn)綐邮奖容^權(quán)重時,行內(nèi)式的權(quán)重最高
但是, 與 !important 關(guān)鍵字相比權(quán)重要低