目錄

• WEB前端 CSS
  • CSS引入方式
  • CSS結構
  • CSS選擇器
    • 直接選擇器
    • 組合選擇器
    • 分組選擇器 也叫并集選擇器
    • 屬性選擇器
    • 偽類選擇器
    • 偽元素選擇器
  • CSS選擇器是一個查找的過程，高效的查找影響頁面加載的效率
  • CSS選擇器的優先級
  • CSS聲明
    • CSS非布局聲明
    • CSS布局聲明
  • 除了css 對樣式有影響，標簽元素的其它屬性也會有一些影響。如的type類型

WEB前端 CSS

CSS被用于同時控制多重頁面的樣式和布局樣式很多；關鍵在于布局的耗時和難點通過CSS可以將html中的格式化都剝離出來。

為什么說層疊呢？
簡單說就是：一個元素標簽的樣式css的來源，是可以有很多來源的。把每個來源點抽象看為一個層，每個來源層根據css的標準，是有不同的優先級的。優先級低的在底層，優先級高的在高層。這樣層次堆疊就有了一個從上而下的堆疊模型，或者想象成一個裝修材料層板堆疊在那里。每一層都可以給元素設置任何css屬性，每一層之間可以有相同的屬性。只是，相同的屬性會根據層次的優先級進行覆蓋。可以再次想象從上帝視角，垂直向下看，上層有的會遮擋下層有的，上層沒有的就會看到下層有的。這就是將一個立體的看成一平面視角。這就是層疊的含義了。

至于優先級，內聯高于選擇器(多個選擇器，根據權重排列優先，相同有后覆蓋先)，選擇器高于繼承。
可以說，css這種設計非常優秀的。很多技術都有類似的設計解決多來源的沖突。
了解層疊和css屬性來源，是調試樣式的關鍵。
優點：

大大提升網頁開發的效率

提高網站被搜索引擎收錄，html文件小了。

內容和表現分離

網站表現統一，容易修改；這個很重要，用戶體驗最重要。

博文圖片掛了臨時解決辦法

CSS引入方式

內聯樣式:在HTML元素標簽頭中添加style屬性。

內部樣式表:在HTML的head標簽使用style標簽，包含CSS內容

外部引用:使用外部CSS文件，通常在head中使用link；css文件最好已.css結尾;外部還有一種導入式；

三種引入方式，內聯是優先大于后兩者的。
而后兩者注意其在html代碼中引入的順序；這個順序會影響優先級。相同選擇器權重后引入的優先級高。

一般父級標簽可以影響到子標簽，但是有些則不能，如a鏈接標簽.
在引入方式這里還要提到，引入方式除了內聯，其它都是選擇器。
可以總結一個:標簽css樣式的抽象來源方式有：繼承，選擇器，內聯。只是選擇器有兩種引入方式。

CSS結構

CSS結構都是：選擇器和聲明；

選擇器：selector 選擇出dom節點。匹配選擇器的節點，將獲得該選擇器的聲明（Css樣式）作為一層。至于這一層是優先級，另行判定權重。選擇器原理在很多框架中都得到了應用，如jQuery。選擇器原理可以參考這篇博客

聲明：聲明就是屬性和值是k:v對，多個聲明間使用分號間隔.

css的注釋方式：

/*這是注釋*/ /* html是<!-- --> js是// css是/**/ */

CSS選擇器

站在元素標簽的角度，它被選擇器Selector選中后，元素去選擇排序涉及到自己的選擇器權重順序，并重疊他們，取出想要的。權重高的沒有的屬性，就使用選擇權重低的的樣式。這就是重疊。
其實選擇器的分類，可以站在另一個角度來看待：

• 一類：直接選擇器，通過元素自身的特點的選擇器；標簽選擇器，類，id，屬性。
• 二類：間接選擇器，很多叫組合選擇器；通過自己所處的環境和位置來；由直接選擇器構成，直接選擇器之間存在包含關系或者說父子關系，最后選擇上的是被包含的元素；利用了父元素的選擇來間接通過它們的關系來選擇上元素。如：后代選擇器，兒子選擇器，毗鄰選擇器，弟弟選擇器。
• 三類：分組選擇器，很多叫群組選擇器。就是多個選擇器，無論直接還是間接，它們都是一樣的聲明樣式；為了節約代碼，將他們用逗號間隔。其實質就是放到把選擇器放到一起成為一個組，他們之間沒有任何關聯關系，只是大家都是一樣的聲明樣式，放在一堆而已。
• 四類：交集選擇器，因為一個元素的多個自身特點組合在一起來選擇元素。但是，第一個選擇器必須是標簽選擇器，第二個必須是類選擇器或者id選擇器。如元素有多個類，通過一個類可能選擇不到，就通過多個類一起選擇。也可以想成，一個選擇器選擇的元素和另一個選擇器選擇的元素之間的交集里面的元素。交集選擇器用的還是比較多的。它的構成就是選擇器之間沒有空格。交集還可以是標簽和屬性選擇器交集。
• 五類：偽類和偽元素，不存在的。偽類是元素事件發生時被選擇上所呈現的樣式。為元素是元素的前后虛擬出元素。

