Синтаксис таблиц CSS
Синтаксис таблиц CSS во многом аналогичен синтаксису HTML, но имеет ряд отличий.
В общем виде обычный формат определения стиля CSS записывается следующим образом:
<CSS selector> { <style attribute 1>: <value 1>; <style attribute 2>: <value 2>; ... <style attribute n>: <value n> }
ПРИМЕР:
P { font-family: "Arial"; font-size: 12px; color: Black } |
- P - селектор CSS, который представляет имя тега <P>
- font-family - атрибут стиля 1, задает семейство шрифта;
- Arial - значение 1, задает тип шрифта - Arial;
- font-size - атрибут стиля 2, задает размер шрифта;
- 12px - значение 2, определяет конкретный размер шрифта - 12 пикселей;
- color - атрибут стиля 3, задает цвет шрифта;
- Black - значение 3, задает черный цвет шрифта.
Основные правила создания стиля CSS:
- стиль определяется селектором, который однозначно идентифицирует конкретный стиль, в который входит список атрибутов стиля с их значениями (в нашем примере - это селектор P);
- селектор "привязывает" стиль к конкретному элементу html-страницы, на который он распространяет свое действие (в нашем примере - это тег <P>);
- за селектором, через пробел, в фигурных скобках указывают список атрибутов и их значений;
- атрибут стиля определяет конкретный элемент html-страницы, при этом значение атрибута отделяется знаком двоеточия. В некоторых случаях значение атрибута должно быть заключено в кавычки;
- пары <style attribute n>: <value n> друг от друга отделяются симвлом "точка с запятой";
- между последней парой <style attribute n>: <value n> и закрывающей фигурной скобкой "точка с запятой" не ставится!;
- селекторы и имена стилей не должны содержать знаков пробела или разрыва строки;
- определение стиля принято начинать с новой строки;
- в других местах определения стиля пробелы и разрывы строк браузер игнорирует, поэтому CSS-код для удобства чтения можно форматировать по аналогии с html-кодом.
Начинающий веб-мастер должен понять, что атрибуты html-тегов и атрибуты стилей CSS - это не одно и то же.
В примере мы произвели неявную привязку стиля - когда браузер прочитает наш стиль, он автоматически его применит ко всем абзацам html-страниц, которые оформлены тегом <P>. Текст, заключенный в тег <P>, будет отображен шрифтом Arial, черного цвета, размером 12 пикселей.
Прием, который мы рассмотрели, назыается стилем переопределения тега, т.к. в качестве селектора CSS указан один из html-тегов. Обратите внимание, что в CSS-коде селектор P не заключается в скобки (< >)! Селектор не чувствителен к регистру.
Комментарии CSS
В разделе "Основы HTML" было рассказано о комментариях, особых фрагментах html-кода, который не обрабатывается браузером, и служат в качестве справочной информации для веб-мастера.
Аналогичная возможность существует и в CSS.
Для того, чтобы закомментировать отдельную строку CSS-кода, в самом ее начале помещают символ наклонной косой черты или слэша ( / )
ПРИМЕР:
/ Simple reset .tbl { margin: 0; padding: 0; } |
Для того, чтобы создать многострочный комментарий, используют комбинацию символов /* и */, между которыми помещается комментарий:
ПРИМЕР:
/* Color, typography and basic layout (Shared for all devices and clients) Colors: - #F0E1C8 -> light cream (background) - #000000 -> Dark brown (body text, rules) - #42628F -> Dark blue (link text) - #7b96bc -> Medium-light blue (navigation and footer background) */ body { background: #F0E1C8; color: #000000; font: Georgia } a, a:visited { color: Blue; } |