Урок 2: Погружение в CSS

С возвращением! Если Вы пропустили Урок 1, пожалуйста вернитесь, и прочтите его (вместе с вводными разделами) прежде, чем приступить к данному уроку.

Краткий обзор Урока 1

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

Также, необходимо подчеркнуть важность правильного формирования вашего HTML-кода. Необходимость закрывать теги и т.п. будет вашей головной болью до тех пор, пока не станет вашей второй натурой. И, как я уже объяснял, есть инструменты, которые помогут вам в этом.

На данный момент вы должны иметь простую HTML страницу похожую на эту, с правильно сформированным и структурированным кодом HTML. Используя нашу страницу, как основу, мы можем очень быстро придать ей визуальной привлекательности, используя только CSS.

Основной синтаксис CSS

Для того, чтобы удостовериться, что основной синтаксис CSS отложился у нас в голове, давайте посмотрим на него еще раз:

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

Селектор - это то, куда вы помещаете название HTML тега, или ID, или класс элемента для которого хотите определить правило (мы рассмотрим ID и классы на следующем уроке). Вы можете поместить (обязательно в фигурных скобках {}) многократное описание свойство: значение, не забывая в конце каждого ставить «;»!

Вещи, которые нужно знать, чтобы избежать проблем, особенно с “битыми” браузерами, такими как Netscape 4.x (на текущий момент, не такой глобальной, но все же основной проблемой при использовании CSS является IE6, которым все еще пользуется большинство пользователей Интернета. «Битость» IE проявляется в ситуациях, значительно более изощренных, чем приведенные ниже. При базовом использовании CSS проблем с браузерами уже нет [ Черный Кот]):

Не помещайте кавычки вокруг значений цвета, как вы это делали в HTML -коде. Например, когда вы определяете цвет фона для ячейки таблицы HTML, вы набираете bgcolor = "somecolor". В CSS, вы должны опустить кавычки. (Вообще-то в Netscape 4.x этот нюанс реально влияет на цвет. Попробуйте - это на самом деле странно).
Не оставляйте дополнительные пробелы вокруг пунктуации. Для большинства браузеров это не имеет никакого значения, но да ... в Netscape 4.x наличие дополнительных пробелов может быть принципиальным. Так как это вопрос привычки, просто старайтесь набирать свойство:значение; без пробела перед двоеточием.
Всегда помните о том, что позади каждого правила необходимо ставить “;” , так как вы никогда не знаете, когда вам может понадобиться вернуться и добавить правило. Таким образом всегда в конце правила ставить ; - хорошая привычка (в терминах программирования точка с запятой - “разделитель” в CSS).
Вообще, с точки зрения Netscape 4.x, безопасней держаться подальше от сокращенного синтаксиса (например объявления всех значений для свойства font)

Итак, пришло время погрузиться вглубь CSS!