标签属性和CSS样式的优先级的比较

最新推荐文章于 2025-06-22 10:34:17 发布

原创最新推荐文章于 2025-06-22 10:34:17 发布 · 2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#CSS样式的优先级

前端专栏收录该内容

59 篇文章

订阅专栏

本文探讨了在网页设计中，CSS样式与HTML标签属性之间的优先级问题。详细解析了为何W3C标准推荐使用CSS样式，以及在响应式布局中如何正确设置img标签的宽度和高度属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img标签</title>
    <style>
        img{
            width: 600px;
        }
    </style>
</head>
<body>
    <img width="200px" src="https://sqimg.qq.com/qq_product_operations/im/mac/6.0/sp-mac/sp-mac-xlarge.png" alt="">
</body>
</html>

从最终的显示效果来看，很明显是 style 标签中的样式起了作用
也就是说，CSS样式会优先于标签的属性
W3C标准提倡使用CSS样式，提倡用CSS样式代替HTML标签属性；网页制作标准是标签跟样式分离。因为在标签属性里设置，重复使用比较难，个人猜测这可能就是css样式优先级高于标签属性的原因
虽然提倡使用CSS样式，但是W3School中进行了详细的介绍：“为图像指定 height 和 width 属性是一个好习惯。如果设置了这些属性，就可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化
如果提供了一个百分比形式的 width 值而忽略了 height，那么不管是放大还是缩小，浏览器都将保持图像的宽高比例（因为不设置height时的默认值为auto自适应）。这意味着图像的高度与宽度之比将不会发生变化，图像也就不会发生扭曲
在响应式布局（一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本；这个概念是为解决移动互联网浏览而诞生的）的图片处理中，应该对 img标签设置 max-width: 100%; height: auto; 这两条属性，才可以保证成比例拉伸
内联样式的优先级高于内部样式表
外部样式表的优先级也高于img标签内部的height属性