Присвоение стилей, CSS
Присвоение стилей может быть сделано тремя основными способами, каждый из которых имеет свои преимущества: импорт, встраивание и атрибуты тегов.
Описание стиля
Описание стиля представляет собой правило, состоящее из селектора (названия) и заключенного в фигурные скобки блока объявления.
Импорт из внешнего файла
Таблица стилей (она же внешняя) хранится в самостоятельном файле с расширением *.css. По-существу, он представляет собой текстовый файл, каждая строка которого описывает оформление какого-либо объекта (экранного элемента).
Чтобы присоединить файл с таблицей стилей к нашему документу, можно использовать тег
<link rel="stylesheet" type="text/css" href="site_styles.css">
Доступ к этим материалам предоставляется только зарегистрированным пользователям!
Особенность тега заключается в его использовании исключительно в разделе HEAD.
Туда же можно вставить директиву @import, которая обязательно должна быть первой строкой контейнера style.
<style type="text/css"> @import url(site_styles.css); </style>
Какой из двух приведенных способов лучше — крайне запутанная история, которую мы оставим на совести разработчиков.
Преимущество подхода с внешним хранением стилей очевидно. Если у нас есть сайт из нескольких сотен или даже десятков страниц, сменить внешний вид всего сайта можно отредактировав единственный CSS-файл.
Определенные трудности возникают лишь при попытке переноса HTML-страницы в папку другого уровня. Хотя частично они могут быть решены за счёт программирования.
Таблица стилей в документе
Можно описать таблицу стилей непосредственно в документе (встроить её в документ). Такой подход, по сравнению с предыдущим, отлично решает задачу уникального форматирования именно для этого документа. Он может использоваться как дополнение к импорту.
Но, гораздо важнее, что стили, описанные в документе, доминируют над импортированными. Это значит, что если для всего сайта все заголовки описаны, как символы красного цвета, а в единственном файле добавится блок
<style type="text/css">
h1, h2, h3, h4, h5, h6, h7, h8, h9 {color: yellow}
</style>
то ВСЕ заголовки данного документа станут желтыми. (Не факт, что читабельными.)
Обратите внимание, что описание стилевой таблицы (Style Sheet) открывается тегом <style type="text/css"> с обязательным атрибутом type и закрывается тегом </style>.
Внутреннее же содержание описания абсолютно ничем не отличается от варианта хранения во внешнем файле. Это позволяет отладить оформление в документе, а затем вынести его в css-файл.
Довольно забавно, что неаккуратность в CSS жестко наказывается. Ведь, если описать одно и то же три раза, то...?
Файл считывается и выполняется последовательно. Сначала будет применено первое стилевое описание, затем второе и, наконец, третье. Естественно, что на экран будет выведена последняя инструкция.
Именно поэтому рекомендуется хранить всю таблицу в одном месте документа, а не разбрасывать её фрагменты там, где показалось удобнее.
Стиль, как атрибут обычных тегов
Данный способ достаточно глуп с точки зрения концепции CSS, так как пропадают наиболее важные преимущества.
Однако, нельзя не отметить, что внедрение стилей в теги существенно увеличивает гибкость форматирования. Именно поэтому он весьма востребован при единичных (точечных) настройках в одном документе.
Глупость же этого подхода заключается в том, что всё наполнение тега должно полностью повторяться при каждом следующем применении.
Таким подходом грешат файлы, экспортированные, например, из Microsoft Word:
<h2 style="margin-left: 36.0pt"> <span style="font-family: Courier New">или
<pre style="font-size: 10.0pt; font-family: Courier New; margin-top: 0cm; margin-bottom: .0001pt"...
Несложно догадаться, что первый тег будет применяться к каждому заголовку второго уровня, а второй (96 символов), вообще, предварять каждую строку текста! Именно за счет этого объем документов возрастает в разы.
Единственное, на что стоит обратить внимание, это на сам атрибут style и то, что при таком способе использования возможностей CSS, фактически, фигурные скобки заменены кавычками.
Copyright © 1993–2024 Мацкявичюс Д.А. Все права защищены.
Никакая часть сайта не может быть воспроизведена никаким способом без письменного разрешения правообладателя и явной ссылки на данный ресурс.
