選擇器
<style type="text/css">
1、元素選擇器
作用：通過(guò)元素選擇器可以選擇頁(yè)面中的所有指定元素
語(yǔ)法：標(biāo)簽名{}
eg:p{
color:red;
}
<p>山上有座廟</p>
2、id選擇器(對(duì)于id選擇器來(lái)說(shuō)，不建議使用復(fù)合選擇器)
作用：通過(guò)元素的id屬性值選中唯一的一個(gè)元素
語(yǔ)法：#id屬性值{}
eg:#p1{
font-size: 20px;
}
<p id="p1">從前有座山</p>
3、類(lèi)選擇器
作用：通過(guò)元素的class屬性值選中一組元素
語(yǔ)法：.class屬性值{}
eg：.p2{
font-size: 20px;
color: blue;
}
<p class="p2">長(zhǎng)得真是俏</p>
4、通配選擇器(全選)
作用：可以用來(lái)選中頁(yè)面中的所有的元素
語(yǔ)法：*{}
eg：*{
color: red;
}
5、復(fù)合選擇器（交集選擇器）
作用：可以選中同時(shí)滿足多個(gè)選擇器的元素
語(yǔ)法：選擇器1選擇器2選擇器N{}
eg： span.p3{
background-color: yellow;
}
<span class='p3'>長(zhǎng)得真是俏</span>
6、 我們可以為元素設(shè)置class屬性
它和id屬性類(lèi)似，只不過(guò)class屬性可以重復(fù)
擁有相同class屬性值的元素，我們說(shuō)他們是一組元素
可以同時(shí)為一個(gè)元素設(shè)置多個(gè)class屬性值，多個(gè)值之間使用空格隔開(kāi)
eg:<p class="p2 hello">床前明月光</p>
7、選擇器分組（并集選擇器）
作用：通過(guò)選擇器分組可以同時(shí)選中多個(gè)選擇器對(duì)應(yīng)的元素
語(yǔ)法：選擇器1,選擇器2,選擇器N{}
eg:#p1,.p2,h1{
background-color: yellow;
}
8、子元素和后代元素選擇器
1、后代元素選擇器
作用：選中指定元素的指定后代元素
語(yǔ)法：祖先元素 后代元素{}
2、子元素選擇器
作用：選中指定父元素的指定子元素
語(yǔ)法：父元素 > 子元素
IE6及以下的瀏覽器不支持子元素選擇器
3、元素之間的關(guān)系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或間接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或間接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：擁有相同父元素的元素叫做兄弟元素
eg:為div中的span設(shè)置一個(gè)顏色為綠色
#d1 span{
color: greenyellow;
}
選中id為d1的div中的p元素中的span元素
#d1 p span{
font-size: 50px;
}
為div的子元素span設(shè)置一個(gè)背景顏色為黃色
div > span{
background-color: yellow;
}
<div id="d1">
<span>我是div標(biāo)簽中的span</span>
<p><span>我是p標(biāo)簽中的span</span></p>
</div>
<div>
<span>我是body標(biāo)簽中的span</span>
</div>
9、偽類(lèi)選擇器
偽類(lèi)專(zhuān)門(mén)用來(lái)表示元素的一種特殊的狀態(tài)
比如：訪問(wèn)過(guò)的超鏈接、普通的超鏈接、獲取焦點(diǎn)的文本框
當(dāng)我們需要為處在這些特殊狀態(tài)的元素設(shè)置樣式時(shí)，就可以使用偽類(lèi)
eg: 為沒(méi)訪問(wèn)過(guò)的鏈接設(shè)置一個(gè)顏色為綠色
:link 表示普通的鏈接（沒(méi)訪問(wèn)過(guò)的鏈接）
為訪問(wèn)過(guò)的鏈接設(shè)置一個(gè)顏色為紅色
:visited 表示訪問(wèn)過(guò)的鏈接
瀏覽器是通過(guò)歷史記錄來(lái)判斷一個(gè)鏈接是否訪問(wèn)過(guò)
由于涉及到用戶的隱私問(wèn)題，所以使用:visited偽類(lèi)只能設(shè)置字體的顏色
a:link{
color: yellowgreen;
font-size: 50px;
}
a:visited{
color: red;
}
<a class="abc" >訪問(wèn)過(guò)的鏈接</a>
<br /><br />
<a class="bcd" >沒(méi)訪問(wèn)過(guò)的鏈接</a>
:hover 表示鼠標(biāo)移入的狀態(tài)（光標(biāo)觸摸變藍(lán)）
eg:a:hover{
color: skyblue;
}
:active 表示超鏈接被點(diǎn)擊的狀態(tài)
eg:a:active{
color: black;
}
:hover和:active也可以為其它元素設(shè)置
IE6中，不支持對(duì)超鏈接以外的元素設(shè)置:hover和:active
eg:p:hover{
background-color: gold;
}
p:active{
background-color: orange;
}
文本框獲取焦點(diǎn)以后，修改背景顏色為黃色
使用input可以創(chuàng)建一個(gè)文本輸入框
<input type="text" />
eg:input:focus{
background-color: yellow;
}
為p標(biāo)簽中選中的內(nèi)容使用樣式可以使用::selection偽類(lèi)
注意：這個(gè)偽類(lèi)在火狐中需要采用另一種方式編寫(xiě)
兼容大部分瀏覽器的
eg:p::selection{
background-color: orange;
}
兼容火狐的
eg:p::-moz-selection{
background-color: orange;
}
10、偽元素
使用偽元素來(lái)表示元素中的一些特殊的位置
為p中第一個(gè)字符來(lái)設(shè)置一個(gè)特殊的樣式
eg： p:first-letter{
color: red;
font-size: 20px;
}
為p中的第一行設(shè)置一個(gè)背景顏色為黃色
eg：p:first-line{
background-color: yellow;
}
:before表示元素最前邊的部分
一般它都需要結(jié)合content這個(gè)樣式一起使用
通過(guò)content可以向before或after的位置添加一些內(nèi)容
:after表示元素最后邊的部分
eg：p:before{
content: "我會(huì)出現(xiàn)在整個(gè)段落的最前邊";
color: green;}
p:after{
content: "我會(huì)出現(xiàn)在整個(gè)段落的最后邊";
color: orange;}
11、屬性選擇器
為所有具有title屬性的p元素，設(shè)置一個(gè)背景顏色為黃色
作用：可以根據(jù)元素中的屬性或?qū)傩灾祦?lái)選取指定元素
語(yǔ)法：
[屬性名] 選取含有指定屬性的元素
[屬性名="屬性值"] 選取含有指定屬性值的元素
[屬性名^="屬性值"] 選取屬性值以指定內(nèi)容開(kāi)頭的元素
[屬性名$="屬性值"] 選取屬性值以指定內(nèi)容結(jié)尾的元素
[屬性名*="屬性值"] 選取屬性值包含指定內(nèi)容的元素
eg：p[title]{
background-color: yellow;}
為title屬性值以ab開(kāi)頭的元素設(shè)置一個(gè)背景顏色為黃色
eg：p[title^="ab"]{
background-color: yellow;}
為title屬性值以c結(jié)尾的元素設(shè)置一個(gè)背景顏色
eg：p[title$="c"]{
background-color: yellow;
}
為title屬性值包含c的元素設(shè)置一個(gè)背景顏色
title屬性，這個(gè)屬性可以給任何標(biāo)簽指定
當(dāng)鼠標(biāo)移入到元素上時(shí)，元素中的title屬性的值將會(huì)作為提示文字顯示
eg：p[title*="c"]{
background-color: yellow;
<p title="hello">我是一個(gè)段落</p>
<p>我是一個(gè)段落</p>
<p title="abbc">我是一個(gè)段落</p>
<p title="abccd">我是一個(gè)段落</p>
<p title="abc">我是一個(gè)段落</p>
12、子元素選擇器
為第一個(gè)p標(biāo)簽設(shè)置一個(gè)背景顏色為黃色
:first-child 可以選中第一個(gè)子元素
:last-child 可以選中最后一個(gè)子元素
:nth-child 可以選中任意位置的子元素
該選擇器后邊可以指定一個(gè)參數(shù)，指定要選中第幾個(gè)子元素
even 表示偶數(shù)位置的子元素
odd 表示奇數(shù)位置的子元素
eg：body>p:first-child{
background-color: yellow;
}
p:last-child{
background-color: yellow;
}
p:nth-child(even){
background-color: yellow;
}
:first-of-type
:last-of-type
:nth-of-type
和child類(lèi)似，只不過(guò)child是在所有的子元素中找
而type是在當(dāng)前類(lèi)型的子元素中找
eg：p:first-of-type{
background-color: yellow;
}
p:last-of-type{
background-color: yellow;
}
13、兄弟元素選擇器
為span后的一個(gè)p元素設(shè)置一個(gè)背景顏色為黃色
后一個(gè)兄弟元素選擇器
作用：可以選中一個(gè)元素后緊挨著的指定的兄弟元素
語(yǔ)法：前一個(gè) + 后一個(gè)
eg：span + p{
background-color: yellow;
}
選中后邊的所有兄弟元素
語(yǔ)法：前一個(gè) ~ 后邊所有
eg：span ~ p{
background-color: yellow;
}
14、否定偽類(lèi)
為所有的p元素設(shè)置一個(gè)背景顏色為黃色，除了class值為hello的
作用：可以從已選中的元素中剔除出某些元素
語(yǔ)法：
:not(選擇器)
eg：p:not(.hello){
background-color: yellow;
}
15、樣式的繼承
像兒子可以繼承父親的遺產(chǎn)一樣，在CSS中，祖先元素上的樣式，也會(huì)被他的后代元素所繼承
利用繼承，可以將一些基本的樣式設(shè)置給祖先元素，這樣所有的后代元素將會(huì)自動(dòng)繼承這些樣式
但是，并不是所有的樣式都會(huì)被子元素所繼承，比如：背景、邊框、定位相關(guān)的樣式都不會(huì)被繼承
eg：<div style="background-color: yellow;">
<p>
我是p標(biāo)簽中的文字
<span>我是span中的文字</span>（黃色背景）
</p>
</div>
<span>我是p元素外的span</span>（不會(huì)變黃色背景）
16、選擇器的優(yōu)先級(jí)
當(dāng)使用不同的選擇器，選中同一個(gè)元素時(shí)，并且設(shè)置相同的樣式時(shí)，這時(shí)樣式之間產(chǎn)生了沖突，最終到底采用哪個(gè)選擇器定義的樣式，由選擇器的優(yōu)先級(jí)（權(quán)重）決定，優(yōu)先級(jí)高的優(yōu)先顯示
優(yōu)先級(jí)的規(guī)則
內(nèi)聯(lián)樣式，優(yōu)先級(jí)1000
id選擇器，優(yōu)先級(jí)100
類(lèi)和偽類(lèi)，優(yōu)先級(jí)10
元素選擇器，優(yōu)先級(jí)1
通配*，優(yōu)先級(jí)0
繼承的樣式，沒(méi)有優(yōu)先級(jí)
當(dāng)選擇器中包含多種選擇器時(shí)，需要將多種選擇器的優(yōu)先級(jí)相加，然后再比較
但是注意，選擇器優(yōu)先級(jí)計(jì)算不會(huì)超過(guò)他的最大的數(shù)量級(jí)
如果選擇器的優(yōu)先級(jí)一樣，則使用靠后的樣式并集選擇器的優(yōu)先級(jí)是單獨(dú)計(jì)算的
div, p, #p1, .hello{}
可以在樣式的最后添加一個(gè)!important，則此時(shí)該樣式將會(huì)獲取一個(gè)最高的優(yōu)先級(jí)，將會(huì)優(yōu)先于所有的樣式顯示，甚至超過(guò)內(nèi)聯(lián)樣式，但是在開(kāi)發(fā)中，盡量避免使用!important
eg：.p1{
background-color: yellow;
}
p{
background-color: red;
}
#p2{
background-color: yellowgreen;
}
p#p2{
background-color: red;
}
*{
font-size: 50px;
}
p{
font-size: 30px;
}
.p3{
color: green;
}
.p1{
color: yellow;
background-color: skyblue !important;
}
class="p1 p3" id="p2" style="background-color: orange;">
我是一個(gè)段落
<span>我是p標(biāo)簽中的span</span>
17、a的偽類(lèi)
涉及到a的偽類(lèi)一共有四個(gè)
:link
:visited
:hover
:active
而這四個(gè)選擇器的優(yōu)先級(jí)是一樣的
eg：a:link{
color: yellowgreen;
}
a:visited{
color: red;
}
a:hover{
color: orange;
}
a:active{
color: cornflowerblue;
}
<a >訪問(wèn)過(guò)的鏈接</a>
<br>
<a >未訪問(wèn)過(guò)的鏈接 </a>(光標(biāo)觸摸會(huì)變橙色)
18、文本標(biāo)簽
em和strong這兩個(gè)標(biāo)簽都表示一個(gè)強(qiáng)調(diào)的內(nèi)容
em主要表示語(yǔ)氣上的強(qiáng)調(diào)，在瀏覽器中默認(rèn)使用斜體顯示
strong表示強(qiáng)調(diào)的內(nèi)容，比em更強(qiáng)烈，默認(rèn)使用粗體顯示
eg：今天天氣<em>真不錯(cuò)</em>！
<strong>
注意：如果你不認(rèn)真上課，你就找不到好工作！
</strong>
i標(biāo)簽中的內(nèi)容會(huì)以斜體顯示
b標(biāo)簽中的內(nèi)容會(huì)以粗體顯示
h5規(guī)范中規(guī)定：對(duì)于不需要著重的內(nèi)容，而是單純的斜體或者是加粗，就可以使用i和b標(biāo)簽
eg：<i>我是i標(biāo)簽中的內(nèi)容</i>
<b>我是b標(biāo)簽中的內(nèi)容</b>
small標(biāo)簽中的內(nèi)容會(huì)比他父元素中的文字要小一些
在H5中使用small標(biāo)簽來(lái)表示一些細(xì)則一類(lèi)的內(nèi)容
比如：合同中的小字，網(wǎng)站的版權(quán)聲明都可以放到small
eg： 我是p標(biāo)簽中的內(nèi)容<small>我是small標(biāo)簽中的內(nèi)容</small>
我是p標(biāo)簽中的內(nèi)容<big>我是big標(biāo)簽中的內(nèi)容</big>
網(wǎng)頁(yè)中所有的加書(shū)名號(hào)的內(nèi)容都可以使用cite標(biāo)簽，表示參考的內(nèi)容，比如：書(shū)名、歌名、話劇名、電影名……
eg：<cite>《三體》</cite>是我最喜歡的一本書(shū)
q標(biāo)簽表示一個(gè)短的引用（行內(nèi)引用），q標(biāo)簽引用的內(nèi)容，瀏覽器會(huì)默認(rèn)加上引號(hào)
eg：子曰：<q>學(xué)而時(shí)習(xí)之，不亦說(shuō)乎！</q>
blockquote標(biāo)簽表示一個(gè)長(zhǎng)引用（塊級(jí)引用）
eg：子曰：<blockquote>有朋自遠(yuǎn)方來(lái)，樂(lè)呵樂(lè)呵！</blockquote>
使用sup標(biāo)簽來(lái)設(shè)置一個(gè)上標(biāo)
eg：<p>2<sup>2</sup></p>
<p>趙薇<sup><a href="#">[1]</a></sup></p>
使用sub標(biāo)簽用來(lái)表示一個(gè)下標(biāo)
eg：<p>H<sub>2</sub>O</p>
使用del標(biāo)簽來(lái)表示一個(gè)刪除的內(nèi)容，會(huì)自動(dòng)添加刪除線
eg：<del>17.75</del><br>
15.54<br>
ins表示一個(gè)插入的內(nèi)容，會(huì)自動(dòng)添加下劃線
eg：郭敬明的個(gè)頭兒真<ins>高啊</ins>！
需要在頁(yè)面中直接編寫(xiě)一些代碼
pre是一個(gè)預(yù)格式標(biāo)簽，會(huì)將代碼中的格式保存，不會(huì)忽略多個(gè)空格及換行
code專(zhuān)門(mén)用來(lái)表示代碼
我們一般結(jié)合使用pre和code來(lái)表示一段代碼
eg：<pre>
<code>
if(True)
print("hello")
</code>
</pre>
19、列表
列表就相當(dāng)于去超市購(gòu)物時(shí)的那個(gè)購(gòu)物清單，在HTML也可以創(chuàng)建列表，在網(wǎng)頁(yè)中一共有三種列表：
1、無(wú)序列表
2、有序列表
3、定義列表
去掉項(xiàng)目符號(hào)
ul{
list-style: none;
}
無(wú)序列表
使用ul標(biāo)簽來(lái)創(chuàng)建一個(gè)無(wú)序列表
使用li在ul中創(chuàng)建一個(gè)一個(gè)的列表項(xiàng)，一個(gè)li就是一個(gè)列表項(xiàng)
通過(guò)type屬性可以修改無(wú)序列表的項(xiàng)目符號(hào)，可選值：
disc：默認(rèn)值，實(shí)心的圓點(diǎn)
square：實(shí)心的方塊
circle：空心的圓圈
注意：默認(rèn)的項(xiàng)目符號(hào)我們一般都不使用
如果需要設(shè)置項(xiàng)目符號(hào)，則可以采用為li設(shè)置背景圖片的方式來(lái)設(shè)置
ul和li都是塊元素
eg：<ul>
<li>西門(mén)大官人</li>
<li>柴大官人</li>
<li>許大官人</li>
<li>唐僧大官人</li>
</ul>
有序列表和無(wú)序列表類(lèi)似，只不過(guò)它使用ol來(lái)代替ul
有序列表使用有序的序號(hào)作為項(xiàng)目符號(hào)
type屬性，可以指定序號(hào)的類(lèi)型，可選值：
1，默認(rèn)值，使用阿拉伯?dāng)?shù)字
a/A，采用小寫(xiě)或大寫(xiě)字母作為序號(hào)
i/I，采用小寫(xiě)或大寫(xiě)的羅馬數(shù)字作為序號(hào)
ol也是塊元素
eg：<ol type="1">
<li>結(jié)構(gòu)</li>
<li>表現(xiàn)</li>
<li>行為</li>
</ol>
列表之間都是可以互相嵌套，可以在無(wú)序列表中放個(gè)有序列表，也可以在有序列表中放一個(gè)無(wú)序列表
eg：<p>菜譜</p>
<ul>
<li>
魚(yú)香肉絲
<ol>
<li>魚(yú)</li>
<li>香</li>
<li>肉絲</li>
</ol>
</li>
<li>
宮保雞丁
<ul>
<li>宮保</li>
<li>雞丁</li>
</ul>
</li>
<li>過(guò)橋茄子</li>
</ul>
定義列表用來(lái)對(duì)一些詞匯或內(nèi)容進(jìn)行定義
使用dl來(lái)創(chuàng)建一個(gè)定義列表，它有兩個(gè)子標(biāo)簽
dt：被定義的內(nèi)容
dd：對(duì)定義內(nèi)容的描述
同樣，dl、ul、ol之間都可以互相嵌套
eg：<dl>
<dt>武松</dt>
<dd>景陽(yáng)岡打虎英雄，戰(zhàn)斗力99</dd>
<dd>后打死西門(mén)慶，投奔梁山</dd>
<dt>武大</dt>
<dd>著名餐飲企業(yè)家，戰(zhàn)斗力0</dd>
</dl>
20、單位
長(zhǎng)度單位
像素px
- 像素是我們?cè)诰W(wǎng)頁(yè)中使用得最多的一個(gè)單位
一個(gè)像素就相當(dāng)于屏幕中的一個(gè)小點(diǎn)
我們的屏幕實(shí)際上就是由這些像素點(diǎn)構(gòu)成的
但是這些像素點(diǎn)是不能直接看見(jiàn)的
- 不同顯示器一個(gè)像素的大小也不相同
顯示效果越好、越清晰，像素就越小，反之像素越大
百分比%
- 也可以將單位設(shè)置為一個(gè)百分比的形式
這樣瀏覽器將會(huì)根據(jù)其父元素的樣式來(lái)計(jì)算該值
- 使用百分比的好處是，當(dāng)父元素的屬性值發(fā)生變化時(shí)，子元素也會(huì)按照比例發(fā)生改變
- 在我們創(chuàng)建一個(gè)自適應(yīng)的頁(yè)面時(shí)，經(jīng)常使用百分比作為單位
em
- em和百分比類(lèi)似，它是相對(duì)于當(dāng)前元素的字體大小來(lái)計(jì)算的
- 1em = 1font-size
- 使用em時(shí)，當(dāng)字體大小發(fā)生改變時(shí)，em也會(huì)隨之改變
- 當(dāng)設(shè)置字體相關(guān)的樣式時(shí)，經(jīng)常會(huì)使用em
eg：
.box{
width: 200px;
height: 200px;
background-color: red;
}
.box1{
font-size: 20px;
width: 2em;
height: 50%;
background-color: yellow;
}
<div class="box">
<div class="box1"></div>
</div>
21、顏色的單位
在CSS可以直接使用顏色的單詞來(lái)表示不同的顏色
紅色：red
藍(lán)色：blue
綠色：green
也可以使用RGB值來(lái)表示不同的顏色
-
所謂的RGB值指的是通過(guò)Red Green Blue三元色，
通過(guò)這三種顏色的不同的濃度，來(lái)表示出不同的顏色- eg：rgb(紅色的濃度,綠色的濃度,藍(lán)色的濃度); - 顏色的濃度需要一個(gè)0-255之間的值，255表示最大，0表示沒(méi)有 - 濃度也可以采用一個(gè)百分?jǐn)?shù)來(lái)設(shè)置，需要一個(gè)0% - 100%之間的數(shù)字
使用百分?jǐn)?shù)最終也會(huì)轉(zhuǎn)換為0-255之間的數(shù)
0%表示0
100%表示255
也可以使用十六進(jìn)制的rgb值來(lái)表示顏色，原理和上邊RGB原理一樣，只不過(guò)使用十六進(jìn)制數(shù)來(lái)代替，使用三組兩位的十六進(jìn)制數(shù)組來(lái)表示一個(gè)顏色，每組表示一個(gè)顏色
第一組表示紅色的濃度，范圍00-ff
第二組表示綠色的濃度，范圍00-ff
第三組表示藍(lán)色的濃度，范圍00-ff
語(yǔ)法：#紅色綠色藍(lán)色
十六進(jìn)制：
0 1 2 3 4 5 6 7 8 9 a b c d e f
00 - ff
00表示沒(méi)有，相當(dāng)于rgb中的0
ff表示最大，相當(dāng)于rgb中255
紅色：#ff0000
像這種兩位兩位重復(fù)的顏色，可以簡(jiǎn)寫(xiě)
比如：#ff0000 可以寫(xiě)成 #f00
#abc #aabbcc
eg：
/*background-color: rgb(161,187,215);*/
/* background-color: rgb(100%,50%,50%); */
/* background-color: #0000ff; */
/*background-color: #00f;*/
/* background-color: #084098; */
22、字體的樣式
.p1{
/*設(shè)置字體顏色，使用color來(lái)設(shè)置文字的顏色*/
color: red;
/*設(shè)置文字的大小，瀏覽器中一般默認(rèn)的文字大小都是16px，font-size設(shè)置的并不是文字本身，實(shí)際上是設(shè)置格的高度，一般情況下文字都要比這個(gè)格要小一些，也有時(shí)會(huì)比格大，根據(jù)字體的不同，顯示效果也不同*/
font-size: 30px;
/*通過(guò)font-family可以指定文字的字體，當(dāng)采用某種字體時(shí)，如果瀏覽器支持則使用該字體，如果字體不支持，則使用默認(rèn)字體，該樣式可以同時(shí)指定多個(gè)字體，多個(gè)字體之間使用“,”分開(kāi)，當(dāng)采用多個(gè)字體時(shí)，瀏覽器會(huì)優(yōu)先使用前邊的字體，如果前邊沒(méi)有，再嘗試下一個(gè)*/
/*font-family: arial, 微軟雅黑;*/
/*瀏覽器使用的字體默認(rèn)就是計(jì)算機(jī)中的字體，如果計(jì)算機(jī)中有，則使用，如果沒(méi)有就不用，在開(kāi)發(fā)中，如果字體太奇怪，用的人太少了，盡量不要使用，有可能用戶的電腦沒(méi)有，就不能達(dá)到想要的效果*/
/*font-family: 華文彩云, arial, 微軟雅黑;*/
font-family: "Segoe Script";
}
<p class="p1">
我是一個(gè)p標(biāo)簽，ABCDEFGabcdefg
</p>
23、字體的分類(lèi)
p{
font-family: arial, 微軟雅黑, 華文彩云, serif;
}
在網(wǎng)頁(yè)中將字體分成5大類(lèi)：
serif（襯線字體）
sans-serif（非襯線字體）
monospace （等寬字體）
cursive （草書(shū)字體）
fantasy （虛幻字體）
可以將字體設(shè)置為這些大的分類(lèi)，瀏覽器會(huì)自動(dòng)選擇指定的字體，并應(yīng)用樣式
一般會(huì)將字體的大分類(lèi)，指定為font-family中的最后一個(gè)字體
eg;<p style="font-size: 50px; font-family: serif;">襯線字體：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: sans-serif;">非襯線字體：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: monospace;">等寬字體：我是一段文字，IHABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: cursive;">草書(shū)字體：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: fantasy;">虛幻字體：我是一段文字，ABCDEFGabcdefg</p>
24、字體的其它樣式
font-style可以用來(lái)設(shè)置文字的斜體
- 可選值：
normal 默認(rèn)值，文字正常顯示
italic 文字會(huì)以斜體顯示
oblique 文字會(huì)以傾斜的效果顯示
- 大部分瀏覽器都不會(huì)對(duì)傾斜和斜體做區(qū)分，也就是說(shuō)我們?cè)O(shè)置italic和oblique效果是一樣的
- 一般我們只會(huì)使用italic
font-weight可以用來(lái)設(shè)置文本的加粗效果
- 可選值：
normal 默認(rèn)值，文字正常顯示
bold 文字加粗顯示
該樣式也可以指定100-900之間的9個(gè)值
但是由于用戶的計(jì)算機(jī)往往沒(méi)有這么多級(jí)別的字體，所以200有可能比100粗，但也有可能是一樣的
font-variant可以用來(lái)設(shè)置小型大寫(xiě)字母
- 可選值：
normal 默認(rèn)值，文字正常顯示
small-caps 文本以小型大寫(xiě)字母顯示
小型大寫(xiě)字母：
將所有的字母都以大寫(xiě)形式顯示，但是小寫(xiě)字母的小型大寫(xiě)，要比大寫(xiě)字母小一些
.eg：p2{
/*設(shè)置一個(gè)文字大小*/
font-size: 50px;
/*設(shè)置一個(gè)字體*/
font-family: 華文彩云;
/*設(shè)置文字斜體*/
font-style: italic;
/*設(shè)置文字加粗*/
font-weight: bold;
/*設(shè)置一個(gè)小型大寫(xiě)字母*/
font-variant: small-caps;}
在CSS中還為我們提供了一個(gè)樣式叫font，使用該樣式可以同時(shí)設(shè)置字體相關(guān)的所有樣式
可以將字體的樣式值統(tǒng)一寫(xiě)在font樣式中，不同的值之間使用空格隔開(kāi)
使用font設(shè)置字體樣式時(shí)，斜體 加粗 小大字母，沒(méi)有順序要求，甚至可寫(xiě)可不寫(xiě)，如果不寫(xiě)則使用默認(rèn)值
但是要求文字的大小和字體必須寫(xiě)，而且字體必須是最后一個(gè)樣式，大小必須是倒數(shù)第二個(gè)樣式
實(shí)際上使用簡(jiǎn)寫(xiě)屬性也會(huì)有一個(gè)比較好的性能
eg：.p3{
font: bold italic small-caps 60px "微軟雅黑";
}
<p class="p1">我是一段文字，ABCDEFGabcdefg</p>
<p class="p2">我是一段文字，ABCDEFGabcdefg</p>
<p class="p3">我是一段文字，ABCDEFGabcdefg</p>
25、行間距
在CSS中并沒(méi)有直接提供設(shè)置行間距的方式，我們只能通過(guò)設(shè)置行高來(lái)間接的設(shè)置，行高越大行間距越大
使用line-height來(lái)設(shè)置行高
行高類(lèi)似于我們上學(xué)用的單線本，單線本是一行一行的，線與線之間的距離就是行高
網(wǎng)頁(yè)中的文字實(shí)際上也是寫(xiě)在一個(gè)看不見(jiàn)的線中的，而文字會(huì)默認(rèn)在行高中垂直居中顯示
行間距 = 行高 - 字體大小
通過(guò)設(shè)置line-height可以間接的設(shè)置行高
可以接收的值：
1.直接接收一個(gè)大小
2.可以指定一個(gè)百分?jǐn)?shù)，則會(huì)相對(duì)于字體去計(jì)算行高
3.可以直接傳一個(gè)數(shù)值，則行高會(huì)設(shè)置字體大小相應(yīng)的倍數(shù)
eg：.p1{
line-height: 1;
font-size: 20px;}
對(duì)于單行文本來(lái)說(shuō)，可以將行高設(shè)置為和父元素的高度一致，這樣可以是單行文本在父元素中垂直居中
eg：.box{
line-height: 200px;}
在font中也可以指定行高
在字體大小后可以添加/行高，來(lái)指定行高，該值是可選的，如果不指定則會(huì)使用默認(rèn)值
eg：.p2{
line-height: 50px;
font: 30px "微軟雅黑";}
<div class="box">
<a href="#">我是一個(gè)超鏈接</a>
</div>
<p class="p2">
在我的后園，可以看見(jiàn)墻外有兩株樹(shù)，一株是棗樹(shù)，還有一株也是棗樹(shù)。
<p class="p1">
在我的后園，可以看見(jiàn)墻外有兩株樹(shù)，一株是棗樹(shù)，還有一株也是棗樹(shù)。 這上面的夜的天空，
</p>
26、文本的樣式
text-transform可以用來(lái)設(shè)置文本的大小寫(xiě)
可選值：
none 默認(rèn)值，該怎么顯示就怎么顯示，不做任何處理
capitalize 單詞的首字母大寫(xiě)，通過(guò)空格來(lái)識(shí)別單詞
uppercase 所有的字母都大寫(xiě)
lowercase 所有的字母都小寫(xiě)
eg：.p1{
text-transform: lowercase;}
text-decoration可以用來(lái)設(shè)置文本的修飾
可選值：
none：默認(rèn)值，不添加任何修飾，正常顯示
underline 為文本添加下劃線
overline 為文本添加上劃線
line-through 為文本添加刪除線
eg:.p2{
text-decoration: line-through;}
超鏈接會(huì)默認(rèn)添加下劃線，也就是超鏈接的text-decoration的默認(rèn)值是underline
如果需要去除超鏈接的下劃線則需要將該樣式設(shè)置為none
eg:a{
text-decoration: none;}
letter-spacing可以指定字符間距/
/letter-spacing: 10px;/
/word-spacing可以設(shè)置單詞之間的距離，實(shí)際上就是設(shè)置詞與詞之間空格的大小
eg:.p3{
word-spacing: 100px;}
text-align用于設(shè)置文本的對(duì)齊方式
可選值：
left 默認(rèn)值，文本靠左對(duì)齊
right 文本靠右對(duì)齊
center 文本居中對(duì)齊
justify 兩端對(duì)齊
-
通過(guò)調(diào)整文本之間的空格的大小，來(lái)達(dá)到一個(gè)兩端對(duì)齊的目的
eg:.p4{ text-align: justify; }
text-indent用來(lái)設(shè)置首行縮進(jìn)
這個(gè)值一般都會(huì)使用em作為單位
當(dāng)給它指定一個(gè)正值時(shí)，會(huì)自動(dòng)向右側(cè)縮進(jìn)指定的像素
如果為它指定一個(gè)負(fù)值，則會(huì)向左移動(dòng)指定的像素
通過(guò)這種方式可以將一些不想顯示的文字隱藏起來(lái)
eg:.p5{
font-size: 20px;
text-indent: -99999px;}
<p class="p5">
在我的后園，可以看見(jiàn)墻外有兩株樹(shù)，一株是棗樹(shù)，還有一株也是棗樹(shù)。
</p>
<h1 class="p4">我是一個(gè)h1</h1>
<p class="p4">
在 我的后園，可以看見(jiàn)墻外有兩株樹(shù)，一株是棗樹(shù)，還有一株也是棗樹(shù)。
</p>
<p class="p4">
“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.”
</p>
<p class="p3">
在 我的后園，可以看見(jiàn)墻外有兩株樹(shù)，一株是棗樹(shù)，還有一株也是棗樹(shù)。 這上面的夜的天空，
</p>
<p class="p3">
“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.”
</p>
<a href="#">我是超鏈接</a>
<p class="p2">
“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.”
</p>
<p class="p1">
“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.” “Do the dead frighten you?”
</p>