小結：選擇器說白了，就是找可能定位元素的各種維度去實現查找。帶到耗子的就是好貓。當你要給一個或者一類元素創建選擇器時，就是考慮怎么查找到他們更準確，就是選擇器類型的選型了。還有種選擇器是用于動態的，就是配合js改變元素，從而改變元素匹配的選擇器，從而改變頁面的布局樣式。這就是js操縱頁面動態的手段之一(也要考慮選擇器優先級)。

直接選擇器

1. 標簽選擇器

選擇器是標簽名：p {}

2. 類選擇器

選擇器是.類名: .red {}
其實類選擇器可以看作是用于標簽繼承的，標簽可以多繼承。
類用來歸類一些列樣式。可以將實現了不同樣式的類應用到元素中。最后多個類進行層疊，得到想要的效果。所以用類的層疊使用是很科學和靈活的。

• 要用“公共類”的思想，將多個標簽相同的樣式，都抽象到一個類中
• 不要試圖使用一個類就將標簽的樣式都寫到這個類中。通過抽象公共部分到一個類中，然后標簽使用多個類。這樣就解除了一定的耦合，即如果元素的樣式都在一個類中，那么類和這個元素之間就是高度耦合的。每個類盡量小，減少了耦合度，這樣就變得非常靈活，把代碼寫活了。

3. ID選擇器

選擇器是#id值： #p2 {}

4. 通用選擇器

* { }
主要用于reset css 重置樣式；如清楚所有盒子的padding和margin；設置百分比高度繼承有效果參考

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline; } html {box-sizing: border-box; }*, *::before, *::after {box-sizing: inherit; }

組合選擇器

是對前三種選擇器進行擴展組合。而inline style是元素標簽內的，嚴格不是選擇器，但是人們便于理解記憶，將其說成內聯選擇器。

標簽選擇器后 跟 標簽

• 后代，無論直屬還是間接： div p {}
• 直屬，直接后代 : div>p {}
• 毗鄰, 后代中最近的一個： div+p {}
• 弟弟，找到和自己同級的標簽： div~p {}
  如： .polaris span img {} 通過多個選擇器好到具體的標簽。

分組選擇器 也叫并集選擇器

如： div,span,img {} 注意使用逗號間隔的，這就是群主選擇器，其實群主選擇器就是將定義相同的放在一起，省代碼

屬性選擇器

根據屬性查找

根據屬性和值查找：=，^=，$=，*=，~=

偽類選擇器

是標簽加上標簽的type類型。如： a:active {} 。

• 偽類選擇器主要用在a標簽
• 對于a標簽：有“love hate" link visited hover active
• 表單的input標簽input輸入框獲取焦點時的樣式：input:focus {}

偽元素選擇器

所謂偽元素選擇器，就是針對一個虛擬的元素，沒有具體的標簽，就是一個標簽的相對位置構建一個默認inline的盒子。所以偽元素選擇器，長得像這樣：p:after {} 這樣。

• 主要有三類：first-letter、before、after
• 其實指定元素的偽元素，這個偽元素是一個相當于是個元素，就是一個盒子，這個盒子是在指定元素盒子的content內，即是指定元素的子元素。before在前面after在后面。
• before和after偽元素要起作用，其選擇器必須有content屬性，即使content時候一個空字符串；沒有content是不會在頁面有任何效果的；
• after多用于一個盒子內，利用它的位置性，即總是在最后，可以給他指定一個clear:both屬性，進行清除浮動。
• 經過試驗：發現first-letter只能用在元素類型是block和inline-block可用。
• 對于after和before在盒子前后添加一個盒子做分隔線還是不錯的。

CSS選擇器是一個查找的過程，高效的查找影響頁面加載的效率

選擇器查找原理

CSS選擇器的優先級

選擇器優先原理參考
一般而言，選擇器越特殊，選擇器指向越準確,優先級越高（所以我們要定義一個選擇器時，要想優先級高不被其它覆蓋，盡量準確）基于基本選擇器的權重進行計算，參考權重值:

組合的選擇器，就根據這個進行計算得出權重值，這里也給個形象的枚舉出所有組合可能之間的權重關系：

還有一些法則：

還有：1. 偽類選擇器、屬性選擇器、類選擇器 權重一樣
2. 標簽選擇器、偽元素標簽選擇器 權重一樣

！important 是作用域屬性，在屬性的值后面加上！important，那么這個屬性所影響到的元素都已這個！important所影響的值。

特別注意：權重比較是按照同類比較，不會去計算和的大小。也就是說同一權重計數是不會進位的。

CSS聲明

就是指定k-v對，也可以說是元素的屬性，影響元素在瀏覽器中的表現。
可以將屬性對樣式產生的影響不同進行分類：
大分類兩種：

CSS非布局聲明

就是和盒子還有布局無關；如字體，顏色等.
text-decoration 文字上通過線裝飾。
background-image:url(xx.png)

CSS布局聲明

見《WEB前端 布局》
關于布局：盒子模型和BFC規則，

除了css 對樣式有影響，標簽元素的其它屬性也會有一些影響。如

• 的type類型

轉載于:https://www.cnblogs.com/ZJiQi/p/9264304.html

總結

以上是生活随笔為你收集整理的WEB前端 CSS(非布局)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。