谷歌瀏覽器開發(fā)者工具使用
- 進(jìn)入谷歌瀏覽器后如下圖操作，或者按F12
- 調(diào)整樣式
 - 小箭頭作用：
- styles
css三大特性
繼承性
作用：給父元素設(shè)置一些屬性, 子元素也可以使用, 這個(gè)我們就稱之為繼承性
-
例子：
div{
color: red;
}<div> <p>我是段落</p> </div> <!--p會(huì)變成紅色--> 注意：
并不是所有的屬性都可以繼承, 只有以color/font-/text-/line-開頭的屬性才可以繼承
在CSS的繼承中不僅僅是兒子可以繼承, 只要是后代都可以繼承
繼承性中的特殊性
a標(biāo)簽的文字顏色和下劃線是不能繼承的
h標(biāo)簽的文字大小是不能繼承的
應(yīng)用場景：
一般用于設(shè)置網(wǎng)頁上的一些共性信息, 例如網(wǎng)頁的文字顏色, 字體,文字大小等內(nèi)容
層疊性
作用：
層疊性就是CSS處理沖突的一種能力
層疊性只有在多個(gè)選擇器選中"同一個(gè)標(biāo)簽", 然后又設(shè)置了"相同的屬性", 才會(huì)發(fā)生層疊性
-
例子：
<style>
p{
color: red;
}
.para{
color: blue;
}
</style><p id="identity" class="para">我是段落</p> <!-- 最終顯示藍(lán)色, 因?yàn)榧t色被覆蓋掉了 -->
優(yōu)先級
- 作用：當(dāng)多個(gè)選擇器選中同一個(gè)標(biāo)簽, 并且給同一個(gè)標(biāo)簽設(shè)置相同的屬性時(shí), 如何層疊就由優(yōu)先級來確定
- 優(yōu)先級判斷的三種方式：
- 間接選中就是指繼承：
如果是間接選中, 那么就是誰離目標(biāo)標(biāo)簽比較近就聽誰的 - 相同選擇器(直接選中)：
如果都是直接選中, 并且都是同類型的選擇器, 那么就是誰寫在后面就聽誰的 - 不同選擇器(直接選中)：
如果都是直接選中, 并且不是相同類型的選擇器, 那么就會(huì)按照選擇器的優(yōu)先級來層疊，id>類>標(biāo)簽>通配符>繼承>瀏覽器默認(rèn) - 注意：通配符選擇器也是直接選中
!important
- 作用: 用于提升某個(gè)直接選中標(biāo)簽的選擇器中的某個(gè)屬性的優(yōu)先級的, 可以將被指定的屬性的優(yōu)先級提升為最高
- 注意：
- !important只能用于直接選中, 不能用于間接選中
- 通配符選擇器選中的標(biāo)簽也是直接選中的
- !important只能提升被指定的屬性的優(yōu)先級, 其它的屬性的優(yōu)先級不會(huì)被提升
- !important必須寫在屬性值得分號前面
- !important前面的感嘆號不能省略
優(yōu)先級權(quán)重
- 作用: 當(dāng)多個(gè)選擇器混合在一起使用時(shí), 我們可以通過計(jì)算權(quán)重來判斷誰的優(yōu)先級最高
- 權(quán)重的計(jì)算規(guī)則：
- 1.首先先計(jì)算選擇器中有多少個(gè)id, id多的選擇器優(yōu)先級最高
- 2.如果id的個(gè)數(shù)一樣, 那么再看類名的個(gè)數(shù), 類名個(gè)數(shù)多的優(yōu)先級最高
- 3.如果類名的個(gè)數(shù)一樣, 那么再看標(biāo)簽名稱的個(gè)數(shù), 標(biāo)簽名稱個(gè)數(shù)多的優(yōu)先級最高
- 4.如果id個(gè)數(shù)一樣, 類名個(gè)數(shù)也一樣, 標(biāo)簽名稱個(gè)數(shù)也一樣, 那么就不會(huì)繼續(xù)往下計(jì)算了, 那么此時(shí)誰寫在后面聽誰的。也就是說優(yōu)先級如果一樣, 那么誰寫在后面聽誰的
- 注意：
- 只有選擇器是直接選中標(biāo)簽的才需要計(jì)算權(quán)重, 否則一定會(huì)聽直接選中的選擇器的
Div和Span標(biāo)簽
- div標(biāo)簽
- 作用：一般用于配合css完成網(wǎng)頁的基本布局
- span標(biāo)簽
- 作用：一般用于配合css修改網(wǎng)頁中的一些局部信息
- 例子：
<style>
span{
color: red;
}
</style>
<p>努力到<span>無能為力</span>, 拼搏到<span>感動(dòng)自己</span></p> - 兩者區(qū)別：
- div會(huì)單獨(dú)的占領(lǐng)一行,而span不會(huì)單獨(dú)占領(lǐng)一行
- div是一個(gè)容器級的標(biāo)簽, 而span是一個(gè)文本級的標(biāo)簽
- 容器級的標(biāo)簽和文本級的標(biāo)簽的區(qū)別：
- 容器級的標(biāo)簽中可以嵌套其它所有的標(biāo)簽
- 文本級的標(biāo)簽中只能嵌套文字/圖片/超鏈接
- 常見容器級的標(biāo)簽: div h ul ol dl li dt dd ...
- 常見文本級的標(biāo)簽:span p buis strong em ins del ...
- 注意：
- 不用刻意去記憶哪些標(biāo)簽是文本級的哪些標(biāo)簽是容器級, 在企業(yè)開發(fā)中一般情況下要嵌套都是嵌套在div中, 或者按照組標(biāo)簽來嵌套(ul>li, ol>li , dl>dt+dd)
CSS元素顯示模式
- 在HTML中HTML將所有的標(biāo)簽分為兩類, 分別是容器級和文本級
- 在CSS中CSS也將所有的標(biāo)簽分為兩類, 分別是塊級元素和行內(nèi)元素(其實(shí)還有一類, 行內(nèi)塊級)
- 什么是塊級元素, 什么是行內(nèi)元素:
- 塊級元素會(huì)獨(dú)占一行
- 行內(nèi)元素不會(huì)獨(dú)占一行
- 常見塊級元素: p div h ul ol dl li dt dd
- 常見行內(nèi)元素: span buis strong em ins del
- 兩者區(qū)別：
- 塊級元素：
- 如果沒有設(shè)置寬度, 那么默認(rèn)和父元素一樣寬
- 如果設(shè)置了寬高, 那么就按照設(shè)置的來顯示
- 行內(nèi)元素;
- 不會(huì)獨(dú)占一行
- 如果沒有設(shè)置寬度, 那么默認(rèn)和內(nèi)容一樣寬
- 行內(nèi)元素是不可以設(shè)置寬度和高度的
- 行內(nèi)塊級元素:
- 為了能夠讓元素既能夠不獨(dú)占一行, 又可以設(shè)置寬度和高度, 那么就出現(xiàn)了行內(nèi)塊級元素
- 不獨(dú)占一行, 并且可以設(shè)置寬高
CSS元素顯示模式轉(zhuǎn)換
- 如何轉(zhuǎn)換CSS元素的顯示模式:
- 設(shè)置元素的display屬性
- display取值:
- block 塊級
- inline 行內(nèi)
- inline-block 行內(nèi)塊級
- 快捷鍵
- di display: inline;
- db display: block;
- dib display: inline-block;
