Синтаксис таблиц 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;
}
|
