Шаг 22 - Каскадные таблицы стилей

Паранойя современного интернета и не менее современных технологий "зачала" в своих недрах неутишимую страсть к красивому (иногда даже черезчур). Результатом этого, своего рода безумства, стало рождение каскадных таблиц стилей CSS (Cascading Style Sheets).

Помоему ничего полезнее для html придумать было нельзя, эта "штука" позволяет задавать каждому элементу в документе собственное оформление, причем эти оформления заносятся в одну таблицу и позволяют съэкономить тонну байтов :-) Естественно меняя только эту таблицу Вы в можете менять стиль или по другому дизайн своего сайта в считанные секунды.

Давайте разберемся с тем, как эти таблицы встраиваются в документ html. Существует три таких способа:

Посредством тега <link> таблица стилей прописывается следующим образом:
<link rel="stylesheet" type="text/css" 
href="http://your.url.com/anyfile.css">
Здесь атрибут href задает тот самый URL файла таблицы со стилями. Файл таблицы стилей текстовый. Что в нем содержится мы увидим потом.

Второй метод использует, как мы уже разобрались, тег <style>. При этом рекомендуется для задания следующий формат:

<style type="text/css">
	.... 
	таблица стилей
	....
</style>
Таблица стилей это запись атрибутов тегов в довольно простом формате:
	имя_тега {параметр_тега1: значение; ... }
	имя_тега.класс {параметр_тега1: значение; ... }
	.класс {параметр_тега1: значение; ... }
Имя тега, для которого будут действовать заданные настройки указывается в поле имя_тега. В фигурных скобках указываются параметры тега с их значениями, с ними мы будем знакомиться постепенно.

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

<style type="text/css">
	p {color: red;}
</style>
После создания такой таблицы стилей все параграфы в документе будут отображаться красным цветом. Естественно это может показаться не нужным для всего документа. Тогда будем использовать второй формат:
<style type="text/css">
	p.red {color: red;}
</style>
При таком задании таблицы все параграфы документа будут отображаться по умолчанию, или с ранее заданными настойками. Для того, чтобы окрасить параграф в красный цвет нам придется использовать тег с атрибутом class:
<p class=red> Red paragraph.</p>
В данном случае класс red будет распространяться только на теги параграфов <p>. Если же Вам захотелось использовать этот класс в любых других тегах, то используйте запись по третьему формату, т.е. без указания имени тега. При этом использование атрибута class у любого из тегов будет ему соответствующий класс для отображения из таблицы стилей.

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

	p b { color : green} 
При такой записи тег <b> будет окрашиваться в зеленый цвет если он находится внутри параграфа:
	<p>Обычный текст, а это <b>зеленый текст</b>.</p>
	<b>А это всеже обычный текст...</b>
Осталось теперь поговорить о третьем способе задания стиля. Он как Вы помните (?!) задается атрибутом style. Приведем пример красных параграфов :-)
<p style="color: red;">Красный параграф.

Я обещал рассказать о формате файла с внешней таблицей стилей. Так вот оформляется она точно также как и тег <style>. При этом даже иногда многие само название тега и не указывают, всем ясно что там таблица со стилями :-) Чем такой метод задания стилей интересен ?! Да тем, что он располагается в отдельном файле, и его можно использовать для любых других документов не расписывая его внутрь, что экономит место и время загрузки.


Предыдущий Шаг | Следующий Шаг | Оглавление
Автор Кузин Андрей.