選擇器的優(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
類和偽類，優(yōu)先級(jí)10
元素選擇器，優(yōu)先級(jí)1
通配*，優(yōu)先級(jí)0
繼承的樣式，沒有優(yōu)先級(jí)
注意：
當(dāng)選擇器中包含多種選擇器時(shí)，需要將多種選擇器的優(yōu)先級(jí)相加，然后再比較
但是注意，選擇器優(yōu)先級(jí)計(jì)算不會(huì)超過他的最大的數(shù)量級(jí)
如果選擇器的優(yōu)先級(jí)一樣，則使用靠后的樣式
并集選擇器的優(yōu)先級(jí)是單獨(dú)計(jì)算的
可以在樣式的最后添加一個(gè)!important，則此時(shí)該樣式將會(huì)獲取一個(gè)最高的優(yōu)先級(jí)，將會(huì)優(yōu)先于所有的樣式顯示，甚至超過內(nèi)聯(lián)樣式，但是在開發(fā)中，盡量避免使用!important
涉及到a的偽類一共有四個(gè)
a:link
a:visited
a:hover
a:active
而這四個(gè)選擇器的優(yōu)先級(jí)是一樣的
文本標(biāo)簽：
em和strong這兩個(gè)標(biāo)簽都表示一個(gè)強(qiáng)調(diào)的內(nèi)容
em：主要表示語氣上的強(qiáng)調(diào)，在瀏覽器中默認(rèn)使用斜體顯示
strong：表示強(qiáng)調(diào)的內(nèi)容，比em更強(qiáng)烈，默認(rèn)使用粗體顯示
i 和 b標(biāo)簽：
i標(biāo)簽中的內(nèi)容會(huì)以斜體顯示
b標(biāo)簽中的內(nèi)容會(huì)以粗體顯示
h5規(guī)范中規(guī)定：對(duì)于不需要著重的內(nèi)容，而是單純的斜體或者是加粗，就可以使用i和b標(biāo)簽
small標(biāo)簽：
small標(biāo)簽中的內(nèi)容會(huì)比他父元素中的文字要小一些
在H5中使用small標(biāo)簽來表示一些細(xì)則一類的內(nèi)容
比如：合同中的小字，網(wǎng)站的版權(quán)聲明都可以放到small
cite標(biāo)簽：
網(wǎng)頁中所有的加書名號(hào)的內(nèi)容都可以使用cite標(biāo)簽，表示參考的內(nèi)容，比如：書名、歌名、話劇名、電影名……
<q>標(biāo)簽：
q標(biāo)簽表示一個(gè)短的引用（行內(nèi)引用），q標(biāo)簽引用的內(nèi)容，瀏覽器會(huì)默認(rèn)加上引號(hào)
<sup>標(biāo)簽：使用sup標(biāo)簽來設(shè)置一個(gè)上標(biāo)
<sub>標(biāo)簽：使用sub標(biāo)簽用來表示一個(gè)下標(biāo)
使用del標(biāo)簽來表示一個(gè)刪除的內(nèi)容，會(huì)自動(dòng)添加刪除線
ins表示一個(gè)插入的內(nèi)容，會(huì)自動(dòng)添加下劃線
? pre 和 code標(biāo)簽：
需要在頁面中直接編寫一些代碼
pre是一個(gè)預(yù)格式標(biāo)簽，會(huì)將代碼中的格式保存，不會(huì)忽略多個(gè)空格及換行
code專門用來表示代碼
我們一般結(jié)合使用pre和code來表示一段代碼
列表：
列表就相當(dāng)于去超市購(gòu)物時(shí)的那個(gè)購(gòu)物清單，在HTML也可以創(chuàng)建列表，在網(wǎng)頁中一共有三種列表：
1、無序列表（<ul> <li></li></ul> ）：
使用ul標(biāo)簽來創(chuàng)建一個(gè)無序列表
使用li在ul中創(chuàng)建一個(gè)一個(gè)的列表項(xiàng)，一個(gè)li就是一個(gè)列表項(xiàng)
通過type屬性可以修改無序列表的項(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è)置背景圖片的方式來設(shè)置
ul和li都是塊元素
2、有序列表（<ol> <li></li></ol>）：
有序列表和無序列表類似，只不過它使用ol來代替ul
有序列表使用有序的序號(hào)作為項(xiàng)目符號(hào)
type屬性，可以指定序號(hào)的類型，可選值：
1，默認(rèn)值，使用阿拉伯?dāng)?shù)字
a/A，采用小寫或大寫字母作為序號(hào)
i/I，采用小寫或大寫的羅馬數(shù)字作為序號(hào)
ol也是塊元素
3、定義列表（dl dt dd）：
定義列表用來對(duì)一些詞匯或內(nèi)容進(jìn)行定義
使用dl來創(chuàng)建一個(gè)定義列表，它有兩個(gè)子標(biāo)簽
dt：被定義的內(nèi)容
dd：對(duì)定義內(nèi)容的描述
同樣，dl、ul、ol之間都可以互相嵌套
注意：列表之間都是可以互相嵌套，可以在無序列表中放個(gè)有序列表，也可以在有序列表中放一個(gè)無序列表
長(zhǎng)度單位：
像素px：
- 像素是我們?cè)诰W(wǎng)頁中使用得最多的一個(gè)單位
一個(gè)像素就相當(dāng)于屏幕中的一個(gè)小點(diǎn)
我們的屏幕實(shí)際上就是由這些像素點(diǎn)構(gòu)成的
但是這些像素點(diǎn)是不能直接看見的
- 不同顯示器一個(gè)像素的大小也不相同
顯示效果越好、越清晰，像素就越小，反之像素越大
百分比%：
- 也可以將單位設(shè)置為一個(gè)百分比的形式
這樣瀏覽器將會(huì)根據(jù)其父元素的樣式來計(jì)算該值
- 使用百分比的好處是，當(dāng)父元素的屬性值發(fā)生變化時(shí)，子元素也會(huì)按照比例發(fā)生改變
- 在我們創(chuàng)建一個(gè)自適應(yīng)的頁面時(shí)，經(jīng)常使用百分比作為單位
em：
- em和百分比類似，它是相對(duì)于當(dāng)前元素的字體大小來計(jì)算的
- 1em = 1font-size
- 使用em時(shí)，當(dāng)字體大小發(fā)生改變時(shí)，em也會(huì)隨之改變
? - 當(dāng)設(shè)置字體相關(guān)的樣式時(shí)，經(jīng)常會(huì)使用em
顏色單位：
在CSS可以直接使用顏色的單詞來表示不同的顏色
*? ? 紅色：red
*? ? 藍(lán)色：blue
*? ? 綠色：green
*? 也可以使用RGB值來表示不同的顏色
*? ?- 所謂的RGB值指的是通過Red Green Blue三元色，
*? ? 通過這三種顏色的不同的濃度，來表示出不同的顏色
*? ? - 例子：rgb(紅色的濃度,綠色的濃度,藍(lán)色的濃度);
*? - 顏色的濃度需要一個(gè)0-255之間的值，255表示最大，0表示沒有
*? - 濃度也可以采用一個(gè)百分?jǐn)?shù)來設(shè)置，需要一個(gè)0% - 100%之間的數(shù)字
*? 使用百分?jǐn)?shù)最終也會(huì)轉(zhuǎn)換為0-255之間的數(shù)
*? 0%表示0
*? 100%表示255
*? 也可以使用十六進(jìn)制的rgb值來表示顏色，原理和上邊RGB原理一樣，只不過使用十六進(jìn)制數(shù)來代替，使用三組兩位的十六進(jìn)制數(shù)組來表示一個(gè)顏色，每組表示一個(gè)顏色
*? 第一組表示紅色的濃度，范圍00-ff
*? 第二組表示綠色的濃度，范圍00-ff
* 第三組表示藍(lán)色的濃度，范圍00-ff
*? 語法：#紅色綠色藍(lán)色
*? ? 十六進(jìn)制：
*? ? 0 1 2 3 4 5 6 7 8 9 a b c d e f
*? ? 00 - ff
*? 00表示沒有，相當(dāng)于rgb中的0
* ff表示最大，相當(dāng)于rgb中255
* 紅色：#ff0000
* 像這種兩位兩位重復(fù)的顏色，可以簡(jiǎn)寫
* 比如：#ff0000 可以寫成 #f00
*? #abc? #aabbcc? ?
字體的樣式：
（1）設(shè)置字體顏色，使用color來設(shè)置文字的顏色
（2）設(shè)置文字的大小，瀏覽器中一般默認(rèn)的文字大小都是16px，font-size設(shè)置的并不是文字本身的大小，在頁面中，每個(gè)文字都是處在一個(gè)看不見的框中的，我們?cè)O(shè)置的font-size實(shí)際上是設(shè)置格的高度，并不是字體的大小，一般情況下文字都要比這個(gè)格要小一些，也有時(shí)會(huì)比格大，根據(jù)字體的不同，顯示效果也不同
（3）通過font-family可以指定文字的字體
當(dāng)采用某種字體時(shí)，如果瀏覽器支持則使用該字體，如果字體不支持，則使用默認(rèn)字體
該樣式可以同時(shí)指定多個(gè)字體，多個(gè)字體之間使用“,”分開
當(dāng)采用多個(gè)字體時(shí)，瀏覽器會(huì)優(yōu)先使用前邊的字體，如果前邊沒有，再嘗試下一個(gè)
注意：瀏覽器使用的字體默認(rèn)就是計(jì)算機(jī)中的字體，如果計(jì)算機(jī)中有，則使用，如果沒有就不用
在開發(fā)中，如果字體太奇怪，用的人太少了，盡量不要使用，有可能用戶的電腦沒有，就不能達(dá)到想要的效果
字體的分類：
在網(wǎng)頁中將字體分成5大類：
serif（襯線字體）
sans-serif（非襯線字體）
monospace （等寬字體）
cursive （草書字體）
fantasy （虛幻字體）
可以將字體設(shè)置為這些大的分類，瀏覽器會(huì)自動(dòng)選擇指定的字體，并應(yīng)用樣式
一般會(huì)將字體的大分類，指定為font-family中的最后一個(gè)字體
字體的其他樣式：
（1）font-style可以用來設(shè)置文字的斜體
- 可選值：
normal 默認(rèn)值，文字正常顯示
italic 文字會(huì)以斜體顯示
oblique 文字會(huì)以傾斜的效果顯示
- 大部分瀏覽器都不會(huì)對(duì)傾斜和斜體做區(qū)分，也就是說我們?cè)O(shè)置italic和oblique效果是一樣的
- 一般我們只會(huì)使用italic
（2）font-weight可以用來設(shè)置文本的加粗效果
- 可選值：
normal 默認(rèn)值，文字正常顯示
bold 文字加粗顯示
該樣式也可以指定100-900之間的9個(gè)值
? 但是由于用戶的計(jì)算機(jī)往往沒有這么多級(jí)別的字體，所以200有可能比100粗，但也有可能是一樣的
（3）font-variant可以用來設(shè)置小型大寫字母
- 可選值：
normal 默認(rèn)值，文字正常顯示
small-caps 文本以小型大寫字母顯示
小型大寫字母：
? 將所有的字母都以大寫形式顯示，但是小寫字母的小型大寫，要比大寫字母小一些
（4）在CSS中還為我們提供了一個(gè)樣式叫font，使用該樣式可以同時(shí)設(shè)置字體相關(guān)的所有樣式
可以將字體的樣式值統(tǒng)一寫在font樣式中，不同的值之間使用空格隔開
使用font設(shè)置字體樣式時(shí)，斜體 加粗 小大字母，沒有順序要求，甚至可寫可不寫，如果不寫則使用默認(rèn)值
但是要求文字的大小和字體必須寫，而且字體必須是最后一個(gè)樣式，大小必須是倒數(shù)第二個(gè)樣式
實(shí)際上使用簡(jiǎn)寫屬性也會(huì)有一個(gè)比較好的性能
font ： bold italic small -- caps 60px “微軟雅黑”
行間距：
在CSS中并沒有直接提供設(shè)置行間距的方式，我們只能通過設(shè)置行高來間接的設(shè)置，行高越大行間距越大
使用line-height來設(shè)置行高
行高類似于我們上學(xué)用的單線本，單線本是一行一行的，線與線之間的距離就是行高
網(wǎng)頁中的文字實(shí)際上也是寫在一個(gè)看不見的線中的，而文字會(huì)默認(rèn)在行高中垂直居中顯示
行間距 = 行高 - 字體大小
對(duì)于單行文本來說，可以將行高設(shè)置為和父元素的高度一致，這樣可以是單行文本在父元素中垂直居中
在font中也可以指定行高
在字體大小后可以添加/行高，來指定行高，該值是可選的，如果不指定則會(huì)使用默認(rèn)值（注意看行高設(shè)置如果放在font的上面，會(huì)被覆蓋）
文本的樣式：
（1）text-transform可以用來設(shè)置文本的大小寫
可選值：
none 默認(rèn)值，該怎么顯示就怎么顯示，不做任何處理
capitalize 單詞的首字母大寫，通過空格來識(shí)別單詞
uppercase 所有的字母都大寫
lowercase 所有的字母都小寫
（2）text-decoration可以用來設(shè)置文本的修飾
可選值：
none：默認(rèn)值，不添加任何修飾，正常顯示
underline 為文本添加下劃線
overline 為文本添加上劃線
line-through 為文本添加刪除線
（3）text-decoration:none；
超鏈接會(huì)默認(rèn)添加下劃線，也就是超鏈接的text-decoration的默認(rèn)值是underline
如果需要去除超鏈接的下劃線則需要將該樣式設(shè)置為none
a:hover{text-decoration:none;}
（4）letter-spacing可以指定字符間距
（5）word-spacing可以設(shè)置單詞之間的距離，實(shí)際上就是設(shè)置詞與詞之間空格的大小
（6）text-align用于設(shè)置文本的對(duì)齊方式
可選值：
left 默認(rèn)值，文本靠左對(duì)齊
right 文本靠右對(duì)齊
center 文本居中對(duì)齊
justify 兩端對(duì)齊
- 通過調(diào)整文本之間的空格的大小，來達(dá)到一個(gè)兩端對(duì)齊的目的
（7）text-indent用來設(shè)置首行縮進(jìn)
這個(gè)值一般都會(huì)使用em作為單位
當(dāng)給它指定一個(gè)正值時(shí)，會(huì)自動(dòng)向右側(cè)縮進(jìn)指定的像素
如果為它指定一個(gè)負(fù)值，則會(huì)向左移動(dòng)指定的像素
通過這種方式可以將一些不想顯示的文字隱藏起來
