html標籤屬性和css屬性哪個優先權高-前端問答-PHP中文網

首頁

web前端

前端問答

html標籤屬性和css屬性哪個優先權高

青灯夜游

May 21, 2021 pm 02:31 PM

css樣式優先權標籤屬性

html標籤屬性和css屬性相比，css屬性的優先權高。原因：W3C標準提倡使用CSS樣式，提倡用CSS樣式取代HTML標籤屬性，網頁製作標準是標籤跟樣式分離；且在標籤屬性裡設定樣式，重複使用比較難。

html標籤屬性和css屬性哪個優先權高

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

今天在看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 lazy"  src="/static/imghwm/default1.png"  data-src="/attachments/cover/cover_css.png"       style="max-width:90%"  style="max-width:90%" / alt="html標籤屬性和css屬性哪個優先權高" ><br>
<img  class="big lazy"  src="/static/imghwm/default1.png"  data-src="/attachments/cover/cover_css.png"       style="max-width:90%"  style="max-width:90%" / alt="html標籤屬性和css屬性哪個優先權高" ><br>
<img  class="small lazy"  src="/static/imghwm/default1.png"  data-src="/attachments/cover/cover_css.png"       style="max-width:90%"  style="max-width:90%" / alt="html標籤屬性和css屬性哪個優先權高" >
</body>
</html>

運行結果如下：

html標籤屬性和css屬性哪個優先權高
當時令我不解的是，為什麼比起於img標籤裡的height屬性，反而是內部樣式表中的img的height屬性起了作用，然後就進行了各種的百度搜尋。

最終得出了相關結論：
(1) 現在發現當時的我把標籤內的屬性設定和內嵌樣式搞混了，所以剛開始才會那麼驚訝無法理解，之後嘗試內聯樣式

<img  class="big lazy"  src="/static/imghwm/default1.png"  data-src="/attachments/cover/cover_css.png"       style="max-width:90%" / alt="html標籤屬性和css屬性哪個優先權高" ><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="/static/imghwm/default1.png"  data-src="cover_css.png"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="html標籤屬性和css屬性哪個優先權高" >
</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; 這兩個屬性，才可以保證成比例拉伸。 ”

（學習影片分享：css影片教學）

以上是html標籤屬性和css屬性哪個優先權高的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML和React：標記與組件之間的關係Apr 12, 2025 am 12:03 AM

HTML和React的關係是前端開發的核心，它們共同構建現代Web應用的用戶界面。 1)HTML定義內容結構和語義，React通過組件化構建動態界面。 2)React組件使用JSX語法嵌入HTML，實現智能渲染。 3)組件生命週期管理HTML渲染，根據狀態和屬性動態更新。 4)使用組件優化HTML結構，提高可維護性。 5)性能優化包括避免不必要渲染，使用key屬性，保持組件單一職責。

反應與前端：建立互動體驗Apr 11, 2025 am 12:02 AM

React是構建交互式前端體驗的首選工具。 1)React通過組件化和虛擬DOM簡化UI開發。 2)組件分為函數組件和類組件，函數組件更簡潔，類組件提供更多生命週期方法。 3)React的工作原理依賴虛擬DOM和調和算法，提高性能。 4)狀態管理使用useState或this.state，生命週期方法如componentDidMount用於特定邏輯。 5)基本用法包括創建組件和管理狀態，高級用法涉及自定義鉤子和性能優化。 6)常見錯誤包括狀態更新不當和性能問題，調試技巧包括使用ReactDevTools和優

React和前端堆棧：工具和技術Apr 10, 2025 am 09:34 AM

React是一個用於構建用戶界面的JavaScript庫，其核心是組件化和狀態管理。 1)通過組件化和狀態管理簡化UI開發。 2)工作原理包括調和和渲染，優化可通過React.memo和useMemo實現。 3)基本用法是創建並渲染組件，高級用法包括使用Hooks和ContextAPI。 4)常見錯誤如狀態更新不當，可使用ReactDevTools調試。 5)性能優化包括使用React.memo、虛擬化列表和CodeSplitting，保持代碼可讀性和可維護性是最佳實踐。

React在HTML中的作用：增強用戶體驗Apr 09, 2025 am 12:11 AM

React通過JSX與HTML結合，提升用戶體驗。 1)JSX嵌入HTML，使開發更直觀。 2)虛擬DOM機制優化性能，減少DOM操作。 3)組件化管理UI，提高可維護性。 4)狀態管理和事件處理增強交互性。

REACT組件：在HTML中創建可重複使用的元素Apr 08, 2025 pm 05:53 PM

React組件可以通過函數或類定義，封裝UI邏輯並通過props接受輸入數據。 1)定義組件：使用函數或類，返回React元素。 2)渲染組件：React調用render方法或執行函數組件。 3)復用組件：通過props傳遞數據，構建複雜UI。組件的生命週期方法允許在不同階段執行邏輯，提升開發效率和代碼可維護性。