CSS (Cascading Style Sheets) - это язык, содержащий описание свойств для определения внешнего вида элементов документа. Спецификация CSS определяет свойства и описательный язык для установления связи с HTML-элементами. Термин каскадные указывает на возможность слияния различных видов стилей и на наследование стилей внутренними тэгами от внешних.
Синтаксис записи стилей:
Селектор {
свойство1: значение;
свойство2: значение;
}
Селектор определяет, к каким элементам (тегам) страницы будут применяться правила, заданные парами «свойство – значение». Чтобы все заголовки 1-го уровня отображались синим цветом размером 20 пикселей, необходимо сделать следующую запись:
Н1 {
color: blue;
font-size: 20pt;
}
Все, что записано в фигурных скобках, - определение селектора. Для элементов, описанных в файле CSS, справедлив принцип наследования. Например, все элементы страницы являются дочерними директивами тега BODY и будут наследовать его свойства:
BODY {
background: white;
color: black;
font-family: sans-serif;
font-size: 10pt;}
В качестве селектора можно использовать:
Название тега – тогда стиль применится ко всем таким тегам.
Пример:
A { color: red;}
Первая строчка этого CSS-кода задает всем ссылкам 12-й размер шрифта и убирает подчеркивание. На второй строчке указывается, что у всех таблиц граница будет черного цвета, сплошной (solid) и шириной 1 пиксель.
Несколько тегов через запятую – стиль применится для всех перечисленных тегов.
Пример:
H1, H2, H3 {color: red;} /* делаем все заголовки красными */
Несколько тегов через пробел – такие селекторы называют контекстными или вложенными. Их используют для того, чтобы применить стили к элементу, только если он вложен в нужный элемент.
TABLE A {font-size: 10pt;}
UL A {font-size: 14pt;}
ID элемента. В стилях уникальный идентификатор указывается после знака # – правила применятся к тегу с атрибутом id="идентификатор".
<p id="supersize">Справочник HTML и CSS</p>
#supersize {font-size: 200%}
Классы стилей.
<p class=" maxsize">Справочник HTML и CSS</p>
<p class="minsize">Послесловие</p>
Пример:
.maxsize {font-size: 150%}
.minsize {font-size: 70%}
Дочерний селектор ul > li > span – правила применяются только для дочерних элементов.
Соседние селекторы li + span – правила применяются только для соседних элементов:
Символ * – правила применятся ко всем элементам документа:
* {
padding: 0;
margin: 0;
}