Question

多个样式将合并为一个：

可以指定样式：

inside an HTML element
inside the head section of an HTML page
in an external CSS file

提示：甚至可以在单个HTML文档中引用多个外部样式表。级联订单

如果为HTML元素指定了多个样式，将使用哪种样式？

一般来说，我们可以说所有样式都会按照以下规则“级联”成新的“虚拟”样式表，其中第四个具有最高优先级：

Browser default
External style sheet
Internal style sheet (in the head section)
Inline style (inside an HTML element)

因此，内联样式（在HTML元素内）具有最高优先级，这意味着它将覆盖head标记内部或外部样式表或浏览器中定义的样式（默认值）。参考Here。

但是这里的css正好相反：

<head>
<style>
.thumbnail 
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>

<img class="thumbnail" src="klematis_small.jpg" width="107px" height="100px">
<img class="thumbnail" src="klematis2_small.jpg" width="107px" height="80px">

img的宽度和高度取自内部样式表，即头标记

中定义的样式表

Answer 1

width和height是HTML属性。

您引用的引用与HTML属性样式有关：

<img style='width: 1337px; height: 42px' (...)>

前者的优先级较低：它可以通过我认为可能适用的任何CSS指令来设计;这是HTML代码。后者具有相当高的优先级。

Answer 2

宽度和高度值应为数字width="107"或％width="100%"，内联样式属性为style="width:107px"

Answer 3

我认为你错了。您在img元素中使用的是HTML属性，而不是内联样式。内联样式具有最高的特异性（除了用!important表示的任何CSS声明，它们具有更高的特异性），但html属性没有那么高的特异性，因为它们甚至不是CSS。

Answer 4

除“style”属性之外的html标记内的属性不属于css。

CSS级联和优先级规则相当复杂，但这里是我所遵循的一般优先事项，但绝不包含所有内容。

常规CSS优先级：

样式标记使用样式标记
使用元素ID
使用元素类或标记名称

CSS包含或样式标记优先级：

在页面中包含css时，优先级从最后到第一位。如果这两个样式包含在此序列中，则主体颜色将为红色。

<style>

    body {
        background-color: blue;
    }

</style>

<style>

    body {
        background-color: red;
    }

</style>

CSS级联顺序无法正常工作

4 个答案: