CSS新特性@layer(層疊樣式表)

如果我們的頁面上存在非常多的樣式，譬如有我們開發(fā)頁面的時候的自定義樣式，也有引入的組件庫樣式。這時候樣式將會非常混亂難以管理。

10年積累的成都網(wǎng)站設計、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設經(jīng)驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你，你也不認識我。但先網(wǎng)站制作后付款的網(wǎng)站建設流程，更有沐川免費網(wǎng)站建設讓你可以放心的選擇與我們合作。

當我們想覆蓋一些本身非我們書寫的樣式時候，往往不得不通過使用優(yōu)先級權(quán)重更高的樣式名，去覆蓋那些樣式。

同時，當樣式優(yōu)先級感到難以控制時，開發(fā)者習慣濫用 !important 去解決，這又循環(huán)導致了后續(xù)更混亂的樣式結(jié)構(gòu)。

基于讓 CSS 得到更好的控制和管理的背景，CSS @layer 應運而生。

CSS Cascade Layers，也叫做CSS級聯(lián)層，是Cascading and Inheritance Level5 規(guī)范中新增了一個新的 CSS 特性。

這樣，我們就創(chuàng)建一個名為 utilities 的 @layer 級聯(lián)層。

@layer規(guī)則可以通過三種方式其一來創(chuàng)建級聯(lián)層。第一種方法如上方代碼所示，它創(chuàng)建了一個塊級的@規(guī)則，其中包含作用于該層內(nèi)部的CSS規(guī)則。

一個級聯(lián)層同樣可以通過 @import 來創(chuàng)建，規(guī)則存在于被引入的樣式表內(nèi)：

你也可以創(chuàng)建帶命名的級聯(lián)層，但不指定任何樣式。例如，單一的命名層：

或者，多個命名層也可以被同時定義。例如：

因此，在上面的例子中，如果 theme 層和 utilities 層中存在沖突的規(guī)則，那么 utilities 層中的將優(yōu)先被應用。

即使 utilities 層中規(guī)則的 優(yōu)先級低于 theme 層中的，該規(guī)則仍會被應用。一旦級聯(lián)層順序建立之后，優(yōu)先級和出現(xiàn)順序都會被忽略。

這將使創(chuàng)建CSS選擇器變得更加簡單，因為你不需要確保每一個選擇器都有足夠高的優(yōu)先級來覆蓋其他沖突的規(guī)則，你只需要確保它們出現(xiàn)在一個順序更靠后的級聯(lián)層中。

級聯(lián)層允許嵌套，例如：

向 layout 層內(nèi)部的 framework 層附加規(guī)則，只需用 . 連接這兩層。

如果創(chuàng)建了一個級聯(lián)層但并未指定名字，例如：

那么則稱為創(chuàng)建了一個匿名層。除創(chuàng)建后無法向其添加規(guī)則外，該層和其他命名層功能一致。

1、使用@layer 塊規(guī)則，并立即為其分配樣式：

2、使用規(guī)則@layer 語句，沒有指定任何樣式：

3、將@import 與layer關鍵字或layer()函數(shù)一起使用

以上每一個都創(chuàng)建了一個名為 的級聯(lián)層reset。

在下面的例子中，我們建立四個級聯(lián)層：reset，base，theme，和utilities。

重復使用級聯(lián)層名稱時，樣式將附加到現(xiàn)有級聯(lián)層。級聯(lián)層的順序保持不變，因為只有第一次的出現(xiàn)已經(jīng)確定順序：

重新使用級聯(lián)層名稱時層順序保持不變的使@layer 語法變得更加方便和嚴謹。使用它，可以預先建立圖層順序，然后將所有 CSS 附加到它：

按以往CSS級聯(lián)來進行分析的話，form input（多層級）的優(yōu)先級會大于input,但是由于級聯(lián)層所起的作用，@layer theme的input會取勝。

級聯(lián)層支持嵌套使用，如下：

在這個例子中有兩個級聯(lián)外層：

base

framework

該framework層本身也包含兩層：

base

theme

如果要將樣式附加到嵌套級聯(lián)層，需要使用以下全名來引用它，

如果第一個@media (min-width: 30em)匹配（基于視口尺寸），則layout級聯(lián)層層將在圖層順序中排在第一位。如果只有@media (prefers-color-scheme: dark)匹配，theme則將是第一層。

如果兩者匹配，則圖層順序?qū)閘ayout, theme。如果沒有匹配，則不定義層。

CSS樣式表的作用及特點

CSS可以很方便的用來控制網(wǎng)頁的外觀。主要有以下特點：

1.可以同時更新多個網(wǎng)頁的樣式。

2.使網(wǎng)頁的表示層與結(jié)構(gòu)層徹底分離

3.大大減小了網(wǎng)頁文件的大下

4.加快了網(wǎng)頁的加載速度

