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

最新推荐文章于 2021-08-03 21:38:49 发布

WinstonLau

最新推荐文章于 2021-08-03 21:38:49 发布

阅读量1.9k

点赞数

分类专栏：前端文章标签： CSS样式的优先级

本文链接：https://blog.csdn.net/WinstonLau/article/details/89354216

版权

前端专栏收录该内容

59 篇文章 11 订阅

订阅专栏

先看代码

<!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属性

WinstonLau

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
标签属性和CSS样式的优先级的比较

先看代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>img标签</title> <style> img{ width: 600px; ...
复制链接

扫一扫