Which one has higher priority, html tag attributes or css attributes?-Front-end Q&A-php.cn

Which one has higher priority, html tag attributes or css attributes?

青灯夜游

Release： 2023-01-06 11:14:56

Original

3539 people have browsed it

Compared with html tag attributes and css attributes, css attributes have higher priority. Reason: W3C standards advocate the use of CSS styles and replace HTML tag attributes with CSS styles. Web page production standards separate tags and styles; and setting styles in tag attributes makes reuse more difficult.

Which one has higher priority, html tag attributes or css attributes?

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Today I was looking at the Dimension section of the w3c CSS tutorial and conducted the following experiment:

<!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"    style="max-width:90%"  style="max-width:90%" / alt="Which one has higher priority, html tag attributes or css attributes?" ><br>
<img  class="big" src="/attachments/cover/cover_css.png"    style="max-width:90%"  style="max-width:90%" / alt="Which one has higher priority, html tag attributes or css attributes?" ><br>
<img  class="small" src="/attachments/cover/cover_css.png"    style="max-width:90%"  style="max-width:90%" / alt="Which one has higher priority, html tag attributes or css attributes?" >
</body>
</html>

Copy after login

The running results are as follows:

Which one has higher priority, html tag attributes or css attributes?
What puzzled me at the time was why the height attribute of img in the internal style sheet worked instead of the height attribute in the img tag. Then I conducted various Baidu searches.

Finally came to the relevant conclusion:
(1) Now I find that I changed the attribute settings and inline styles in the tag. I was confused, so I was so surprised and unable to understand it at first. Then I tried inline styles

<img  class="big" src="/attachments/cover/cover_css.png"    style="max-width:90%" / alt="Which one has higher priority, html tag attributes or css attributes?" ><br>

Copy after login

The experimental results showed that inline styles still have higher priority than internal style sheets.

(2) After re-clarifying the concept, further observation will reveal that the style setting of the internal style sheet has a higher priority than the style setting of the html tag attribute, and then conducted an experiment with the external style sheet

<!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"    style="max-width:90%"  style="max-width:90%" / alt="Which one has higher priority, html tag attributes or css attributes?" >
</body>
</html>

Copy after login

It is found that the priority of the external style sheet is also higher than the height attribute inside the img tag. From this, it can be seen that the style of css will take precedence over the attribute of the tag.

(3) W3C standards advocate the use of CSS styles and replace HTML tag attributes with CSS styles; the web page production standard is to separate tags and styles. Because it is set in the tag attribute, it is difficult to reuse it. I personally guess that this may be the reason why the CSS style priority is higher than the tag attribute.

(4) Although it is recommended to use CSS styles, it is introduced in detail in W3School: "It is a good habit to specify height and width attributes for images. If these are set attributes, you can reserve space for the image when the page loads. Without these attributes, the browser cannot understand the dimensions of the image and reserve appropriate space for the image, so the layout of the page will occur when the image loads. Change."

"Please do not scale the image through the height and width properties. If you shrink the image through the height and width properties, the user will have to download a large image (even if the image looks small on the page ). The correct approach is that before using the image on the web page, the image should be processed to the appropriate size through software."

"The two values of the height and width attributes can be larger or smaller than the actual size. Some browsers will automatically resize the image to fit in this reserved space. But it's important to note that the browser still has to download the entire file, regardless of its final displayed size, and if it doesn't maintain its The original width and height ratio, the image will be distorted.
Another technique using the height and width attributes is to easily fill the page area, while also improving the performance of the document. Imagine if You want to place a colored horizontal bar in your document. You don't need to create a full-sized image. Instead, you create an image that is 1 pixel wide and 1 pixel tall and give it the color you want to use. .Then use the height and width attributes to expand it to a larger size."

"If a percentage width value is provided and height is omitted, the browser will maintain the The aspect ratio of the image (Because the default value when height is not set is auto adaptive). This means that the ratio of the height and width of the image will not change, and the image will not change. There will be no distortion."

Just like a comment with the ID "Yu Jiangshui" in the Pandan article: "The alt attribute of img is required, and width and height are recommended. Because img The loading of web pages is slower than that of these structures, so the structures and text are often loaded first, and then the images are loaded. At this time, because the browser does not know the size of the image in advance, it cannot render the image in the web page. Position and size. After the image is loaded and then rendered, a redraw occurs (that is, the browser recalculates the position of the relevant elements. The specific manifestation is that the image appears and the text under the image runs to the bottom. Taobao products Introduction page, it is very obvious here.)
As for the img with width and height, the browser will calculate it, leave it blank, and then wait for the image to load, avoiding page redrawing, improving front-end performance and user experience, here in Zhihu The answers can be seen in the pictures above.

In responsive layout (a website can be compatible with multiple terminals - rather than making a specific version for each terminal; this concept is to solve the problem of mobile Internet browsing) In image processing (born), max-width: 100%; height: auto; should be set on the img tag to ensure proportional stretching. ”

(Learning video sharing: css video tutorial)

The above is the detailed content of Which one has higher priority, html tag attributes or css attributes?. For more information, please follow other related articles on the PHP Chinese website!