Урок 1: Основы синтаксиса CSS

Итак, ваш HTML теперь чист и опрятен, а теги закрыты. Пришло время использовать CSS!

Как выглядит CSS?

Есть три места, куда Вы можете поместить ваш CSS: в разделе <head> вашей страницы; в тег <style> </style>; во внешний документ, связанный со страницей; или как часть html-тега. Для начала займемся синтаксисом первых двух методов.

Код CSS, подходящий для первых двух методов будет выглядеть следующим образом:

селектор {
свойство1: какое-то значение;
свойство2: какое-то значение;
свойство3: какое-то значение;
}

Вот - типичное правило стиля для элемента <p>:

P {
font-size: 12px;
font-family: verdana, helvetica, arial, sans-serif;
color: #333333;
margin-left: 2em;
}

В этом случае, P - селектор, выбирающий элемент, к которому вы хотите применить определенные стили. В фигурных скобках - свойства и значения. Свойство задано заранее. Например, первая строка означает, что я хочу определить свойство "font-size" (размер шрифта). Значение - это то, что назначено данному свойству: в нашем случае это - значение 12 пикселей.

Давайте посмотрим, как можно перевести типичный тег <font> в стиль CSS. В начале сам тег <font>:

<font size="3" color="green" face="verdana,arial,sans-serif">Любой текст</font>

А вот тоже самое (почти) в виде стиля CSS:

селектор {
font-family: verdana,arial,sans-serif;
font-size: 1em;
color: green;
}

Селектором в этом случае может являться любой тег, находящийся на странице. Например, мы можем применить это правило стиля к следующему абзацу:

Это зеленый текст!

Обратите внимание: названия цветов (или их шестнадцатеричные значения) не берутся в кавычки, кроме того, в CSS отсутствует прямой эквивалент атрибута font size="3" (4, 5 и т.д.). В этом случае мы использовали em, в качестве единицы измерения (в более поздних уроках будут и различия между разными единицами измерения).

Размещение вашего CSS кода в разделе <head>

Для начинающих проще всего помещать правила CSS в раздел своей web-страницы. Таким образом, вы сможете вносить изменения в код, просматривать страницу в браузере и наблюдать результаты этих изменений немедленно. Многие текстовые редакторы автоматически вставляют необходимые теги для помещения CSS в , но в случае, если ваш редактор этого не делает, - выполните следующее.

В пределах тега <head> </head> вашей страницы HTML, поместите эти теги:

Зачем нужны теги ? Они скрывают ваш CSS от более ранних браузеров, не имеющих поддержки CSS (возможно вы пользовались подобными тегами, чтобы скрыть код JavaScript от старых браузеров). Если Вы хотите добавить, комментарии в пределах раздела STYLE – заключайте их в /* */.

Задание для Урока 1.