溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關html標簽屬性和css屬性的優先級哪個比較高的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
html標簽屬性和css屬性相比，css屬性的優先級高。原因：W3C標準提倡使用CSS樣式，提倡用CSS樣式代替HTML標簽屬性；網頁制作標準是標簽跟樣式分離；且在標簽屬性里設置樣式，重復使用比較難。
今天在看w3c的CSS教程中的尺寸(Dimension)那一節，進行了如下實驗：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
html {height:100%;}
body {height:100%;}
img.normal {height:auto;}
img.big {height:50%;}
img.small {height:10%;}
</style>
</head>
<body>
<img class="normal" src="/attachments/cover/cover_css.png" width="95" height="84" /><br>
<img class="big" src="/attachments/cover/cover_css.png" width="95" height="84" /><br>
<img class="small" src="/attachments/cover/cover_css.png" width="95" height="84" />
</body>
</html>運行結果如下：
當時令我不解的是，為什么相比于img標簽里的height屬性，反而是內部樣式表中的img的height屬性起了作用，然后就進行了各種的百度搜索。
最終得出了相關結論：
(1) 現在發現當時的我把標簽內的屬性設置和內聯樣式搞混了，所以剛開始才會那么驚訝無法理解，之后嘗試內聯樣式
<img class="big" src="/attachments/cover/cover_css.png" style="width:95px; height:84px" /><br>
實驗結果表明還是內聯樣式的優先級高于內部樣式表。
(2) 重新搞清楚概念后，再觀察會發現其實是內部樣式表的樣式設置優先級高于html標簽屬性的樣式設置，隨后進行了外部樣式表的實驗
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <img src="cover_css.png" width="50px" height="84" /> </body> </html>
發現外部樣式表的優先級也高于img標簽內部的height屬性，由此可知，css的樣式會優先于標簽的屬性。
(3) W3C標準提倡使用CSS樣式，提倡用CSS樣式代替HTML標簽屬性；網頁制作標準是標簽跟樣式分離。因為在標簽屬性里設置，重復使用比較難，個人猜測這可能就是css樣式優先級高于標簽屬性的原因。
(4) 雖然提倡使用CSS樣式，但是W3School中進行了詳細的介紹：“為圖像指定 height 和 width 屬性是一個好習慣。如果設置了這些屬性，就可以在頁面加載時為圖像預留空間。如果沒有這些屬性，瀏覽器就無法了解圖像的尺寸，也就無法為圖像保留合適的空間，因此當圖像加載時，頁面的布局就會發生變化。”
“請不要通過 height 和 width 屬性來縮放圖像。如果通過 height 和 width 屬性來縮小圖像，那么用戶就必須下載大容量的圖像（即使圖像在頁面上看上去很小）。正確的做法是，在網頁上使用圖像之前，應該通過軟件把圖像處理為合適的尺寸。”
“height 和 width 屬性的兩個值可以比實際的尺寸大一些或小一些，瀏覽器會自動調整圖像，使其適應這個預留空間的大小。但需要注意的是：瀏覽器還是必須要下載整個文件，不管它最終顯示的尺寸到底是多大，而且，如果沒有保持其原來的寬度和高度比例，圖像會發生扭曲。
使用 height 和 width 屬性的另外一種技巧，是可以非常容易地實現對頁面區域的填充，同時還可以改善文檔的性能。設想一下，如果你想在文檔中放置一個彩色的橫條。您不需要創建一個具有完整尺寸的圖像，相反，您只要創建一個寬度和高度都為 1 個像素的圖像，并把自己希望使用的顏色賦給它。然后使用 height 和 width 屬性把它擴展到更大的尺寸。”
“如果提供了一個百分比形式的 width 值而忽略了 height，那么不管是放大還是縮小，瀏覽器都將保持圖像的寬高比例（因為不設置height時的默認值為auto自適應）。這意味著圖像的高度與寬度之比將不會發生變化，圖像也就不會發生扭曲。”
就像露兜文章中一個ID為“于江水”的評論：“img 的 alt 屬性是必須的，width 和 height 是推薦的。因為 img 在網頁的加載是要比 p 這些結構慢的，所以往往是結構和文字先加載了，再加載的圖片。這時候，由于瀏覽器預先不知道圖片的尺寸大小，所以無法渲染圖片在網頁中的位置和尺寸。等圖片加載進來之后，再進行渲染，這時候就產生重繪（就是瀏覽器重新計算相關元素的位置，具體表現就是圖片出現了，圖片下面的文字跑到下面了，淘寶的商品介紹頁面，這里非常明顯。）
而帶有 width 和 height 的 img，瀏覽器會計算出來，留空，然后等待圖片加載，避免頁面重繪，提高前端性能和用戶體驗，這里在知乎上多圖的答案可以看出來。
在響應式布局（一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本；這個概念是為解決移動互聯網瀏覽而誕生的）的圖片處理中，應該對 img標簽設置 max-width: 100%; height: auto; 這兩條屬性，才可以保證成比例拉伸。”
1、簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便，適合初學前端開發者使用。 2、可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言采取子類元素的方式，為系統擴展帶來保證。 3、平臺無關性：超級文本標記語言能夠在廣泛的平臺上使用，這也是萬維網盛行的一個原因。 4、通用性：HTML是網絡的通用語言，它允許網頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。
感謝各位的閱讀！關于“html標簽屬性和css屬性的優先級哪個比較高”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
