CSS層疊樣式表
CSS(Cascading Style Sheets) 鹤盒，通常稱為CSS樣式表或?qū)盈B樣式表（級聯(lián)樣式表）
作用：
- 主要用于設(shè)置 HTML頁面中的文本內(nèi)容（字體箫荡、大小恐仑、對齊方式等）落追、圖片的外形（寬高赋除、邊框樣式撤蚊、邊距等）以及版面的布局和外觀顯示樣式逮诲。
- CSS以HTML為基礎(chǔ)婉刀，提供了豐富的功能吟温，如字體、顏色突颊、背景的控制及整體排版等鲁豪，而且還可以針對不同的瀏覽器設(shè)置不同的樣式。
引入CSS
1律秃、行內(nèi)樣式(內(nèi)聯(lián)樣式)
概念：
稱行內(nèi)樣式爬橡、行間樣式.
是通過標(biāo)簽的style屬性來設(shè)置元素的樣式其基本語法格式如下：
<標(biāo)簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內(nèi)容 </標(biāo)簽名>
實際上任何HTML標(biāo)簽都擁有style屬性，用來設(shè)置行內(nèi)式棒动。
<div style="width: 200px; height: 300px; border: red 3px solid">div</div>
- 注意：
- style其實就是標(biāo)簽的屬性
- 樣式屬性和值中間是
: - 多組屬性值之間用
;隔開糙申。 - 只能控制當(dāng)前的標(biāo)簽和以及嵌套在其中的字標(biāo)簽，造成代碼冗余
- 缺點：
- 沒有實現(xiàn)樣式和結(jié)構(gòu)相分離
2船惨、內(nèi)部樣式表（內(nèi)嵌樣式表）
- 概念：
稱內(nèi)嵌式
是將CSS代碼集中寫在HTML文檔的head頭部標(biāo)簽中柜裸，并且用style標(biāo)簽定義 - 其基本語法格式如下
<head>
<style type="text/CSS">
選擇器（選擇的標(biāo)簽） {
屬性1: 屬性值1;
屬性2: 屬性值2;
屬性3: 屬性值3;
}
</style>
</head>
舉個栗子
<style type="text/CSS">
div {
color: green;
font-size: 120px;
border: yellow 4px dashed;
}
</style>
- 注意：
- style標(biāo)簽一般位于head標(biāo)簽中缕陕，當(dāng)然理論上他可以放在HTML文檔的任何地方。
- type="text/css" 在html5中可以省略疙挺。
- 只能控制當(dāng)前的頁面
- 缺點：
沒有徹底分離
3扛邑、外部樣式表（外鏈?zhǔn)剑?/h3>
- 概念：
稱鏈入式
是將所有的樣式放在一個或多個以.CSS為擴(kuò)展名的外部樣式表文件中，
通過link標(biāo)簽將外部樣式表文件鏈接到HTML文檔中
- 其基本語法格式如下：
<head>
<link rel="stylesheet" type="text/css" href="css文件路徑">
</head>
link 是個單標(biāo)簽
-
link標(biāo)簽需要放在head頭部標(biāo)簽中铐然，并且指定link標(biāo)簽的三個屬性
![]()
image
三種樣式總結(jié)
![]()
image
![]()
image
CSS選擇器（重點）
CSS基礎(chǔ)選擇器
標(biāo)簽選擇器
- 概念：
標(biāo)簽選擇器（元素選擇器）是指用HTML標(biāo)簽名稱作為選擇器蔬崩，按標(biāo)簽名稱分類，為頁面中某一類標(biāo)簽指定統(tǒng)一的CSS樣式搀暑。
- 語法：
標(biāo)簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
- 作用：
標(biāo)簽選擇器 可以把某一類標(biāo)簽全部選擇出來 比如所有的div標(biāo)簽 和 所有的 span標(biāo)簽
- 優(yōu)點：
是能快速為頁面中同類型的標(biāo)簽統(tǒng)一樣式
- 缺點：
不能設(shè)計差異化樣式
類選擇器
稱鏈入式
是將所有的樣式放在一個或多個以.CSS為擴(kuò)展名的外部樣式表文件中，
通過link標(biāo)簽將外部樣式表文件鏈接到HTML文檔中
<head>
<link rel="stylesheet" type="text/css" href="css文件路徑">
</head>
link 是個單標(biāo)簽
link標(biāo)簽需要放在head頭部標(biāo)簽中铐然，并且指定link標(biāo)簽的三個屬性
標(biāo)簽選擇器（元素選擇器）是指用HTML標(biāo)簽名稱作為選擇器蔬崩，按標(biāo)簽名稱分類，為頁面中某一類標(biāo)簽指定統(tǒng)一的CSS樣式搀暑。
標(biāo)簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
標(biāo)簽選擇器 可以把某一類標(biāo)簽全部選擇出來 比如所有的div標(biāo)簽 和 所有的 span標(biāo)簽
是能快速為頁面中同類型的標(biāo)簽統(tǒng)一樣式
不能設(shè)計差異化樣式
類選擇器使用“.”（英文點號）進(jìn)行標(biāo)識舱殿，后面緊跟類名.
- 語法：
- 類名選擇器
.類名 {
屬性1:屬性值1;
屬性2:屬性值2;
屬性3:屬性值3;
}
- 優(yōu)點：
- 可以為元素對象定義單獨或相同的樣式。 可以選擇一個或者多個標(biāo)簽
- 注意
- 類選擇器使用“.”（英文點號）進(jìn)行標(biāo)識险掀，后面緊跟類名(自定義沪袭，我們自己命名的)
- 長名稱或詞組可以使用中橫線來為選擇器命名。
- 不要純數(shù)字樟氢、中文等命名冈绊， 盡量使用英文字母來表示。
類選擇器特殊用法- 多類名
注意：
- 各個類名中間用空格隔開埠啃。
- 多類名選擇器在后期布局比較復(fù)雜的情況下死宣，還是較多使用的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pink{
font-size: 120px;
color: green;
}
.font14{
color: red;
}
</style>
</head>
<body>
<div class="pink fontWeight font20">亞瑟</div>
<div class="font20">劉備</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蟬</div>
</body>
</html>
id選擇器
id選擇器使用#進(jìn)行標(biāo)識碴开，后面緊跟id名
- 其基本語法格式如下：
- id選擇器
#id名 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
元素的id值是唯一的毅该，只能對應(yīng)于文檔中某一個具體的元素。
用法基本和類選擇器相同潦牛。
W3C標(biāo)準(zhǔn)規(guī)定眶掌，在同一個頁面內(nèi)，不允許有相同名字的id對象出現(xiàn)巴碗，但是允許相同名字的class朴爬。類選擇器（class） 好比人的名字， 是可以多次重復(fù)使用的橡淆， 比如 張偉 王偉 李偉 李娜
id選擇器 好比人的身份證號碼召噩， 全中國是唯一的， 不得重復(fù)逸爵。 只能使用一次具滴。
類選擇器我們在修改樣式中，用的最多师倔。
id選擇器一般用于頁面唯一性的元素身上构韵，經(jīng)常和我們后面學(xué)習(xí)的javascript 搭配使用
通配符選擇器
- 概念
通配符選擇器用*號表示， * 就是 選擇所有的標(biāo)簽 他是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素贞绳。 - 其基本語法格式如下：
* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
<style>
*{
font-size: 120px;
}
</style>
</head>
<body>
<div id="container">
<div class="header">header</div>
<div class="body">body</div>
<div class="footer">footer</div>
</div>
<p>哈哈</p>
CSS字體樣式屬性
1.font字體
-
1.1 font-size:大小
image 我們文字大小以后谷醉，基本就用px了，其他單位很少使用
谷歌瀏覽器默認(rèn)的文字大小為16px
但是不同瀏覽器可能默認(rèn)顯示的字號大小不一致冈闭，我們盡量給一個明確值大小俱尼，不要默認(rèn)大小。一般給body指定整個頁面文字的大小
1.2 font-family:字體
作用：
font-family屬性用于設(shè)置哪一種字體萎攒。網(wǎng)頁中常用的字體有宋體遇八、微軟雅黑、黑體等耍休，例如將網(wǎng)頁中所有段落文本的字體設(shè)置為微軟雅黑
可以同時指定多個字體刃永，中間以逗號隔開，表示如果瀏覽器不支持第一個字體羊精，則會嘗試下一個斯够，直到找到合適的字體， 如果都沒有喧锦，則以我們電腦默認(rèn)的字體為準(zhǔn)读规。
p{ font-family:"微軟雅黑";}
p{font-family: Arial,"Microsoft Yahei", "微軟雅黑";}
1.3 font-weight:字體粗細(xì)
-
在html中如何將字體加粗我們可以用標(biāo)簽來實現(xiàn)
- 使用 b 和 strong 標(biāo)簽是文本加粗。
-
可以使用CSS 來實現(xiàn)燃少，但是CSS 是沒有語義的
image 1.4 font-style:字體風(fēng)格
-
在html中如何將字體傾斜我們可以用標(biāo)簽來實現(xiàn)
- 字體傾斜除了用 i 和 em 標(biāo)簽束亏，
可以使用CSS 來實現(xiàn)，但是CSS 是沒有語義的
font-style屬性用于定義字體風(fēng)格阵具，如設(shè)置斜體碍遍、傾斜或正常字體，其可用屬性值如下：
平時我們很少給文字加斜體阳液，反而喜歡給斜體標(biāo)簽（em怕敬，i）改為普通模式。
- 1.5 font:綜合設(shè)置字體樣式 (重點)
基本語法格式如下：
選擇器 { font: font-style font-weight font-size/line-height font-family;}
注意：
使用font屬性時趁舀，必須按上面語法格式中的順序書寫赖捌，不能更換順序祝沸，各個屬性以空格隔開矮烹。
-
其中不需要設(shè)置的屬性可以省略（取默認(rèn)值），但必須保留font-size和font-family屬性罩锐，否則font屬性將不起作用奉狈。
image
color:文本顏色
作用：
color屬性用于定義文本的顏色，-
其取值方式有如下3種：
image我們實際工作中涩惑， 用 16進(jìn)制的寫法是最多的仁期，而且我們更喜歡簡寫方式比如 #f00 代表紅色
CSS外觀屬性
color:文本顏色
text-align:文本水平對齊方式
line-height:行間距
text-indent:首行縮進(jìn)
text-decoration 文本的裝飾
CSS復(fù)合選擇器
- 復(fù)合選擇器是由兩個或多個基礎(chǔ)選擇器，通過不同的方式組合而成的
1、后代選擇器（重點）
- 后代選擇器又稱為包含選擇器
- 用來選擇元素或元素組的子孫后代
父級 子級{屬性:屬性值;屬性:屬性值;}
- 當(dāng)標(biāo)簽發(fā)生嵌套時跛蛋，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代熬的。
- 子孫后代都可以這么選擇。 或者說赊级，它能選擇任何包含在內(nèi) 的標(biāo)簽押框。
2、子元素選擇器
子元素選擇器只能選擇作為某元素子元素(親兒子)的元素理逊。
寫法就是把父級標(biāo)簽寫在前面橡伞，子級標(biāo)簽寫在后面，中間跟一個 > 進(jìn)行連接
3晋被、交集選擇器
交集選擇器由兩個選擇器構(gòu)成兑徘，找到的標(biāo)簽必須滿足：既有標(biāo)簽一的特點，也有標(biāo)簽二的特點羡洛。
其中第一個為標(biāo)簽選擇器挂脑，第二個為class選擇器，兩個選擇器之間不能有空格欲侮，如h3.special
4最域、并集選擇器（重點）
如果某些選擇器定義的相同樣式，就可以利用并集選擇器锈麸，可以讓代碼更簡潔镀脂。
-
-并集選擇器（CSS選擇器分組）是各個選擇器通過
,連接而成的，通常用于集體聲明忘伞。image 任何形式的選擇器（包括標(biāo)簽選擇器薄翅、class類選擇器id選擇器等），都可以作為并集選擇器的一部分氓奈。
鏈接偽類選擇器（重點）
用于向某些選擇器添加特殊的效果翘魄。比如給鏈接添加特殊效果， 比如可以選擇 第1個舀奶，第n個元素暑竟。
因為偽類選擇器很多，比如鏈接偽類育勺，結(jié)構(gòu)偽類等等但荤。我們這里先給大家講解鏈接偽類選擇器。
a:link /* 未訪問的鏈接 */
a:visited /* 已訪問的鏈接 */
a:hover /* 鼠標(biāo)移動到鏈接上 */
a:active /* 選定的鏈接 */
注意寫的時候涧至，他們的順序盡量不要顛倒 否則可能引起錯誤腹躁。
因為叫鏈接偽類，所以都是 利用交集選擇器 a:link a:hover
-
因為a鏈接瀏覽器具有默認(rèn)樣式南蓬，所以我們實際工作中都需要給鏈接單獨指定樣式纺非。
image
標(biāo)簽顯示模式（display）
- 什么是標(biāo)簽的顯示模式哑了？
標(biāo)簽以什么方式進(jìn)行顯示，比如div 自己占一行烧颖， 比如span 一行可以放很多個 - 作用：
我們網(wǎng)頁的標(biāo)簽非常多弱左，再不同地方會用到不同類型的標(biāo)簽，以便更好的完成我們的網(wǎng)頁炕淮。 - 標(biāo)簽的類型(分類)
HTML標(biāo)簽一般分為塊標(biāo)簽和行內(nèi)標(biāo)簽兩種類型科贬，它們也稱塊元素和行內(nèi)元素。
塊級元素(block-level)
常見的塊元素有<h1>~<h6>鳖悠、<p>榜掌、<div>、<ul>乘综、<ol>憎账、<li>等，其中<div>標(biāo)簽是最典型的塊元素卡辰。
- 塊級元素的特點
（1）比較霸道胞皱，自己獨占一行
（2）高度，寬度九妈、外邊距以及內(nèi)邊距都可以控制反砌。
（3）寬度默認(rèn)是容器（父級寬度）的100%
（4）是一個容器及盒子，里面可以放行內(nèi)或者塊級元素萌朱。
注意：只有 文字才 能組成段落 因此 p 里面不能放塊級元素宴树，特別是 p 不能放div
同理還有這些標(biāo)簽h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標(biāo)簽晶疼，里面不能放其他塊級元素酒贬。
行內(nèi)元素(inline-level)
常見的行內(nèi)元素有<a>、<strong>翠霍、<b>锭吨、<em>、<i>寒匙、<del>零如、<s>、<ins>锄弱、<u>考蕾、<span>等，其中<span>標(biāo)簽最典型的行內(nèi)元素棵癣。有的地方也成內(nèi)聯(lián)元素
- 行內(nèi)元素的特點：
（1）相鄰行內(nèi)元素在一行上辕翰，一行可以顯示多個。
（2）高狈谊、寬直接設(shè)置是無效的。
（3）默認(rèn)寬度就是它本身內(nèi)容的寬度。
（4）行內(nèi)元素只能容納文本或則其他行內(nèi)元素河劝。
注意：
- 鏈接里面不能再放鏈接
- 特殊情況a里面可以放塊級元素
行內(nèi)塊元素（inline-block）
在行內(nèi)元素中有幾個特殊的標(biāo)簽——<img />壁榕、<input />、<td>赎瞎，可以對它們設(shè)置寬高和對齊屬性牌里，有些資料可能會稱它們?yōu)樾袃?nèi)塊元素。
行內(nèi)塊元素的特點：
（1）和相鄰行內(nèi)元素（行內(nèi)塊）在一行上,但是之間會有空白縫隙务甥。一行可以顯示多個
（2）默認(rèn)寬度就是它本身內(nèi)容的寬度牡辽。
（3）高度，行高敞临、外邊距以及內(nèi)邊距都可以控制态辛。
三種模式總結(jié)區(qū)別
標(biāo)簽顯示模式轉(zhuǎn)換 display
- 塊轉(zhuǎn)行內(nèi)：display:inline;
- 行內(nèi)轉(zhuǎn)塊：display:block;
- 塊、行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊： display: inline-block;
CSS 背景(background)
- 背景顏色
background-color:顏色值; 默認(rèn)的值是 transparent 透明的
- 背景圖片(image)
background-image : none | url (url)
nono 代表沒有背景圖片 url() 使用地址進(jìn)行圖片加載
- 背景平鋪（repeat）
background-repeat : repeat | no-repeat | repeat-x | repeat-y
- 背景位置(position)
background-position : length || length
background-position : position || position
注意：
- 必須先指定background-image屬性
- position 后面是x坐標(biāo)和y坐標(biāo)挺尿。 可以使用方位名詞或者 精確單位奏黑。
- 如果指定兩個值，兩個值都是方位名字编矾，則兩個值前后順序無關(guān)熟史，比如left top和top left效果一致
- 如果只指定了一個方位名詞，另一個值默認(rèn)居中對齊窄俏。
- 如果position 后面是精確坐標(biāo)蹂匹， 那么第一個，肯定是 x 第二的一定是y
- 如果只指定一個數(shù)值,那該數(shù)值一定是x坐標(biāo)凹蜈，另一個默認(rèn)垂直居中
- 如果指定的兩個值是 精確單位和方位名字混合使用怒详，則第一個值是x坐標(biāo)，第二個值是y坐標(biāo)
背景透明(CSS3)
background: rgba(0, 0, 0, 0.3);
- 最后一個參數(shù)是alpha 透明度 取值范圍 0~1之間
- 我們習(xí)慣把0.3 的 0 省略掉 這樣寫 background: rgba(0, 0, 0, .3);
- 注意： 背景半透明是指盒子背景半透明踪区， 盒子里面的內(nèi)容不受影響
- 因為是CSS3 昆烁，所以 低于 ie9 的版本是不支持的。
CSS 三大特性
CSS層疊性
所謂層疊性是指多種CSS樣式的疊加缎岗。
樣式?jīng)_突静尼，遵循的原則是就近原則。 那個樣式離著結(jié)構(gòu)近传泊，就執(zhí)行那個樣式CSS繼承性
子標(biāo)簽會繼承父標(biāo)簽的某些樣式鼠渺，如文本顏色和字號(子元素可以繼承父元素的樣式（text-，font-眷细，line-這些元素開頭的可以繼承拦盹，以及color屬性）)。CSS優(yōu)先級（重點）
定義CSS樣式時溪椎，經(jīng)常出現(xiàn)兩個或更多規(guī)則應(yīng)用在同一元素上普舆，此時恬口，選擇器相同，則執(zhí)行層疊性
-
選擇器不同沼侣，就會出現(xiàn)優(yōu)先級的問題祖能。
imageimage
CSS盒子模型
內(nèi)邊距（padding）
padding屬性用于設(shè)置內(nèi)邊距。 是指 邊框與內(nèi)容之間的距離蛾洛。
當(dāng)我們給盒子指定padding值之后养铸， 發(fā)生了2件事情：
內(nèi)容和邊框 有了距離，添加了內(nèi)邊距轧膘。
-
盒子會變大了钞螟。
imageimageimage
外邊距（margin）
margin屬性用于設(shè)置外邊距。 margin就是控制盒子和盒子之間的距離
塊級盒子水平居中
可以讓一個塊級盒子實現(xiàn)水平居中必須：
- 盒子必須指定了寬度（width）
- 然后就給左右的外邊距都設(shè)置為auto谎碍，
header{ width:960px; margin:0 auto;}
文字居中和盒子居中區(qū)別
- 盒子內(nèi)的文字水平居中是 text-align: center, 而且還可以讓 行內(nèi)元素和行內(nèi)塊居中對齊
- 塊級盒子水平居中 左右margin 改為 auto
text-align: center; /* 文字 行內(nèi)元素 行內(nèi)塊元素水平居中 */
margin: 10px auto; /* 塊級盒子水平居中 左右margin 改為 auto 就闊以了 上下margin都可以 */
清除元素的默認(rèn)內(nèi)外邊距(重要)
* {
padding:0; /* 清除內(nèi)邊距 */
margin:0; /* 清除外邊距 */
}
外邊距合并
使用margin定義塊元素的垂直外邊距時鳞滨，可能會出現(xiàn)外邊距的合并。
嵌套塊元素垂直外邊距的合并（塌陷)
- 對于兩個嵌套關(guān)系的塊元素椿浓，如果父元素沒有上內(nèi)邊距及邊框
- 父元素的上外邊距會與子元素的上外邊距發(fā)生合并
- 合并后的外邊距為兩者中的較大者
解決方案：
- 可以為父元素定義上邊框太援。
- 可以為父元素定義上內(nèi)邊距
- 可以為父元素添加overflow:hidden。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width: 300px;
height: 300px;
background-color: greenyellow;
/*border-top: 1px solid transparent;*/
/*padding-top: 1px;*/
overflow: hidden;
}
.son{
width: 100px;
height: 100px;
background-color: blue;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
相鄰塊元素垂直外邊距的合并
- 當(dāng)上下相鄰的兩個塊元素相遇時扳碍，如果上面的元素有下外邊距margin-bottom
- 下面的元素有上外邊距margin-top提岔，則他們之間的垂直間距不是margin-bottom與margin-top之和
- 取兩個值中的較大者這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）。
- 盡量給只給一個盒子添加margin值笋敞。
