Создание сайта. Блочная верстка сайта | Урок 3

16.12.2007 Верстка сайта 6305 2 комментария

Блочная верстка сайта

Продолжаем изучать основы блочной верстки сайтов. Сегодня познакомимся со стилями. Итак, CSS или иначе Каскадный Лист Стилей. Почему каскадный объясню позднее. Открываем новый документ в PSPad (Блокноте, WordPad-е и т.п.) и вписываем следующую строку:

/* © PIG.RU, 2007 | piggs@pig.ru */

На самом деле содержимое строки не так важно. Она у нас закомментирована слэшами со звёздочками /* */

Комментарии в файле CSS

Строка комментария не читается браузерами. Она нужна только для служебной информации. Верстальщики вписывают туда свои пометки, дабы самому не запутаться в коде, когда его много. В самом верхнем комменте (как у нас) обычно пишутся ссылки на сайт верстальщика или дизайнера, его мыло, авторские права и т.п. Мы ограничимся только копирайтом и мылом.

Комментарии можно вставлять не только в самом начале файла стилей CSS, но и далее по ходу написания кода. Особенно это удобно, когда файл стилей достаточно большого размера. Тогда имеет смысл структурировать его блоками и отмечать границы блоков как раз вот этими самыми комментариями.

Например:

/* Header */

/* Content */

/* Sidebar */ и т.д.

Ну а теперь непосредственно пишем код!

Правила в CSS

В листе стилей код называют правилами. Каждое правило состоит из селектора (читай — атрибута) и объявления. Объявление, в свою очередь, состоит из свойства и значения.

Рассмотрим пример:

p {color: #000;}

Данная запись означает, что все абзацы будут набраны чёрным шрифтом. Здесь p — это атрибут, а то, что находится в фигурных скобках и есть Объявление правила для этого атрибута. Слово color является Свойством объявления, а «решётка» с тремя нулями — Значением. В данном случае значение записано в виде шестнадцатиричного числа, обозначающего цвет. Всем, кто пользуется Фотошопом это должно быть известно. Кто не пользуется, просто знайте: это такая запись цвета из шести знаков.

Почему всего три нуля, если в данном обозначении должно быть шесть знаков? Когда пары знаков одинаковы 00 00 00, то допускается писать сокращённо — 000. Или, например, белый цвет: FFFFFF — то же, что и FFF. Все браузеры это понимают правильно. Кстати, буквы можно использовать и маленькие — #fff. Или вот еще пример: #ff0000 — #f00. Но нельзя сократить такую запись цвета #f0f0f0.

Правило можно писать как угодно — хоть в строку, как у нас, хоть в столбик — это роли не играет. Важно только не забывать две вещи:

1. После каждого Свойства необходимо ставить двоеточие.
2. После каждого Значения — точку с запятой.

Если пропустить хотя бы в одном месте эти знаки, то IE и Firefox будут глючить, а Opera, возможно, и покажет всё без ошибок, но это может потом вам вылезти боком.

Сначала зададим общие правила для страницы:

* { margin: 0; padding: 0; border: 0; } body { padding: 2% 0 0; background: #fff; color: #333; font-family: "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif; } #container { width: 760px; margin: 0 auto; }

Поясним:

1. В первом правиле звёздочка означает не что иное как всю страницу разом. Сама звёздочка — это не тэг и нигде потом в коде страницы не указывается. Браузеры прекрасно понимают её значение и применяют данные с ней правила ко всей странице. В правиле мы указали последовательно:

Отступы — 0,
Поля — 0,
Рамка — 0.

Это нужно для того, чтобы ни поля, ни отступы, ни рамки не появлялись там, где нам не нужно. Если этого специально не указывать, то например тот же IE напихает этого добра куда ни попадя, испортив нам всю кухню. Уж лучше мы в следующих правилах сами добавим что нужно и где нужно. Значения указываются либо в процентах, либо в пикселях. Если стоит ноль, то единицу измерения не нужно указывать.

2. Следующим правилом мы задали для тела страницы следующие указания: поля — сверху 2%, с боков по нулям, снизу тоже ноль. Это значит, что наша страничка не будет лепиться к верхушке окна браузера, а отступит от него на 2% размера окна. Тут значения идут подряд без запятых и только после последнего ставится точка с запятой. Вообще у нас 4 стороны. И значения для них задаются по часовой стрелке, начиная сверху, затем правое, низ и левое. Но так как у нас по бокам одинаково, то и значений мы дали всего три.

Ещё раз:

а) 5px 10px 15px 20px; — сверху будет поле в 5 пикселей, справа 10, снизу 15, слева 20.
б) 5px 10px 15px; — сверху 5, с боков по 10, снизу 15.
в) 5px 10px; — сверху и снизу по 5, с боков по 10.
г) 5px; — со всех сторон по 5.

Думаю, принцип понятен.

Остальное несложно — фон белого цвета, цвет шрифта тёмно-серого (333), ниже перечислены в порядке предпочтения используемые семейства шрифтов. Тут есть одно замечание — если имя шрифта состоит более чем из одного слова, то его нужно взять целиком в кавычки.

3. А вот в этом правиле уже что-то новенькое — появилось незнакомое слово container с решёткой. Данная решётка и означает уникальность атрибута. То есть тэг div с данным атрибутом будет использован только один раз на странице.

Что такое контейнер в верстке сайта

Зачем вообще нужен контейнер? А затем, чтобы поместить нашу страничку в центр экрана монитора. Для этого мы указали у контейнера отступы: сверху и снизу ноль, а с боков auto. Это означает, что при любом размере экрана наш сайт всегда будет строго по центру. Ширина страницы при этом составит 760 пикселей.

Возникает вопрос: а почему бы у тэга body не указать такую же ширину страницы и авто-выравнивание? Дело в том, что браузеры читают данный тег body по-своему и отдают под него ВСЮ видимую область экрана. А нам это не нужно. Вот мы и приспособили эдакую «коробочку» под нашу страничку.

На сегодня это все. Продолжение следует. Оставайтесь на связи!

Еще раз напомню: если что-то не понятно, задавайте вопросы в комментариях.

Автор: Игорь Квентор
www.websovet.com