Встроенные таблицы стилей
Встроенные таблицы стилей позволяют управлять элементами в отдельном html-документе при помощи пары команд <style> и </style>. Эта пара со всем её содержимым помещается между командами <head> и </head>.
Пример:
<html>
<head>
<style>
H1 {color:green; text-align:center}
</style>
</head>
<body>
<H1>Зелёный заголовок по центру</H1>
</body>
</html>
Теперь рассмотрим ситуацию, когда в команде <style> для цвета заголовка задан зеленый цвет:
<style>
H1 {color:green}
</style>
а внутри самого заголовка указано:
<H1 style="color:blue">Какого цвета будет заголовок?</H1>
В этом случае и будет применен принцип каскадирования, который позволит разрешить конфликт: приоритет имеет внутренняя таблица стилей (style="color:blue"), поэтому заголовок будет синим.
Синтаксис CSS
Синтаксис CSS отличается от синтаксиса HTML, в нем нет ни тегов, ни атрибутов. Но есть правила, каждое из которых описывает внешний вид одного или группы элементов HTML. Правило записываются следующим образом:
селектор {свойство: значение}
Здесь под селектором подразумевается элемент, для которого задается стиль, далее в фигурных скобках, через ";" записываются парысвойство:значение.
Например, для окрашивания всех заголовков второго уровня в красный цвет достаточно просто указать в описании стиля следующее:
H2 {color: red}
Селекторы могут описывать следующие элементы:
- команды
Пример: P {color: red} стиль применяется к команде <P> - классы
Пример: .red {color: red} стиль применяется к любомым тэгам, у которых атрибут class равен red - псевдоклассы
Пример: A:visited {color: red} стиль применяется к посещенной гиперссылке (тэг <A>). - В том случае, если свойств у тэга несколько, то их разделяют точкой с запятой:
H2 {color: green; font-size: 15pt}.
Для пояснительной информации можно использовать комментарии, которые заключаются в скобки /* и */:
P {color: red} /* это абзац красного цвета */
Следующий пример демонстрирует задание встроенного стиля в html-документе:
| <html> <head> <title>Style Sheets</title> <style> BODY {background: #FFFFFF} P {color: blue; font-size: 12pt;} H2 {color: green; font-family: Courier New; font-size: 18pt} UL {list-style-image: URL(ball.gif)} </style> </head> <body> <h2>Пример</h2> <ul> <li><p>текст 1 <li><p>текст 2 <li><p>текст 3 </ul> </body> </html> | Здесь задан цвет фона документа белый. Текст всех абзацев — синий, размер шрифта 12pt. Заголовок второго уровня зеленого цвета, гарнитура — Courier New, размер шрифта 18pt. Кроме того, именно средствами CSS задан вид маркера для элементов списка <ul> в виде картинкиball.gif. На экране это будет выглядеть так:  |
Основные элементы CSS
Задание цвета
BODY {color: blue} (цвет текста во всем документе)
P {color: #800000} (цвет текста в абзаце)
Задание размера
P {font-size: 2ex} (ex — размер, равный размерам буквы «x»)
P {font-size: 5em} (em — размер, равный ширине буквы «m»)
P {font-size: 32px} (px — размер в пикселах)
P {font-size: 32pt} (pt — размер в пунктах, 1 пункт равен 1/72 дюйма)
Задание курсива
P {font-style: italic}
Задание жирного шрифта
P {font-weight: bold}
Задание гарнитуры шрифтов
P {font-family: Arial} (имя гарнитуры шрифта)
Задание размещения
P {text-align: center} (варианты значений: center / left / right)
P {text-align: justify} (выравнивание по ширине)
Задание отступов
P {margin-top: 10px} — отступ сверху
P {margin-left: 20pt} — отступ слева (от края окна)
P {margin-right: -15pt} — отступ справа (возможно задать и отрицательное значение)
P {text-indent: 5em} — задание отступа в начале абзаца — «красная строка»
Маркированный список
UL {list-style-type: disc} (варианты значений: disc / circle / square)
Нумерованный список
OL {list-style-type: decimal} (арабские цифры, начиная с 1; установлено по умолчанию)
OL {list-style-type: lower-alpha} (строчные латинские буквы: a, b, c, ..., z, aa, ab, ac и т.д.)
OL {list-style-type: lower-roman} (строчные римские цифры: i, ii, iii, iv и т.д.)
OL {list-style-type: upper-roman} (заглавные римские цифры: I, II, III, IV и т.д.)
Свойства текста
Оформление интервала между словами
P {word-spacing: normal} или
P {word-spacing: 3em} — к обычному пробелу прибавляется ширина одной буквы m или нескольких.
Оформление интервала между символами
P {letter-spacing: 2em} — увеличенный интервал, т.н. «разрядка»
P {letter-spacing: normal}