CSS層疊樣式表
CSS(Cascading Style Sheets) 榴都，通常稱為CSS樣式表或?qū)盈B樣式表（級(jí)聯(lián)樣式表）
作用：
- 主要用于設(shè)置 HTML頁(yè)面中的文本內(nèi)容（字體溪椎、大小台盯、對(duì)齊方式等）立镶、圖片的外形（寬高舔痪、邊框樣式、邊距等）以及版面的布局和外觀顯示樣式铝侵。
- CSS以HTML為基礎(chǔ)闲孤，提供了豐富的功能锉矢，如字體崖叫、顏色巍耗、背景的控制及整體排版等锌介，而且還可以針對(duì)不同的瀏覽器設(shè)置不同的樣式嗜诀。
引入CSS
1、行內(nèi)樣式(內(nèi)聯(lián)樣式)
概念：
稱行內(nèi)樣式孔祸、行間樣式.
是通過標(biāo)簽的style屬性來設(shè)置元素的樣式其基本語(yǔ)法格式如下：
<標(biāo)簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內(nèi)容 </標(biāo)簽名>
實(shí)際上任何HTML標(biāo)簽都擁有style屬性隆敢，用來設(shè)置行內(nèi)式。
<div style="width: 200px; height: 300px; border: red 3px solid">div</div>
- 注意：
- style其實(shí)就是標(biāo)簽的屬性
- 樣式屬性和值中間是
: - 多組屬性值之間用
;隔開崔慧。 - 只能控制當(dāng)前的標(biāo)簽和以及嵌套在其中的字標(biāo)簽拂蝎，造成代碼冗余
- 缺點(diǎn)：
- 沒有實(shí)現(xiàn)樣式和結(jié)構(gòu)相分離
2、內(nèi)部樣式表（內(nèi)嵌樣式表）
- 概念：
稱內(nèi)嵌式
是將CSS代碼集中寫在HTML文檔的head頭部標(biāo)簽中惶室，并且用style標(biāo)簽定義 - 其基本語(yǔ)法格式如下
<head>
<style type="text/CSS">
選擇器（選擇的標(biāo)簽） {
屬性1: 屬性值1;
屬性2: 屬性值2;
屬性3: 屬性值3;
}
</style>
</head>
舉個(gè)栗子
<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)前的頁(yè)面
- 缺點(diǎn)：
沒有徹底分離
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h2 {
color: red;
font-size: 20px;
}
h4 {
color: green;
}
p {
color: blue;
}
</style>
</head>
<body>
<h2>憶江南 唐.白居易</h2>
<p>
江南好,風(fēng)景舊曾諳悼泌。<br/> 日出江花紅勝火，
<br/> 春來江水綠如藍(lán)夹界，
<br/> 能不憶江南馆里。
</p>
<h4>作者介紹</h4>
<p>白居易(772－846) ，字樂天,白居易(772－846) 可柿，字樂天鸠踪，
太原(今屬山西)人。唐德宗朝進(jìn)士复斥，元和三年(808)拜左拾遺营密，后貶江州(今屬江西)司馬，移忠州(今屬四川)刺史目锭，又為蘇州(今屬江蘇)卵贱、同州(今屬陜西大荔)刺史滥沫。晚居洛陽(yáng)，自號(hào)醉吟先生键俱、香山居士兰绣。其詩(shī)政治傾向鮮明，重諷喻编振，尚坦易缀辩，為中唐大家。也是早期詞人中的佼佼者踪央，所作對(duì)后世影響甚大臀玄。
</p>
<h4>注釋</h4>
<p>(1)據(jù)《樂府雜錄》，此詞又名《謝秋娘》畅蹂，系唐李德裕為亡姬謝秋娘作健无。又名《望江南》、 《夢(mèng)江南》等液斜。分單調(diào)累贤、雙調(diào)兩體。單調(diào)二十七字少漆，雙凋五十四字臼膏，皆平韻。(2)諳(音安)：熟悉示损。(3)藍(lán)：藍(lán)草渗磅，其葉可制青綠染料。
</p>
<h4>品評(píng)</h4>
<p>
此詞寫江南春色检访，首句“江南好”始鱼，以一個(gè)既淺切又圓活的“好”字，攝盡江南春色的種種佳處脆贵，而作者的贊頌之意與向往之情也盡寓其中风响。同時(shí)，唯因“好”之已甚丹禀，方能“憶”之不休状勤，因此，此句又已暗逗結(jié)句“能不憶江南”双泪，并與之相關(guān)闔持搜。次句“風(fēng)景舊曾諳”，點(diǎn)明江南風(fēng)景之“好”焙矛，并非得之傳聞葫盼，而是作者出牧杭州時(shí)的親身體驗(yàn)與親身感受。這就既落實(shí)了“好”字村斟，又照應(yīng)了“憶”字贫导，不失為勾通一篇意脈的精彩筆墨抛猫。三、四兩句對(duì)江南之“好”進(jìn)
行形象化的演繹孩灯，突出渲染江花闺金、江水紅綠相映的明艷色彩，給人以光彩奪目的強(qiáng)烈印象峰档。其中败匹，既有同色間的相互烘托，又有異色間的相互映襯讥巡，充分顯示了作者善于著色的技巧掀亩。篇末，以“能不憶江南”收束全詞欢顷，既托出身在洛陽(yáng)的作者對(duì)江南春色的無限贊嘆與懷念槽棍，又造成一種悠遠(yuǎn)而又深長(zhǎng)的韻味，把讀者帶入余情搖漾的境界中抬驴。</p>
</body>
</html>
3炼七、外部樣式表（外鏈?zhǔn)剑?/h3>
- 概念：
稱鏈入式
是將所有的樣式放在一個(gè)或多個(gè)以.CSS為擴(kuò)展名的外部樣式表文件中，
通過link標(biāo)簽將外部樣式表文件鏈接到HTML文檔中
- 其基本語(yǔ)法格式如下：
<head>
<link rel="stylesheet" type="text/css" href="css文件路徑">
</head>
link 是個(gè)單標(biāo)簽
-
link標(biāo)簽需要放在head頭部標(biāo)簽中怎爵，并且指定link標(biāo)簽的三個(gè)屬性
![]()
image
三種樣式總結(jié)
![]()
image
![]()
image
CSS選擇器（重點(diǎn)）
CSS基礎(chǔ)選擇器
標(biāo)簽選擇器
- 概念：
標(biāo)簽選擇器（元素選擇器）是指用HTML標(biāo)簽名稱作為選擇器特石，按標(biāo)簽名稱分類盅蝗，為頁(yè)面中某一類標(biāo)簽指定統(tǒng)一的CSS樣式鳖链。
- 語(yǔ)法：
標(biāo)簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
- 作用：
標(biāo)簽選擇器 可以把某一類標(biāo)簽全部選擇出來 比如所有的div標(biāo)簽 和 所有的 span標(biāo)簽
- 優(yōu)點(diǎn)：
是能快速為頁(yè)面中同類型的標(biāo)簽統(tǒng)一樣式
- 缺點(diǎn)：
不能設(shè)計(jì)差異化樣式
類選擇器
稱鏈入式
是將所有的樣式放在一個(gè)或多個(gè)以.CSS為擴(kuò)展名的外部樣式表文件中，
通過link標(biāo)簽將外部樣式表文件鏈接到HTML文檔中
<head>
<link rel="stylesheet" type="text/css" href="css文件路徑">
</head>
link 是個(gè)單標(biāo)簽
link標(biāo)簽需要放在head頭部標(biāo)簽中怎爵，并且指定link標(biāo)簽的三個(gè)屬性
標(biāo)簽選擇器（元素選擇器）是指用HTML標(biāo)簽名稱作為選擇器特石，按標(biāo)簽名稱分類盅蝗，為頁(yè)面中某一類標(biāo)簽指定統(tǒng)一的CSS樣式鳖链。
標(biāo)簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
標(biāo)簽選擇器 可以把某一類標(biāo)簽全部選擇出來 比如所有的div標(biāo)簽 和 所有的 span標(biāo)簽
是能快速為頁(yè)面中同類型的標(biāo)簽統(tǒng)一樣式
不能設(shè)計(jì)差異化樣式
類選擇器使用“.”（英文點(diǎn)號(hào)）進(jìn)行標(biāo)識(shí)，后面緊跟類名.
- 語(yǔ)法：
- 類名選擇器
.類名 {
屬性1:屬性值1;
屬性2:屬性值2;
屬性3:屬性值3;
}
案例：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
color: green;
}
.mei {
font-size: 100px;
}
</style>
</head>
<body>
<p class="mei">這個(gè)姑娘長(zhǎng)得美</p>
<p>這個(gè)姑娘長(zhǎng)得不太美</p>
</body>
- 優(yōu)點(diǎn)：
- 可以為元素對(duì)象定義單獨(dú)或相同的樣式墩莫。 可以選擇一個(gè)或者多個(gè)標(biāo)簽
- 注意
- 類選擇器使用“.”（英文點(diǎn)號(hào)）進(jìn)行標(biāo)識(shí)芙委，后面緊跟類名(自定義，我們自己命名的)
- 長(zhǎng)名稱或詞組可以使用中橫線來為選擇器命名狂秦。
- 不要純數(shù)字灌侣、中文等命名， 盡量使用英文字母來表示裂问。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/Demo02.css">
<style>
span {
font-size: 140px;
}
.blue{
color: blue;
}
.red{
color: red;
}
.orange{
color: orange;
}
.green{
color: green;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
</html>
類選擇器特殊用法- 多類名
注意：
- 各個(gè)類名中間用空格隔開侧啼。
- 多類名選擇器在后期布局比較復(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)識(shí)痊乾，后面緊跟id名
- 其基本語(yǔ)法格式如下：
- id選擇器
#id名 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
元素的id值是唯一的，只能對(duì)應(yīng)于文檔中某一個(gè)具體的元素椭更。
用法基本和類選擇器相同哪审。
W3C標(biāo)準(zhǔn)規(guī)定，在同一個(gè)頁(yè)面內(nèi)虑瀑，不允許有相同名字的id對(duì)象出現(xiàn)湿滓，但是允許相同名字的class滴须。類選擇器（class） 好比人的名字， 是可以多次重復(fù)使用的叽奥， 比如 張偉 王偉 李偉 李娜
id選擇器 好比人的身份證號(hào)碼扔水， 全中國(guó)是唯一的， 不得重復(fù)而线。 只能使用一次铭污。
類選擇器我們?cè)谛薷臉邮街校玫淖疃唷?/p>
id選擇器一般用于頁(yè)面唯一性的元素身上膀篮，經(jīng)常和我們后面學(xué)習(xí)的javascript 搭配使用
通配符選擇器
- 概念
通配符選擇器用*號(hào)表示嘹狞， * 就是 選擇所有的標(biāo)簽 他是所有選擇器中作用范圍最廣的，能匹配頁(yè)面中所有的元素誓竿。 - 其基本語(yǔ)法格式如下：
* { 屬性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)顯示的字號(hào)大小不一致筷屡，我們盡量給一個(gè)明確值大小涧偷，不要默認(rèn)大小。一般給body指定整個(gè)頁(yè)面文字的大小
1.2 font-family:字體
作用：
font-family屬性用于設(shè)置哪一種字體毙死。網(wǎng)頁(yè)中常用的字體有宋體燎潮、微軟雅黑、黑體等扼倘，例如將網(wǎng)頁(yè)中所有段落文本的字體設(shè)置為微軟雅黑
可以同時(shí)指定多個(gè)字體确封，中間以逗號(hào)隔開，表示如果瀏覽器不支持第一個(gè)字體再菊，則會(huì)嘗試下一個(gè)爪喘，直到找到合適的字體， 如果都沒有纠拔，則以我們電腦默認(rèn)的字體為準(zhǔn)秉剑。
p{ font-family:"微軟雅黑";}
p{font-family: Arial,"Microsoft Yahei", "微軟雅黑";}
1.3 font-weight:字體粗細(xì)
-
在html中如何將字體加粗我們可以用標(biāo)簽來實(shí)現(xiàn)
- 使用 b 和 strong 標(biāo)簽是文本加粗。
-
可以使用CSS 來實(shí)現(xiàn)稠诲，但是CSS 是沒有語(yǔ)義的
image 1.4 font-style:字體風(fēng)格
-
在html中如何將字體傾斜我們可以用標(biāo)簽來實(shí)現(xiàn)
- 字體傾斜除了用 i 和 em 標(biāo)簽侦鹏，
可以使用CSS 來實(shí)現(xiàn)，但是CSS 是沒有語(yǔ)義的
font-style屬性用于定義字體風(fēng)格臀叙，如設(shè)置斜體略水、傾斜或正常字體，其可用屬性值如下：
平時(shí)我們很少給文字加斜體匹耕，反而喜歡給斜體標(biāo)簽（em聚请，i）改為普通模式。
- 1.5 font:綜合設(shè)置字體樣式 (重點(diǎn))
基本語(yǔ)法格式如下：
選擇器 { font: font-style font-weight font-size/line-height font-family;}
注意：
使用font屬性時(shí)，必須按上面語(yǔ)法格式中的順序書寫驶赏，不能更換順序炸卑，各個(gè)屬性以空格隔開。
-
其中不需要設(shè)置的屬性可以省略（取默認(rèn)值）煤傍，但必須保留font-size和font-family屬性盖文，否則font屬性將不起作用。
image
color:文本顏色
作用：
color屬性用于定義文本的顏色蚯姆，-
其取值方式有如下3種：
image我們實(shí)際工作中五续， 用 16進(jìn)制的寫法是最多的，而且我們更喜歡簡(jiǎn)寫方式比如 #f00 代表紅色