現(xiàn)在用CSS來布局網(wǎng)頁已經(jīng)是一種潮流，如果要向網(wǎng)頁設計方面發(fā)展，必須精通CSS。

CSS三大特性

所謂層疊性是指多種CSS樣式的疊加：

結(jié)果是：.two樣式生效

所謂繼承性是指書寫CSS樣式表時，子標簽會繼承父標簽的某些樣式，如文本顏色和字號。想要設置一個可繼承的屬性，只需將它應用于父元素即可。

與文字有關的屬性都可以，實現(xiàn)繼承:

特殊點：

結(jié)果：a標簽會繼承div的樣式

定義CSS樣式時，經(jīng)常出現(xiàn)兩個或更多規(guī)則應用在同一元素上，這時就會出現(xiàn)優(yōu)先級的問題。

關于CSS權(quán)重，我們需要一套計算公式來計算，這個就是CSS Specificity，我們稱為CSS特性或稱非凡性，它是一個衡量CSS值優(yōu)先級的一個標準。具體規(guī)范如下：

注意：

總結(jié)：

css的特性是什么

1.大大縮減頁面代碼，提高頁面瀏覽速度,縮減帶寬成本;

2.結(jié)構(gòu)清晰，容易被搜索引擎搜索到

3.縮短改版時間。只要簡單的修改幾個CSS文件就可以重新設計一個有成百上千頁面的站點。

4.強大的字體控制和排版能力。CSS控制字體的能力比糟糕的FONT標簽好多了，有了CSS，我們不再需要用FONT標簽或者透明的1 px GIF圖片來控制標題，改變字體顏色，字體樣式等等。

5.CSS非常容易編寫。你可以象寫html代碼一樣輕松地編寫CSS。

6.提高易用性。使用CSS可以結(jié)構(gòu)化HTML。

7.可以一次設計，隨處發(fā)布。

8.更好的控制頁面布局。

CSS樣式的主要特點及其類型

CSS(Cascading Stylesheets，層疊樣式表)是一種制作網(wǎng)頁的新技術(shù)，現(xiàn)在已經(jīng)為大多數(shù)的瀏覽器所支持，成為網(wǎng)頁設計必不可少的工具之一。

層疊樣式表的特點

且不說過去的網(wǎng)頁缺少動感，就是在網(wǎng)頁內(nèi)容的排版布局上也有很多困難，如果不是專業(yè)人員或特別有耐心的人，很難讓網(wǎng)頁按自己的構(gòu)思和創(chuàng)意來顯示信息。即便是掌握了HTML語言精髓的人也要通過多次地測試，才能駕馭好這些信息的排版，過程十分漫長和痛苦。為了Internet的發(fā)展，讓更多人早日踏足這個多姿多彩的世界，新的HTML輔助工具呼之欲出。

樣式表就是在這種需求下誕生的，它首先要做的是為網(wǎng)頁上的元素精確地定位，可以讓網(wǎng)頁設計者象導演一樣，輕易地控制由文字、圖片組成的演員們，在網(wǎng)頁這個舞臺上按劇本要求好好地表演。

其次，它把網(wǎng)頁上的內(nèi)容結(jié)構(gòu)和格式控制相分離。瀏覽者想要看的是網(wǎng)頁上的內(nèi)容結(jié)構(gòu)，而為了讓瀏覽者更好地看到這些信息，就要通過格式控制來幫忙了。以前兩者在網(wǎng)頁上的分布是交錯結(jié)合的，查看修改很不方便，而現(xiàn)在把兩者分開就會大大方便網(wǎng)頁的設計者。內(nèi)容結(jié)構(gòu)和格式控制相分離，使得網(wǎng)頁可以光由內(nèi)容構(gòu)成，而將所有網(wǎng)頁的格式控制指向某個CSS樣式表文件。這樣一來的好出表現(xiàn)在兩個方面:

第一，簡化了網(wǎng)頁的格式代碼，外部的樣式表還會被瀏覽器保存在緩存里，加快了下載顯示的速度，也減少了需要上傳的代碼數(shù)量(因為重復設置的格式將被只保存一次)。

第二，只要修改保存著網(wǎng)站格式的CSS樣式表文件就可以改變整個站點的風格特色，在修改頁面數(shù)量龐大的站點時，顯得格外有用。避免了一個一個網(wǎng)頁的修改，大大減少了重復勞動的工作量，當你面對的是有數(shù)百個網(wǎng)頁的站點時，CSS簡直象是神對我們的恩賜!^_^

添加層疊樣式表的方法

我們?yōu)榫W(wǎng)頁添加樣式表的方法有四種。

1.最簡單的方法是直接添加在HTML的標識符(tag)里:

Tag style=”properties”網(wǎng)頁內(nèi)容 /tag

舉個例子:

p style=”color: blue; font-size: 10pt”CSS實例 /p

代碼說明:

