Файл таблиц стилей - это просто текстовый файл с расширением .css. Такой файл может быть подключен к любому количеству документов HTML. Эти документы даже могут располагаться на другом сервере.
При изменении параметров (значений свойств) в файле таблиц стилей, изменется внешний вид всех документов HTML, к которым подключен данный файл стилей.
Все легче понять на примере. Так может выглядеть файл таблиц стилей:
H1 {
font-size : 32px;
color : red;
}
div.italic {
font-style : italic
}
.strong {
font-size : +1;
font-weight : bold;
}
Здесь определены 3 стиля: H1, div.italic, .strong.
Определение стиля начинается с имени (H1 или div.italic - в первом случае определяется оформление для всех тегов <H1>, во втором для класса). Далее в фигурных скобках перечисляются пары имя свойста : значение. Название свойства от значения свойства отделяются ":". Пары разделяются между собой ";". Одной из особенностью CSS является то, что можно указывать не все возможные пары значений. Если что-то не указать, то значение будет наследоваться или использоваться значение по умолчанию.
Если определен стиль H1, то ко всем заголовкам <H1> будет применяться указанное в определении стиля форматирование.
Теперь можно создать HTML документ (или несколько документов), в котором сослаться на созданный файл ***.css.
<html>
<head>
<title>Новый</title>
<link rel="stylesheet" type="text/css" href="***.css">
</head>
<body>
<h1>Заголовок первого уровня (H1)</h1>
<div>Это обычный текст <div class="italic">Фрагмент наклонного текста</div>
<p class="strong">Какой-то он жирный слишком</p>
</body>
</html>
Cтиль .strong может применяться к любым элементам (тегам), достаточно в параметрах этого тега указать class="strong"
Можно присвоить одно свойство нескольким тегам, например установить зеленый цвет для всех заголовков:
H1, H2, H3 {color : green;}
Очень важная особенность CSS - возможнность создания контекстных стилей. Т.е. форматирование элемента может зависеть от его положения в документе. Например, стиль определенный как:
H3 I {color : red;}
<I>, который расположен внутри заголовка третьего уровня. Это не будет действовать на другие заголовки или выделенный курсивом текст в другом месте документа.
Таблицы стилей можно всавлять непосредственно в документ HTML. Естественно, в этом случае она будет действовать только на данный документ. Таблица стилей помещается между тегами <style> и </style>, которые в свою очередь должны помещаться внутри тегов <head> и </head>.
Ниаписание самой таблицы стилей в данном случае ничем не отличается создания таблиц стилей в отдельных файлах.
Однако следует помнить, что старые браузеры, которых правда уже почти не осталось, пропустят незнакомый им тег <style> и выведут сами стилевые таблицы. Чтобы с этим бороться можно заключатьтаблицы стилей в комментарии HTML: <!-- и -->.
Этот вариант обладает своими недотатками. Во-первых, увеличивается размер файлов, а во-вторых, при большом количестве страниц существенно усложняется поддержка.
Пример документа со встроенной в него таблицей стилей:
<html>
<head>
<title>Таблица стилей в документе</title>
<style type="text/css">
<!--
H1 {color : red;
font-size : 32;}
div.italic {font-style : italic;}
body {background-color : gray;}
-->
</style>
</head>
<body>
<h1>Заголовок первого уровня</h1>
<div>Обычный текст</div>
<div class="italic">Наклонный текст</div>
</body>
</html>
Теги <style> можно применять и для подключения файлов таблиц стилей с помощью конструкции @import.
<style>
@import URL("http://your.server.net/style1.css");
</style>
Этот способ, скажем прямо, нарушает основную идею введения и использования стилевых таблиц. Поскольку в данном случае стиль определяется внутри конкретного тега, т.е. опять смешиваются воедино смысловое разделение документа на логические блоки с помощью тегов разметки и овормление данного документа. Поэтому данный способ не рекомендуется применять слишком часто. Однако именно этим способом легче всего переопределить свойства оформления.
Для определения стилей внутри тегов HTML используется атрибут STYLE, который определен у всех тегов.
<H1 style="font-size : 32; color : red;">Это заголовок первого уровня.</H1>
Будет выглядеть примерно так:
Наследование свойств самое мощное свойство CSS. Это значит, что нет необходимости описывать свойства всех возможных тегов. Если для какого-либо тега свойства не описаны, то он унаследует свойства тега, в который будет заключен. При переопределении одного из свойств другие по прежнему наследуются. Можно задать с помощь тега <BODY>, например, некоторые значения свойств по умолчания, а в дальнейшем определять исключения из них.
При задании значений свойств в процентах, значения вычисляются от значений родительских элементов.
И еще несколько слов, не относящихся к НАСЛЕДОВАНИЮ. Это возможность динамического изменения характеристик свойств стилей. Собственно можно сказать, что это должно относиться к описанию Script языков. Для изменения свойств с помощью сценариев необходимо использовать объект style. Свойства этого объекта позволяют манипулировать любыми свойствами CSS, и даже предоставляют дополнительные возможности.