2

複数のスタイルが 1 つにカスケードされます:

スタイルを指定できます:

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

ヒント: 複数の外部スタイル シートであっても、1 つの HTML ドキュメント内で参照できます。カスケード順序

HTML要素に複数のスタイルが指定されている場合、どのスタイルが使用されますか?

一般的に言えば、すべてのスタイルは、次のルールによって新しい「仮想」スタイル シートに「カスケード」されると言えます。ここで、4 番目の優先度が最も高くなります。

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
  • widthheightimg 要素には 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 属性です。インライン スタイルは最も高い特異性を持っています (より高い特異性を得るために示される CSS 宣言を除く!important) が、html 属性は CSS でさえないため、そのような高い特異性はありません。

于 2013-05-10T19:30:44.907 に答える
0

「style」属性以外の html タグ内の属性は、css の一部ではありません。

CSS のカスケードと優先順位の規則はかなり複雑ですが、すべてを網羅しているわけではない一般的な優先順位を以下に示します。

一般的な CSS の優先度:

  1. style タグを使用して要素に直接適用されるスタイル タグ
  2. 要素 ID を使用して適用されるスタイル
  3. 要素のクラスまたはタグ名を使用して適用されるスタイル

CSS インクルードまたはスタイル タグの優先順位:

ページに css を含める場合、優先順位は最後から最初になります。これら 2 つのスタイルがこのシーケンスに含まれている場合、ボディの色は赤になります。

<style>

    body {
        background-color: blue;
    }

</style>

<style>

    body {
        background-color: red;
    }

</style>
于 2013-05-10T19:39:23.137 に答える