Перейти к основному содержанию
Рецепты Linux

Main navigation

  • Основы
  • Система
  • Команды
  • Программы
  • Дистро
  • Интерфейсы
  • Устройства
  • Доки
User account menu
  • Войти

Строка навигации

  1. Главная
  2. Практическая информатика
  3. Глава 6 Динамический HTML
  4. Стили и таблицы стилей

Каскадные таблицы стилей

Одной из основных особенностей таблиц стилей является каскадность. Она означает, что при обработке стилей используется специальный механизм каскадирования. Для одного документа могут быть заданы различные правила. Один набор правил может определяться разработчиком документа, другие правила могут быть заданы пользователем. Кроме того, в каждом браузере имеется набор правил, используемых по умолчанию; они используются, если какое-либо из свойств явно не определено. Средства каскадирования собирают и объединяют различные правила, а также разрешают возникающие при этом конфликты.

Свойство каскадности тесно связано со способом подключения стилей к HTML-документу, которое возможно осуществить тремя способами: inline-описание, описание в секции заголовка и использование внешнего файла.

Самый простой способ -- это, так называемое, inline-описание или описание, встроенное в тег. При помощи дополнительного атрибута stype можно определить нужные стилевые параметры в любом теге. Основной недостаток этого способа в том, что определение стиля действует лишь в пределах одного тега. Представьте, насколько вырастет размер файла, и насколько неудобно будет его исправлять, если указывать стиль у каждого тега. Этот способ не слишком отличается, к примеру, от прямого описания внешнего вида при помощи тега <font>.

Пример

<P STYLE="color:red; text-align:center;">Этот 
параграф переопределен стилем</P>

Гораздо удобнее заранее определить все нужные стили оформления и впоследствии просто применять их к соответствующим тегам, т. е. воспользоваться способом описания стилей в секции заголовка. Именно этим способом мы пользовались в примерах, рассматривающих форматирование абзаца и оформление интервью. Действие таблицы стилей, подключенной таким образом, распространяется на весь HTML-документ.

И наконец, третий способ, -- вынесение описания стилей во внешний файл (внешнюю таблицу стилей). Для этого нужно все описание стилей поместить в отдельный файл с расширением .css. В раздел head документа включить строку, аналогичную следующей, где атрибут href содержит имя файла со стилями.

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

На практике приходится пользоваться всеми тремя способами, и здесь в игру вступает "каскадность" стилей, позволяющая переопределять стили. Приведенный выше список способов подключения таблиц стилей соответствует порядку переопределения: вышерасположенный способ может переопределять нижерасположенный.

Например, пусть во внешнем стилевом файле определено, что текст в теге <p> должен выводится шрифтом высотой 10 пунктов. Если при этом в разделе head документа переопределить тег <p>, указав, что текст должен отображаться шрифтом в 12 пунктов, то он будет выведен именно таким кеглем - стиль, расположенный в заголовке документа, переопределит стиль внешнего файла.

В целом, браузер расставляет приоритеты таблиц стилей следующим образом:

  1. inline-стили (встроенные с помощью атрибута style непосредственно в теги документа) -- наивысший приоритет; будут применены браузером в любом случае, даже если возникает конфликт с внедренными или внешними стилями;
  2. внедренные стили (перечисленные в теге-контейнере <style> в разделе <head> документа) - чуть меньший приоритет; будут применяться во всех случаях, кроме случаев возникновения конфликта с inline-стилями (при возникновении такого конфликта будут применены inline-стили);
  3. связанные стили (стили, присоединенные к HTML-файлу посредством тега <link>) - наименьший приоритет; будут применены только после того, как браузер убедится в отсутствии аналогичных правил во всех остальных типах стилей.

Зная, в какой последовательности браузер анализирует таблицы стилей, можно задать одну общую связанную таблицу для всех страниц сайта и при этом гибко управлять стилями отдельных страниц и отдельных элементов на странице. Именно с этой особенностью и связано слово "каскадные" в названии CSS (cascading style sheets) - несколько таблиц стилей, присоединенных к HTML-файлу, прокатываются через анализатор (браузер) неким "каскадом" в порядке их приоритетности.

Перекрёстные ссылки книги для Каскадные таблицы стилей

  • Классы стилей
  • Вверх
  • Применение CSS

Book navigation

  • Содержание
  • Глава 1 Основы информатики
  • Глава 2 Операционные системы и сети
  • Глава 3 Графика на компьютере
  • Глава 4 Обработка текста
  • Глава 5 Основы языка HTML
  • Глава 6 Динамический HTML
    • Стили и таблицы стилей
      • Использование стилей
      • Задание значений
      • Справочник по CSS
      • Классы стилей
      • Каскадные таблицы стилей
      • Применение CSS
    • Язык JavaScript
    • Рекомендации
  • Глава 7 Простейшие вычисления
  • Глава 8 Системы компьютерной алгебры
  • Глава 9 Модели и программирование
  • Глава 10 Логическое программирование
  • Глава 11 Введение в ООП
  • Глава 12 Программирование и интернет

Последние материалы

  • Утилита sensors
    4 hours ago
  • Сканер Rkhunter
    1 week ago
  • Программа resize2fs
    1 week 6 days ago
  • Аудиопроигрыватель QMMP
    2 weeks 4 days ago
  • Программа Timeshift
    3 weeks 3 days ago
RSS feed

Secondary menu

  • О проекте

© 2008–2025 Олег Меньшенин mensh@yandex.ru