Оглавление

2.4. Приоритет применения стилей

Предположим, что для абзаца определен атрибут color в параметре style одного цвета, в теге <styie> другого цвета, а в отдельном файле (листинг 4) — третьего цвета. Кроме того, в параметре color тега <font> задан четвертый цвет (листинг 5).

 

Листинг 4. Содержимое файла style.сss

р { color: red }


Листинг 5. Содержимое файла test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>  

<head>

  <title>Приоритет применения стилей</title>

  <meta http-equiv="Content-Type" content="text/html; charset=windows 1251">

  <link rel="stylesheet" type="text/css" href="style. ess" >

  <style type="text/css">

    p { color: blue }

  </style>  

</head>

 <body>  

  <p style= "color: green">

   <font color= "yellow">Текст1</font>

  </p><br>

  <p style="color: green">Текст2</p>  

</body>  

</html>

 

Какого цвета будет абзац со словом "Текст 1"? И какого цвета будет абзац со словом "Текст2"? Для ответа на эти вопросы и существует приоритет стилей:


□   стиль, заданный таблицей стилей, будет отменен, если в HTML-коде явно описано форматирование блока;


□  стиль, заданный в теге <styie>, будет отменен, если в параметре style тега указан другой стиль;


□  стиль, заданный в отдельном файле, будет отменен, если в теге <styie> указано другое определение стиля.


Именно из-за такой структуры приоритетов таблицы стилей называют каскадными.


Иными словами, наименьший приоритет имеет стиль, описанный в отдельном файле, а самый высокий — стиль, указанный последним. В нашем примере к абзацу со словом "Текст 1" будет применено форматирование, указанное параметром color тега <font>, то есть абзац будет желтого цвета. А абзац со словом "Текст2" будет иметь цвет, указанный в параметре style, то есть зеленый.

 

Кроме того, следует учитывать, что стиль, заданный через идентификатор, будет иметь более высокий приоритет, чем стиль, заданный через класс. Пример:

<style type="text/css">

  #idl { color: red }

  .clsl { color: blue }

</style>

. . .  

<p id="idl" class="clsl">Текст1</p>

 

В этом примере текст абзаца будет красного цвета, а не синего.


С помощью свойства ! important можно изменить приоритет. Для примера изменим содержимое файла style.css (листинг 4) на:

р { color: red !important }


В результате мы переопределили все стили и абзац со словом "Текст2" будет иметь красный цвет, а не зеленый. Однако абзац со словом "Текст1" так и останется желтого цвета, так как цвет указан в параметре color тега <font>, a не задан через стиль.

<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити