Присвоение стилей, CSS

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

Описание стиля

Описание стиля представляет собой правило, состоящее из селектора (названия) и заключенного в фигурные скобки блока объявления.

Импорт из внешнего файла

Таблица стилей (она же внешняя) хранится в самостоятельном файле с расширением *.css. По-существу, он представляет собой текстовый файл, каждая строка которого описывает оформление какого-либо объекта (экранного элемента).

Чтобы присоединить файл с таблицей стилей к нашему документу, можно использовать тег

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

Все атрибуты тега обязательны. Файл (в нашем примере – 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–2020 Мацкявичюс Д.А. Все права защищены.
Никакая часть сайта не может быть воспроизведена никаким способом без письменного разрешения правообладателя и явной ссылки на данный ресурс.