收藏
天蓬老師批改狀態(tài)：合格
老師批語：css咱們要重新學(xué)了
css樣式來源
樣式表可能有三種不同的來源：作者、用戶和用戶端。通俗的講，作者就是開發(fā)者，用戶就是使用瀏覽器的人，用戶端就是瀏覽器。
這三種來源的樣式表可能在范圍上有重疊。比如，都設(shè)置了 P 元素的背景色和字體顏色。它們根據(jù)層疊的規(guī)則互相作用。
CSS層疊對每一個樣式規(guī)則指定一個權(quán)重。如果要應(yīng)用若干個規(guī)則，那么權(quán)重最大的那個規(guī)則具有優(yōu)先權(quán)。
缺省時，作者樣式表規(guī)則較用戶樣式表規(guī)則優(yōu)先級高。不過，對于 “!important” 規(guī)則，保留其優(yōu)先級。所有的用戶規(guī)則和作者規(guī)則的權(quán)重都比瀏覽器缺省樣式表中規(guī)則的權(quán)重大。
用戶樣式表是使用瀏覽器的用戶，根據(jù)自己的偏好設(shè)置的樣式表。
用戶端樣式表
來自瀏覽器的樣式，被稱作 UA style，是瀏覽器默認的樣式。 比如，對于 DIV 元素，瀏覽器默認其 ‘display’ 的特性值是 “block”，而 SPAN 是 “inline”。以下user agent就是用戶端樣式表。
或者是打開computed選項卡勾選show all復(fù)選框也可以看到很多默認樣式。
![默認樣式]
作者樣式表
即開發(fā)者在開發(fā)網(wǎng)頁時，所定義的樣式表。
作者樣式表可以分為行內(nèi)樣式，文檔樣式，外部公共樣式。
style屬性實現(xiàn)。譬如：<div style="width:50px;color:yellow">演示行內(nèi)樣式</div><head>標(biāo)簽里面的<style>標(biāo)簽中。
<style>div{color:cyan;font-size:1.5rem;}</style>
外部公共樣式
又稱為外聯(lián)樣式。實際項目中多用這個方法。它只需要在頁面中使用link或者是@import引用即可，可維護性好。而且可用于多個文件。
下面說一下link和@import的區(qū)別。
<link rel="stylesheet" type="text/css" href="/common/css/style.css">@import語法格式務(wù)必寫在style標(biāo)簽中，后直接加文件路徑即可。
@import作用在CSS文件和頁面中，可以在一個CSS文件中引入其他的CSS文件，例如在index.css文件中引入其他CSS文件的樣式，整合在一起后，再在index.html中調(diào)用一次即可，在實際項目中經(jīng)常使用，方便管理和維護。
HTML加載過程：1) 加載HTML-DOM結(jié)構(gòu) 2)CSS和JS 3)圖片和多媒體 4)加載事件觸發(fā)
link和@import都沒有放置順序的要求，但是不同的放置位置可能會造成效果顯示的差異。對于link，無論放到哪個位置，都是一邊加載數(shù)據(jù)，一邊進行優(yōu)化，視覺感受很好；而對于@import，放置到哪里，才從哪里開始加載CSS樣式，即先加載數(shù)據(jù)，然后加載樣式，如果網(wǎng)速不佳，可能會造成只有數(shù)據(jù)出來，而樣式一點點加載的效果。并且在同一個頁面中，調(diào)用兩種方式，link永遠比@import優(yōu)先級高。
在項目中使用的時候，一般在頁面中調(diào)用方式為link，并且放在head標(biāo)簽中；使用@import除了在CSS文件中，在頁面調(diào)用時，一般加載第三方的樣式會使用到，并且需要放置在頁面的底部，不會影響自己的網(wǎng)站。
以上內(nèi)容參考下面博客園文章,特地聲明并感謝作者：
CSS三種引入方式：內(nèi)聯(lián)、頁級、外聯(lián)
css優(yōu)先級沖突的解決方案
這個是選做的作業(yè)。我想做但是放棄了。因為我的理解和表達程度還不足以很好寫好這個作業(yè)。
我推薦幾個文章和課程，包括w3school，還有mdn.
還有幾個優(yōu)秀的博文。一個是本期同學(xué)吾逍遙的系列優(yōu)秀博文之一,他的其他博文一樣值得仔細研讀：
CSS基本概念、層疊規(guī)則和查看技巧
還有就是上述提到的cnblogs優(yōu)秀博文：
CSS三種引入方式：內(nèi)聯(lián)、頁級、外聯(lián)
另外還有完全可以覆蓋本文的前幾年的博客園優(yōu)秀博文：
CSS 層疊及樣式表來源.
我的理解程度還沒有達到他們的水平，所以我也暫時寫不出這么優(yōu)秀的博文。但是讀好他們的博文對于提高css認知非常重要。另外本期預(yù)習(xí)文檔，或者是上面提到的w3school和mdn，對于提高css水平都非常有用。
*
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號