2013-05-10 2 views
2

Несколько стилей будет Каскад в один:CSS Cascading заказа не работает

Стили могут быть указаны:

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) имеет наивысший приоритет, что означает, что он переопределит стиль, определенный внутри тега заголовка, либо во внешней таблице стилей, либо в браузере (значение по умолчанию) .Reference 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 взяты из внутренней таблицы стилей т.е. одной определенной в головной метке

+1

'width =" 107px "' is not css. –

ответ

1

значения ширины и высоты должны быть номер width="107" или% width="100%" и являются атрибутами встроенного стиля будет style="width:107px"

4
  • width и height в вашем элементе img являются атрибутами HTML.
  • вы цитируете ссылки о стиле атрибута HTML, как:

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

Первые имеет низкий приоритет: это будет в стиле ЛЮБОЙ инструкцией CSS, которые могут применяться Я считаю, это HTML-код. Последний имеет довольно высокий приоритет.

+0

@FelipseAls i m ошибочно, спасибо за информацию –

+0

Добро пожаловать. Другим примером могут быть атрибуты 'rows' и' cols' textarea, которые превышают ширину и высоту в CSS. Хотя здесь у них нет одинакового имени, поэтому он менее запутан;) – FelipeAls

1

Я думаю, вы ошибаетесь. То, что вы используете внутри элемента img, - это атрибуты HTML, а не встроенные стили. Встроенные стили имеют самую высокую специфичность (за исключением любых объявлений CSS, обозначенных !important, которые имеют более высокую специфичность), но атрибуты html не имеют такой высокой специфичности, поскольку они даже не CSS.

0

Атрибуты внутри тега html, отличного от атрибута «style», не являются частью css.

CSS каскадные и приоритетные правила довольно сложны, но вот основные приоритеты, которые я выполняю, которые никоим образом не покрывают все.

Общие Приоритет CSS:

  1. Стиль тег применяется непосредственно к элементу с помощью тега стиля
  2. Стиль применяется с использованием элементов ID
  3. Стиль применяется с использованием элементов класса или имя тега

CSS Включает или Приоритет стиля:

Когда речь идет о включении css на странице, приоритет от последнего до первого. Если бы эти два стиля были включены в эту последовательность, цвет тела был бы красным.

<style> 

    body { 
     background-color: blue; 
    } 

</style> 

<style> 

    body { 
     background-color: red; 
    } 

</style> 
Смежные вопросы