2

多种样式将层叠为一个：

可以指定样式：

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 标签内、外部样式表或浏览器中定义的样式（默认值）。参考这里。

但是这里的 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 的宽度和高度取自内部样式表，即在 head 标签中定义的样式表

4

4 回答 4

4
  • width在您的heightimg 元素中是 HTML 属性。

  • 您引用的参考是关于 HTML 属性样式的，例如：

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

前者的优先级较低：我相信任何可能适用的 CSS 指令都会对其进行样式设置；它是 HTML 代码。后者具有相当高的优先级。

于 2013-05-10T19:29:27.860 回答
1

宽度和高度的值应该是数字width="107"或 %width="100%"并且是属性内联样式将是style="width:107px"

于 2013-05-10T19:29:12.373 回答
1

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

于 2013-05-10T19:30:44.907 回答
0

除了“style”属性之外的html标签内的属性不是css的一部分。

CSS 级联和优先级规则非常复杂，但这里是我所遵循的一般优先级，但绝不涵盖所有内容。

一般 CSS 优先级：

  1. 使用样式标签直接应用于元素的样式标签
  2. 使用元素 ID 应用的样式
  3. 使用元素类或标签名称应用的样式

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

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

<style>

    body {
        background-color: blue;
    }

</style>

<style>

    body {
        background-color: red;
    }

</style>
于 2013-05-10T19:39:23.137 回答