Применение CSS таблиц стилей
Основные сведения о каскадных таблицах стилей изложены, и, в принципе, этого материала достаточно для умения прочитать имеющуюся таблицу, а при необходимости даже внести какие-либо изменения. Теперь, пожалуй, стоит задержаться на объяснении того, как именно применяются таблицы стилей, причем сохраняемые не в одном файле, а в нескольких, ведь недаром они названы каскадными. Данный материал будет полезен при изменении шаблонов сайтов, созданных на основе систем управления содержимым, которые описаны в статье, посвященной CMS Joomla!.
Как уже упоминалось выше, к одному документу можно присоединить несколько таблиц стилей, которые, в свою очередь, одновременно будут определять стилевое оформление данного документа. Это основополагающий принцип применения каскадных таблиц стилей, ради которого и затеивался этот сыр-бор. Рассмотрим, что он позволяет сделать.
Можно реализовать модульность оформления сайта, то есть для создания сайта можно написать несколько таблиц, каждая из которых будет отвечать только за свой фронт форматирования: одна таблица определяет стили шрифтов, другая описывает размещение объектов на веб-страницы, третья регламентирует состояние ссылок и т. д.
Пожалуй, более важный пункт - определение равновесия между тем, как свой сайт видит автор и как его хочет видеть пользователь. Дело в том, что пользователь в состоянии самостоятельно определить правила отображения элементов сайта в таблицах стилей, применяемых браузером. Браузер, в свою очередь, на основании механизма приоритетности будет использовать те или иные правила стилистического оформления страницы, взяв их из таблиц автора сайта или настроек пользователя.
Следует знать, как взаимодействуют правила, определяющие стилистическое форматирование одинаковых элементов, но заданных в разных таблицах. Эти правила называются принципом приоритетности и заключаются в следующем: все таблицы располагаются друг за другом, образуя так называемый каскад приоритета - от низшего к наивысшему. По такому каскаду проходит обрабатываемый документ, постепенно изменяя свое форматирование с учетом правил, записанных в таблицах стилей.
Для определения приоритетности вводится понятие веса таблицы стилей. Соответственно, чем больше вес таблицы, тем выше ее приоритет. По умолчанию браузер принимает следующую приоритетность: вес каскадных таблиц стилей пользователя всегда меньше веса каскадных таблиц разработчика. Таким образом, в случае возникновения конфликта при определении стилистического оформления того или иного элемента веб-страницы последнее слово за веб-мастером, поэтому не следует этим злоупотреблять. Пользователю только и остается, что изменять настройки браузера по умолчанию.
В случае импортируемых стилевых таблиц их вес зависит напрямую от порядка импортирования в документ, каждая последующая импортируемая таблица имеет вес больший, чем у предыдущей. В свою очередь, импортируемые каскадные таблицы стилей сами могут импортировать другие таблицы.
Любые правила, определенные внутри документа, имеют наибольший вес по сравнению с любыми правилами, расположенными в таблицах за его пределами.
Разрешение внутренних конфликтов при определении приоритета правил, описанных в различных стилевых таблицах, осуществляется с помощью следующего алгоритма.
Находятся все определения, относящиеся к данному правилу «элемент - свойство», которые рассматриваются только в том случае, если селектор правила соответствует рассматриваемому элементу. Если ни одно из определений невозможно применить, то используется наследуемое значение свойства, а если же наследуемое значение не устанавливается, применяют начальное значение данного свойства.
Конфликтные определения сортируются по явно заданным весам.
Определения подвергаются сортировке по происхождению: авторские, читательские, таблицы стилей, установленные по умолчанию в браузере.
Далее происходит сортировка по специфичности селектора. Специфичность селектора определяется как сумма параметров CLASS, ID и название тегов в селекторе. Соответственно, чем эта сумма больше, тем выше специфичность селектора.
Ив заключение: определения сортируются по порядку их задания в таблице стилей - при конфликте двух правил с одинаковым весом наибольший приоритет имеет правило, заданное позже.
Если все это достаточно сложно, то попробуем проще расставить приоритетность правил по возрастанию.
- Связанная таблица стилей.
- Импортируемая таблица стилей.
- Правило с элементом языка HTML в качестве селектора.
- Правило с параметром CLASS в качестве селектора.
- Правило с параметром ID в качестве селектора.
И как вершина - правило, встроенное в тег кода HTML.
Используя полный алгоритм либо упрощенную схему поиска приоритета правил, всегда легко найти в нескольких таблицах то правило, которое почему-то мешает оформлению элемента веб-страницы.
Данный краткий экскурс в каскадные таблицы стилей ни в коей мере не претендует даже на обзор всех возможностей CSS, но дает представление о том, что это такое и в каком направлении следует идти, чтобы сделать свой сайт более привлекательным для посетителей.
| ← Знакомство с FTP-клиентом | Селектор ID → |
|---|