WEB前端 CSS(非布局)
目錄
- WEB前端 CSS
- CSS引入方式
- CSS結(jié)構(gòu)
- CSS選擇器
- 直接選擇器
- 組合選擇器
- 分組選擇器 也叫并集選擇器
- 屬性選擇器
- 偽類選擇器
- 偽元素選擇器
- CSS選擇器是一個(gè)查找的過(guò)程，高效的查找影響頁(yè)面加載的效率
- CSS選擇器的優(yōu)先級(jí)
- CSS聲明
- CSS非布局聲明
- CSS布局聲明
- 除了css 對(duì)樣式有影響，標(biāo)簽元素的其它屬性也會(huì)有一些影響。如的type類型
WEB前端 CSS
CSS被用于同時(shí)控制多重頁(yè)面的樣式和布局樣式很多；關(guān)鍵在于布局的耗時(shí)和難點(diǎn)通過(guò)CSS可以將html中的格式化都剝離出來(lái)。
為什么說(shuō)層疊呢？
簡(jiǎn)單說(shuō)就是：一個(gè)元素標(biāo)簽的樣式css的來(lái)源，是可以有很多來(lái)源的。把每個(gè)來(lái)源點(diǎn)抽象看為一個(gè)層，每個(gè)來(lái)源層根據(jù)css的標(biāo)準(zhǔn)，是有不同的優(yōu)先級(jí)的。優(yōu)先級(jí)低的在底層，優(yōu)先級(jí)高的在高層。這樣層次堆疊就有了一個(gè)從上而下的堆疊模型，或者想象成一個(gè)裝修材料層板堆疊在那里。每一層都可以給元素設(shè)置任何css屬性，每一層之間可以有相同的屬性。只是，相同的屬性會(huì)根據(jù)層次的優(yōu)先級(jí)進(jìn)行覆蓋?？梢栽俅蜗胂髲纳系垡暯?#xff0c;垂直向下看，上層有的會(huì)遮擋下層有的，上層沒(méi)有的就會(huì)看到下層有的。這就是將一個(gè)立體的看成一平面視角。這就是層疊的含義了。
至于優(yōu)先級(jí)，內(nèi)聯(lián)高于選擇器(多個(gè)選擇器，根據(jù)權(quán)重排列優(yōu)先，相同有后覆蓋先)，選擇器高于繼承。
可以說(shuō)，css這種設(shè)計(jì)非常優(yōu)秀的。很多技術(shù)都有類似的設(shè)計(jì)解決多來(lái)源的沖突。
了解層疊和css屬性來(lái)源，是調(diào)試樣式的關(guān)鍵。
優(yōu)點(diǎn)：
博文圖片掛了臨時(shí)解決辦法
CSS引入方式
三種引入方式，內(nèi)聯(lián)是優(yōu)先大于后兩者的。
而后兩者注意其在html代碼中引入的順序；這個(gè)順序會(huì)影響優(yōu)先級(jí)。相同選擇器權(quán)重后引入的優(yōu)先級(jí)高。
一般父級(jí)標(biāo)簽可以影響到子標(biāo)簽，但是有些則不能，如a鏈接標(biāo)簽.
在引入方式這里還要提到，引入方式除了內(nèi)聯(lián)，其它都是選擇器。
可以總結(jié)一個(gè):標(biāo)簽css樣式的抽象來(lái)源方式有：繼承，選擇器，內(nèi)聯(lián)。只是選擇器有兩種引入方式。
CSS結(jié)構(gòu)
CSS選擇器
站在元素標(biāo)簽的角度，它被選擇器Selector選中后，元素去選擇排序涉及到自己的選擇器權(quán)重順序，并重疊他們，取出想要的。權(quán)重高的沒(méi)有的屬性，就使用選擇權(quán)重低的的樣式。這就是重疊。
其實(shí)選擇器的分類，可以站在另一個(gè)角度來(lái)看待：
- 一類：直接選擇器，通過(guò)元素自身的特點(diǎn)的選擇器；標(biāo)簽選擇器，類，id，屬性。
- 二類：間接選擇器，很多叫組合選擇器；通過(guò)自己所處的環(huán)境和位置來(lái)；由直接選擇器構(gòu)成，直接選擇器之間存在包含關(guān)系或者說(shuō)父子關(guān)系，最后選擇上的是被包含的元素；利用了父元素的選擇來(lái)間接通過(guò)它們的關(guān)系來(lái)選擇上元素。如：后代選擇器，兒子選擇器，毗鄰選擇器，弟弟選擇器。
- 三類：分組選擇器，很多叫群組選擇器。就是多個(gè)選擇器，無(wú)論直接還是間接，它們都是一樣的聲明樣式；為了節(jié)約代碼，將他們用逗號(hào)間隔。其實(shí)質(zhì)就是放到把選擇器放到一起成為一個(gè)組，他們之間沒(méi)有任何關(guān)聯(lián)關(guān)系，只是大家都是一樣的聲明樣式，放在一堆而已。
- 四類：交集選擇器，因?yàn)橐粋€(gè)元素的多個(gè)自身特點(diǎn)組合在一起來(lái)選擇元素。但是，第一個(gè)選擇器必須是標(biāo)簽選擇器，第二個(gè)必須是類選擇器或者id選擇器。如元素有多個(gè)類，通過(guò)一個(gè)類可能選擇不到，就通過(guò)多個(gè)類一起選擇。也可以想成，一個(gè)選擇器選擇的元素和另一個(gè)選擇器選擇的元素之間的交集里面的元素。交集選擇器用的還是比較多的。它的構(gòu)成就是選擇器之間沒(méi)有空格。交集還可以是標(biāo)簽和屬性選擇器交集。
- 五類：偽類和偽元素，不存在的。偽類是元素事件發(fā)生時(shí)被選擇上所呈現(xiàn)的樣式。為元素是元素的前后虛擬出元素。
小結(jié)：選擇器說(shuō)白了，就是找可能定位元素的各種維度去實(shí)現(xiàn)查找。帶到耗子的就是好貓。當(dāng)你要給一個(gè)或者一類元素創(chuàng)建選擇器時(shí)，就是考慮怎么查找到他們更準(zhǔn)確，就是選擇器類型的選型了。還有種選擇器是用于動(dòng)態(tài)的，就是配合js改變?cè)?#xff0c;從而改變?cè)仄ヅ涞倪x擇器，從而改變頁(yè)面的布局樣式。這就是js操縱頁(yè)面動(dòng)態(tài)的手段之一(也要考慮選擇器優(yōu)先級(jí))。
直接選擇器
1. 標(biāo)簽選擇器
選擇器是標(biāo)簽名：p {}
2. 類選擇器
選擇器是.類名: .red {}
其實(shí)類選擇器可以看作是用于標(biāo)簽繼承的，標(biāo)簽可以多繼承。
類用來(lái)歸類一些列樣式?？梢詫?shí)現(xiàn)了不同樣式的類應(yīng)用到元素中。最后多個(gè)類進(jìn)行層疊，得到想要的效果。所以用類的層疊使用是很科學(xué)和靈活的。
- 要用“公共類”的思想，將多個(gè)標(biāo)簽相同的樣式，都抽象到一個(gè)類中
- 不要試圖使用一個(gè)類就將標(biāo)簽的樣式都寫到這個(gè)類中。通過(guò)抽象公共部分到一個(gè)類中，然后標(biāo)簽使用多個(gè)類。這樣就解除了一定的耦合，即如果元素的樣式都在一個(gè)類中，那么類和這個(gè)元素之間就是高度耦合的。每個(gè)類盡量小，減少了耦合度，這樣就變得非常靈活，把代碼寫活了。
3. ID選擇器
選擇器是#id值： #p2 {}
4. 通用選擇器
* { }
主要用于reset css 重置樣式；如清楚所有盒子的padding和margin；設(shè)置百分比高度繼承有效果參考
組合選擇器
是對(duì)前三種選擇器進(jìn)行擴(kuò)展組合。而inline style是元素標(biāo)簽內(nèi)的，嚴(yán)格不是選擇器，但是人們便于理解記憶，將其說(shuō)成內(nèi)聯(lián)選擇器。
標(biāo)簽選擇器后 跟 標(biāo)簽
- 后代，無(wú)論直屬還是間接： div p {}
- 直屬，直接后代 : div>p {}
- 毗鄰, 后代中最近的一個(gè)： div+p {}
- 弟弟，找到和自己同級(jí)的標(biāo)簽： div~p {}
如： .polaris span img {} 通過(guò)多個(gè)選擇器好到具體的標(biāo)簽。
分組選擇器 也叫并集選擇器
如： div,span,img {} 注意使用逗號(hào)間隔的，這就是群主選擇器，其實(shí)群主選擇器就是將定義相同的放在一起，省代碼
屬性選擇器
偽類選擇器
是標(biāo)簽加上標(biāo)簽的type類型。如： a:active {} 。
- 偽類選擇器主要用在a標(biāo)簽
- 對(duì)于a標(biāo)簽：有“l(fā)ove hate" link visited hover active
- 表單的input標(biāo)簽input輸入框獲取焦點(diǎn)時(shí)的樣式：input:focus {}
偽元素選擇器
所謂偽元素選擇器，就是針對(duì)一個(gè)虛擬的元素，沒(méi)有具體的標(biāo)簽，就是一個(gè)標(biāo)簽的相對(duì)位置構(gòu)建一個(gè)默認(rèn)inline的盒子。所以偽元素選擇器，長(zhǎng)得像這樣：p:after {} 這樣。
- 主要有三類：first-letter、before、after
- 其實(shí)指定元素的偽元素，這個(gè)偽元素是一個(gè)相當(dāng)于是個(gè)元素，就是一個(gè)盒子，這個(gè)盒子是在指定元素盒子的content內(nèi)，即是指定元素的子元素。before在前面after在后面。
- before和after偽元素要起作用，其選擇器必須有content屬性，即使content時(shí)候一個(gè)空字符串；沒(méi)有content是不會(huì)在頁(yè)面有任何效果的；
- after多用于一個(gè)盒子內(nèi)，利用它的位置性，即總是在最后，可以給他指定一個(gè)clear:both屬性，進(jìn)行清除浮動(dòng)。
- 經(jīng)過(guò)試驗(yàn)：發(fā)現(xiàn)first-letter只能用在元素類型是block和inline-block可用。
- 對(duì)于after和before在盒子前后添加一個(gè)盒子做分隔線還是不錯(cuò)的。
CSS選擇器是一個(gè)查找的過(guò)程，高效的查找影響頁(yè)面加載的效率
選擇器查找原理
CSS選擇器的優(yōu)先級(jí)
選擇器優(yōu)先原理參考
一般而言，選擇器越特殊，選擇器指向越準(zhǔn)確,優(yōu)先級(jí)越高（所以我們要定義一個(gè)選擇器時(shí)，要想優(yōu)先級(jí)高不被其它覆蓋，盡量準(zhǔn)確）基于基本選擇器的權(quán)重進(jìn)行計(jì)算，參考權(quán)重值:
組合的選擇器，就根據(jù)這個(gè)進(jìn)行計(jì)算得出權(quán)重值，這里也給個(gè)形象的枚舉出所有組合可能之間的權(quán)重關(guān)系：
還有一些法則：
還有：1. 偽類選擇器、屬性選擇器、類選擇器 權(quán)重一樣
2. 標(biāo)簽選擇器、偽元素標(biāo)簽選擇器 權(quán)重一樣
！important 是作用域?qū)傩?#xff0c;在屬性的值后面加上！important，那么這個(gè)屬性所影響到的元素都已這個(gè)！important所影響的值。
特別注意：權(quán)重比較是按照同類比較，不會(huì)去計(jì)算和的大小。也就是說(shuō)同一權(quán)重計(jì)數(shù)是不會(huì)進(jìn)位的。
CSS聲明
就是指定k-v對(duì)，也可以說(shuō)是元素的屬性，影響元素在瀏覽器中的表現(xiàn)。
可以將屬性對(duì)樣式產(chǎn)生的影響不同進(jìn)行分類：
大分類兩種：
CSS非布局聲明
就是和盒子還有布局無(wú)關(guān)；如字體，顏色等.
text-decoration 文字上通過(guò)線裝飾。
background-image:url(xx.png)
CSS布局聲明
見(jiàn)《WEB前端 布局》
關(guān)于布局：盒子模型和BFC規(guī)則，
除了css 對(duì)樣式有影響，標(biāo)簽元素的其它屬性也會(huì)有一些影響。如
- 的type類型
轉(zhuǎn)載于:https://www.cnblogs.com/ZJiQi/p/9264304.html
總結(jié)
以上是生活随笔為你收集整理的WEB前端 CSS(非布局)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 算法导论第三版第二章答案
- 下一篇： 微信浏览器实现自动下载功能