選擇器的優(yōu)先級(jí)
優(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í)
a的偽類
涉及到a的偽類一共有四個(gè)
:link
:visited
:hover
:active
而這四個(gè)選擇器的優(yōu)先級(jí)是一樣的
a:link{
color: black;
}
a:visited{
color: red;
}
a:hover{
color: white;
}
a:active{
color: cornflowerblue;
}
文本標(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)使用粗體顯示
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)簽中的內(nèi)容會(huì)比他父元素中的文字要小一些
在H5中使用small標(biāo)簽來表示一些細(xì)則一類的內(nèi)容
比如：合同中的小字，網(wǎng)站的版權(quán)聲明都可以放到small
<!-- 使用sup標(biāo)簽來設(shè)置一個(gè)上標(biāo) -->
<p>2<sup>2</sup></p>
<p>趙薇<sup><a href="#">[1]</a></sup></p>
<!-- 使用sub標(biāo)簽用來表示一個(gè)下標(biāo) -->
<p>H<sub>2</sub>O</p>
<!-- 使用del標(biāo)簽來表示一個(gè)刪除的內(nèi)容，會(huì)自動(dòng)添加刪除線 -->
<p>
<del>17.75</del><br>
<!-- ins表示一個(gè)插入的內(nèi)容，會(huì)自動(dòng)添加下劃線 -->
<p>
郭敬明的個(gè)頭兒真<ins>高啊</ins>！
</p>
列表
去掉項(xiàng)目符號(hào)
ul{
list-style: none;
}
列表就相當(dāng)于去超市購(gòu)物時(shí)的那個(gè)購(gòu)物清單，在HTML也可以創(chuàng)建列表，在網(wǎng)頁(yè)中一共有三種列表：
1、無(wú)序列表
2、有序列表
3、定義列表
無(wú)序列表
使用ul標(biāo)簽來創(chuàng)建一個(gè)無(wú)序列表
使用li在ul中創(chuàng)建一個(gè)一個(gè)的列表項(xiàng)，一個(gè)li就是一個(gè)列表項(xiàng)
通過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è)置背景圖片的方式來設(shè)置
ul和li都是塊元素
有序列表和無(wú)序列表類似，只不過它使用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也是塊元素
列表之間都是可以互相嵌套，可以在無(wú)序列表中放個(gè)有序列表，也可以在有序列表中放一個(gè)無(wú)序列表
定義列表用來對(duì)一些詞匯或內(nèi)容進(jìn)行定義
使用dl來創(chuàng)建一個(gè)定義列表，它有兩個(gè)子標(biāo)簽
dt：被定義的內(nèi)容
dd：對(duì)定義內(nèi)容的描述
同樣，dl、ul、ol之間都可以互相嵌套
單位
長(zhǎng)度單位
像素px
- 像素是我們?cè)诰W(wǎng)頁(yè)中使用得最多的一個(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)的頁(yè)面時(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
* 語(yǔ)法：#紅色綠色藍(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
字體的樣式
/*設(shè)置字體顏色，使用color來設(shè)置文字的顏色*/
color: red;
/*設(shè)置文字的大小，瀏覽器中一般默認(rèn)的文字大小都是16px，font-size設(shè)置的并不是文字本身的大小，在頁(yè)面中，每個(gè)文字都是處在一個(gè)看不見的框中的，我們?cè)O(shè)置的font-size實(shí)際上是設(shè)置格的高度，并不是字體的大小，一般情況下文字都要比這個(gè)格要小一些，也有時(shí)會(huì)比格大，根據(jù)字體的不同，顯示效果也不同*/
font-size: 30px;
/*
通過font-family可以指定文字的字體
當(dāng)采用某種字體時(shí)，如果瀏覽器支持則使用該字體，如果字體不支持，則使用默認(rèn)字體
該樣式可以同時(shí)指定多個(gè)字體，多個(gè)字體之間使用“,”分開
當(dāng)采用多個(gè)字體時(shí)，瀏覽器會(huì)優(yōu)先使用前邊的字體，如果前邊沒有，再嘗試下一個(gè)
*/
/*font-family: arial, 微軟雅黑;*/
/*
瀏覽器使用的字體默認(rèn)就是計(jì)算機(jī)中的字體，如果計(jì)算機(jī)中有，則使用，如果沒有就不用
在開發(fā)中，如果字體太奇怪，用的人太少了，盡量不要使用，有可能用戶的電腦沒有，就不能達(dá)到想要的效果
*/
/*font-family: 華文彩云, arial, 微軟雅黑;*/
font-family: "Segoe Script";
字體的分類
在網(wǎng)頁(yè)中將字體分成5大類：
serif（襯線字體）
sans-serif（非襯線字體）
monospace （等寬字體）
cursive （草書字體）
fantasy （虛幻字體）
可以將字體設(shè)置為這些大的分類，瀏覽器會(huì)自動(dòng)選擇指定的字體，并應(yīng)用樣式
一般會(huì)將字體的大分類，指定為font-family中的最后一個(gè)字體
<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;">草書字體：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: fantasy;">虛幻字體：我是一段文字，ABCDEFGabcdefg</p>
字體的其他樣式
font-style可以用來設(shè)置文字的斜體
- 可選值：
normal 默認(rèn)值，文字正常顯示
italic 文字會(huì)以斜體顯示
oblique 文字會(huì)以傾斜的效果顯示
- 大部分瀏覽器都不會(huì)對(duì)傾斜和斜體做區(qū)分，也就是說我們?cè)O(shè)置italic和oblique效果是一樣的
- 一般我們只會(huì)使用italic ? ? ? ? ?font-style: italic;
font-weight可以用來設(shè)置文本的加粗效果
- 可選值：
normal 默認(rèn)值，文字正常顯示
bold 文字加粗顯示
該樣式也可以指定100-900之間的9個(gè)值
但是由于用戶的計(jì)算機(jī)往往沒有這么多級(jí)別的字體，所以200有可能比100粗，但也有可能是一樣的
font-weight: bold;
font-variant可以用來設(shè)置小型大寫字母
- 可選值：
normal 默認(rèn)值，文字正常顯示
small-caps 文本以小型大寫字母顯示
小型大寫字母：
將所有的字母都以大寫形式顯示，但是小寫字母的小型大寫，要比大寫字母小一些
font-variant: small-caps;
/*設(shè)置一個(gè)文字大小*/
font-size: 50px;
/*設(shè)置一個(gè)字體*/
font-family: 華文彩云;
/*設(shè)置文字斜體*/
font-style: italic;
/*設(shè)置文字加粗*/
font-weight: bold;
/*設(shè)置一個(gè)小型大寫字母*/
font-variant: small-caps;
在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)頁(yè)中的文字實(shí)際上也是寫在一個(gè)看不見的線中的，而文字會(huì)默認(rèn)在行高中垂直居中顯示
行間距 = 行高 - 字體大小
通過設(shè)置line-height可以間接的設(shè)置行高
可以接收的值：
1.直接接收一個(gè)大小
2.可以指定一個(gè)百分?jǐn)?shù)，則會(huì)相對(duì)于字體去計(jì)算行高
3.可以直接傳一個(gè)數(shù)值，則行高會(huì)設(shè)置字體大小相應(yīng)的倍數(shù)
文本的樣式
text-transform可以用來設(shè)置文本的大小寫
可選值：
none 默認(rèn)值，該怎么顯示就怎么顯示，不做任何處理
capitalize 單詞的首字母大寫，通過空格來識(shí)別單詞
uppercase 所有的字母都大寫
lowercase 所有的字母都小寫
例如：text-transform: lowercase;
text-decoration可以用來設(shè)置文本的修飾
可選值：
none：默認(rèn)值，不添加任何修飾，正常顯示
underline 為文本添加下劃線
overline 為文本添加上劃線
line-through 為文本添加刪除線
例如：text-decoration: line-through;
超鏈接會(huì)默認(rèn)添加下劃線，也就是超鏈接的text-decoration的默認(rèn)值是underline
如果需要去除超鏈接的下劃線則需要將該樣式設(shè)置為none*/
text-decoration: none;
/*letter-spacing可以指定字符間距*/
/*letter-spacing: 10px;*/
/*word-spacing可以設(shè)置單詞之間的距離，實(shí)際上就是設(shè)置詞與詞之間空格的大小*/
word-spacing: 100px;
text-align用于設(shè)置文本的對(duì)齊方式
可選值：
left 默認(rèn)值，文本靠左對(duì)齊
right 文本靠右對(duì)齊
center 文本居中對(duì)齊
justify 兩端對(duì)齊
- 通過調(diào)整文本之間的空格的大小，來達(dá)到一個(gè)兩端對(duì)齊的目的
text-align: justify;
font-size: 20px;
/*
text-indent用來設(shè)置首行縮進(jìn)
這個(gè)值一般都會(huì)使用em作為單位
當(dāng)給它指定一個(gè)正值時(shí)，會(huì)自動(dòng)向右側(cè)縮進(jìn)指定的像素
如果為它指定一個(gè)負(fù)值，則會(huì)向左移動(dòng)指定的像素
通過這種方式可以將一些不想顯示的文字隱藏起來
text-indent: -99999px;
