Приоритет встроенного стиля и внутреннего стиля - PullRequest
Новая
       16

Приоритет встроенного стиля и внутреннего стиля

1 голос
/ 09 марта 2012

У меня есть некоторый код HTML и CSS, как показано ниже 

<html>
<head>
<style type="text/css">
img.normal
{
height:auto;
}
img.big
{
height:120px;
}
p.ex
{
height:100px;
width:100px;
}
</style>
</head>

<body>
<img class="normal" src="logocss.gif" width="95" height="84" /><br />
<img class="big" src="logocss.gif" width="95" height="84" />
<p class="ex">The height and width of this paragraph is 100px.</p>
<p>This is some text in a paragraph. This is some text in a paragraph.
This is some text in a paragraph. This is some text in a paragraph.
This is some text in a paragraph. This is some text in a paragraph.</p>
</body>
</html>

Я помню, что приоритет трех стилей - встроенный> внутренний> внешний.Но приведенный выше код, картинка, класс которой называется «большой», встроенный стиль устанавливает высоту 84 пикселя и ширину 95, почему внутренний стиль может влиять на стиль результата?Кто-нибудь может помочь?

1 Ответ

2 голосов
/ 09 марта 2012 
<img class="big" src="logocss.gif" width="95" height="84" />

В приведенном выше примере width и height не являются правилами стиля, они являются атрибутами элемента (который CSS должен заменить).Я бы предположил, что атрибуты переписывают правила стиля, но, возможно, все наоборот.В любом случае, основной ответ на ваш вопрос заключается в том, что это не встроенный стиль, так что вы понимаете приоритет по-прежнему правильно.Попробуйте следующее: 

<img class="big" src="logocss.gif" style="width:95px; height:84px;" />

и посмотрите, что будет применено.

...