Каскадные листы стилей
advertisement
Каскадные листы стилей
Листы стилей позволяют определять стили для одного или нескольких отдельных дескрипторов. Например, вы можете
создать лист стилей, который определяет стили для дескрипторов <h1>, <h2> и <p>. Каждое определение стилей называется
правилом. Правило содержит селектор, представляющий собой дескриптор HTML, сопровождаемый объявлением
(описанием стиля). Селектор правила связывает определение стиля с дескрипторами, используемыми в HTML-файле.
Например, определим стиль для каждого дескриптора <h1>:
H1 {color: blue}
Объявление заключено в фигурные скобки {}. Каждый элемент в объявлении имеет две части: имя свойства и значение,
которое вы присваиваете ему, разделенные двоеточием. В этом примере color – имя свойства, а blue – значение, которое вы
ему присваиваете.
Внедрение листа стилей
Чтобы внедрить лист стилей в HTML-файл, используйте дескриптор <style>. Поместите этот дескриптор между
дескрипторами <html> и <body> вашего файла, как показано далее:
<html>
<head>
<title></title>
</head>
<style type=”text/css”>
Здесь находятся определения стиля
</style>
<body>
………….
</body>
</html>
Присоединение листа стилей к документу HTML
Вы можете создать лист стилей в отдельном файле и затем применить его ко всем страницам на вашем WEB-сервере.
Скомпанованный лист записывается в текстовый файл с расширением файла css. Это простой простой текстовый файл,
который вы можете создать с помощью текстового редактора Notepad.
Чтобы создать связь с листом стилей, сохраненным в отдельном файле, занесите все ваши стили в файл css и свяжите с ним
ваши HTML-файлы, используя дескриптор <link>, как показано далее:
<html>
<head>
<title></title>
<link rel="stylesheet" href="местоположение файла сss" type=”text/css”>
</head>
<body>
………….
</body>
</html>
Установка нескольких свойств в одном правиле
H1 {color: blue; font-size: 12pt; text-align: center}
В данном случае браузер будет выводить заголовки <h1> синим цветом, используя шрифт размером 12 пунктов, выравнивая
текст в окне браузера по центру.
Группирование селекторов в одном правиле
Если вы хотите определить один и тот же стиль для нескольких дескрипторов, можно вносить их в ваш лист стилей списком,
как показано далее:
P {font-size: 12pt}
UL {font-size: 12pt}
LI {font-size: 12pt}
Вы можете также группировать селекторы вместе и определять правило для них как для группы.
P, UL, LI {font-size: 12pt}
Работа с классами в листах стилей
Класс определяет разновидность стиля, к которому вы обращаетесь в определенном дескрипторе, используя атрибут class.
Например, можно определить три разновидности стиля h1 и затем использовать каждый из них в соответствующем
контексте. Класс определяется во многом подобно тому, как обычно определяют стиль, с той разницей, что к дескриптору
добавляется произвольное имя класса, отделяемое точкой, как показано в примере:
H1.blue {color: blue}
H1.red {color: red}
H1.black {color: black}
При добавлении дескриптора <h1> в вашему HTML – документу, вы устанавливаете атрибут class, чтобы указать, какой
именно стиль вы намерены использовать:
<h1 class=red>Красный заголовок</h1>
