Основы HTML

  1. Термины и определения
  2. Принципы WEB 2.0
  3. Структура HTML-документа
  4. Основные метатеги
  5. Форматирование текста HTML
  6. Списки
  7. Текст фиксированного формата
  8. Выделение фрагментов текста
  9. Изменение параметров шрифта
  10. Графика
  11. Таблицы
  12. Гиперссылки
  13. Изображения-карты
  14. Фреймы

Основы CSS3

  1. Что такое CSS
  2. Синтаксис CSS
  3. Стилевые классы
  4. Комбинированные стили
  5. Таблицы CSS
  6. Правила каскадности CSS
  7. Рекомендации применения стилей
  8. Параметры шрифтов
  9. Разрывы строк, вертикальное выравнивание
  10. Параметры фона
  11. Параметры абзаца
  12. Параметры списков
  13. Параметры курсора
  14. Параметры отступов
  15. Параметры рамки
  16. Параметры выделения
  17. Параметры отображения
  18. Контейнеры


   

Правила каскадности CSS

На предыдущих уроках были изучены стили CSS разных типов: стиль переопределения тега, стилевой класс, комбинированный стиль, встроенный стиль. Стили могут быть определены во внешних или внутренних таблицах стилей. Каждый из стилей был нами рассмотрен в отдельности. Теперь осталось выяснить приоритет стилей, поскольку к одному и тому же элементу html-страницы могут одновременно применяться сразу несколько разных стилей.

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

Новичку понять правила каскадности достаточно сложно, поэтому, объясним их работу на примерах.

Допустим, что мы создали внешнюю таблицу стилей style.css:

.text {color: Red}
#txt {font-size: 12px}
STRONG {
	color: Yellow;
	font-style: italic
	}

В html-странице мы применили внутренний стиль:

<STYLE>
	.text {color: Blue}
	STRONG {font-size: 20px}
</STYLE>

Рассмотрим html-код страницы:

ПРИМЕР 1:

<P><STRONG>Желтый полужирный курсив размером 20 пикселей.</STRONG></P>

Когда одновременно применяются внешний и внутренний листы стилей, браузер в первую очередь обрабатывает и сохраняет в своей памяти внешнюю таблицу стилей, затем - внутреннюю таблицу. Если во внешней и внутренней таблице CSS встрачаются одинаковые селекторы, то браузер суммирует их атрибуты, формируя результирующий стиль. В нашем примере итоговый стиль переопределения тега STRONG будет выглядеть следующим образом:

STRONG {
	color: Yellow;
	font-size: 20px;
	font-style: italic
	}

Именно такой стиль браузер применит в нашем примере 1.

ПРИМЕР 2:

<P ID="txt" STYLE="font-weight: bold">Полужирный текст размером 12 пикселей.</P>

Браузер к атрибуту именованного стиля txt, который загрузит из внешней таблицы, добавит атрибут встроенного стиля. Результирующий стиль будет выглядеть следующим образом:

#txt {
	font-size: 12px;
	font-weight: bold
	}
ПРИМЕР 3:

<P CLASS="text">Текст синего цвета.</P>

На этот раз атрибуты стилевого класса text задают один и тот же параметр - цвет текста: во внешней таблице - красный цвет; во внутренней таблице - синий цвет. В таких случаях браузер руководствуется правилами каскадности, которые говорят о том, что стиль внутренней таблицы имеет более высокий приоритет, поэтому, текст будет оформлен синим цветом.

Важные атрибуты стилей

Стандарт CSS допускает возможность нарушения правил каскадности. Для этого нужное значение атрибута селектора стиля должно быть выделено при помощи значения !important

STRONG {
	font-size: 12px;
	color: Red !important
	}

В нашем примере текст, оформленный тегом <STRONG>, всегда будет отображаться красным цветом, даже если параметр color будет переопределен в более конкретном стиле.

Обратите внимание, что важными могут быть только отдельные атрибуты стиля в определении стиля, остальные атрибуты стиля, которые не объявлены важными, будут подчиняться стандартным правилам каскадности стилей.


TOP ↑