用藍色顯示字體大小為10pt的“CSS實例”。盡管使用簡單、顯示直觀，但是這種方法不怎么常用，因為這樣添加無法完全發(fā)揮樣式表的優(yōu)勢“內(nèi)容結(jié)構(gòu)和格式控制分別保存”。

2.添加在HTML的頭信息標識符 head里:

head

style type=”text/css”

!-- 樣式表的具體內(nèi)容 --

/style

/head

type=”text/css”表示樣式表采用MIME類型，幫助不支持CSS的瀏覽器過濾掉CSS代碼，避免在瀏覽器面前直接以源代碼的方式顯示我們設置的樣式表。但為了保證上述情況一定不要發(fā)生，還是有必要在樣式表里加上注釋標識符“ !--注釋內(nèi)容--”。

3、鏈接樣式表

同樣是添加在HTML的頭信息標識符 head里:

head

link rel=”stylesheet” href=”*.css” type=”text/css” media=”screen”

/head

*.css是單獨保存的樣式表文件，其中不能包含 style標識符，并且只能以css為后綴。

Media是可選的屬性，表示使用樣式表的網(wǎng)頁將用什么媒體輸出。取值范圍:

·Screen(默認):輸出到電腦屏幕

·Print:輸出到打印機

·TV:輸出到電視機

·Projection:輸出到投影儀

·Aural:輸出到揚聲器

·Braille:輸出到凸字觸覺感知設備

·Tty:輸出到電傳打字機

·All:輸出到以上所有設備

如果要輸出到多種媒體，可以用逗號分隔取值表。

Rel屬性表示樣式表將以何種方式與HTML文檔結(jié)合。取值范圍:

·Stylesheet:指定一個外部的樣式表

·Alternate stylesheet:指定使用一個交互樣式表

4、聯(lián)合使用樣式表

同樣是添加在HTML的頭信息標識符 head里:

head

style type=”text/css”

!--

@import “*.css”

其他樣式表的聲明

--

/style

/head

以@import開頭的聯(lián)合樣式表輸入方法和鏈接樣式表的方法很相似，但聯(lián)合樣式表輸入方式更有優(yōu)勢。因為聯(lián)合法可以在鏈接外部樣式表的同時，針對該網(wǎng)頁的具體情況，做出別的網(wǎng)頁不需要的樣式規(guī)則。

需要注意的是:

·聯(lián)合法輸入樣式表必須以@import開頭。

·如果同時輸入多個樣式表有沖突的時候，將按照第一個輸入的樣式表對網(wǎng)頁排版。

·如果輸入的樣式表和網(wǎng)頁里的樣式規(guī)則沖突時，使用外部的樣式表。

css三大特性

一、CSS層疊性

說明

層疊性是多種CSS樣式的疊加，是瀏覽器處理樣式?jīng)_突的方式。在HTML中對于同一個元素可以有多個CSS樣式存在，當有相同權(quán)重的樣式存在時，會根據(jù)這些樣式出現(xiàn)的先后順序來決定，處于最后面的CSS樣式將會覆蓋前面的CSS樣式。

二、CSS繼承性

說明

簡單的理解為—“子承父業(yè)“，是指子標簽會繼承父標簽的==某些==樣式，如文本顏色和字號。想要設置一個可繼承的屬性，只需將它應用于父元素即可。

三、CSS優(yōu)先級

在復雜CSS樣式表，往往并不是相同樣式不同值的堆疊這么簡單，經(jīng)常出現(xiàn)兩個或多個不同樣式規(guī)則應用在同一元素上，這時到底采用哪個樣式呢？這就是典型的CSS優(yōu)先級問題。

處理優(yōu)先級問題，就是考慮樣式權(quán)重的高低。這里先給大家介紹一些特殊的情況：

==繼承樣式的權(quán)重為0。==也就是說，在嵌套結(jié)構(gòu)中，無論父元素樣式權(quán)重多大，子元素繼承時，應用在子元素上的權(quán)重都為0，即子元素定義的樣式會覆蓋所有繼承來的樣式。

==行內(nèi)樣式優(yōu)先。==應用style屬性的元素，其行內(nèi)樣式的權(quán)重非常高，可以理解為遠大于100。總之，他擁有比上面提高的選擇器都大的優(yōu)先級。

權(quán)重相同時，CSS遵循就近原則。也就是說靠近元素的樣式具有最大的優(yōu)先級，或者說排在最后的樣式優(yōu)先級最大。

CSS定義了一個!important命令，該命令被賦予最大的優(yōu)先級。也就是說不管權(quán)重如何以及樣式位置的遠近，!important都具有最大優(yōu)先級。

網(wǎng)站欄目：css樣式表特性,css樣式表的基本語法
本文URL：http://www.chinadenli.net/article44/dseohhe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供關鍵詞優(yōu)化、網(wǎng)站收錄、網(wǎng)站內(nèi)鏈、自適應網(wǎng)站、搜索引擎優(yōu)化、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)