Синтаксис
Общие файлы таблиц стилей для нескольких документов
Файл таблиц стилей - это просто текстовый файл с расширением .css. Такой файл может быть подключен к любому количеству документов HTML. Эти документы даже могут располагаться на другом сервере.
При изменении параметров (значений свойств) в файле таблиц стилей, изменется внешний вид всех документов HTML, к которым подключен данный файл стилей.
Все легче понять на примере. Так может выглядеть файл таблиц стилей (syntax_101.css):
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 документ (или несколько документов), в котором сослаться на syntax_101.css.
<html>
<head>
<title>Новый</title>
<link rel="stylesheet"
type="text/css" href="syntax_101.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>, который расположен внутри заголовка третьего уровня. Это не будет действовать на другие заголовки или выделенный курсивом текст в другом месте документа.
Это просто заголовок второго уровня, в котором последнее слово выделено курсивом.
|
