Продолжаем разговор за CSS. Вообще принято некое упорядоченное расположение правил в css. Вначале указываются общие для всей страницы, а потом идут в той очерёдности, в которой элементы на странице появляются сверху вниз. Мы пока указали не все общие элементы. Нет заголовков, списка, ссылок (тэги h, ul, a). Их мы добавим позже, а пока начнём уже хоть что-нить прицеплять весомое к странице.
Из нашего макета я вырезал целиком шапку (её мы используем не как картинку, а как фон), оба рисунка с поросями, рисунки вензеля, зелёной линии внизу, фон полосы навигации (не весь, а только отрезанный кусочек 8х35 пикселов) и зеленой галки у списка новостей. Итого у нас вышло 7 изображений. Их поместим в той же папке, где у нас лежит сама страничка и лист стилей.
Далее в листе стилей пишем правило для "шапки” (header):
Здесь мы указали, что вся наша шапка залита фоном-картинкой с размерами 760х158 пикселей (такая у меня вышла при разрезании макета). url(header.jpg) - это ссылка на картинку. Важный момент(!) — почему ссылка выглядит как простое имя с расширением для картинки? Да потому, что сама картинка лежит в той же самой папке, где и лист стилей. Это так называемая относительная ссылка. Если бы была абсолютной, то начиналась бы с http://
А теперь сохраним наш лист стилей в ту же самую папочку, где лежит Главная страница и картинки. Сохраняем таким же образом, как и раньше, только в имени добавляем расширение .css - style.css
Теперь мы снова откроем нашу Главную страницу. Между тегами body добавляем следующий код:
Сохраняемся. Открываем нашу страничку браузером и любуемся на ровно посерёдке отцентрованную шапку. Что мы сделали? Мы добавили в тело страницы нашу "коробочку” - контейнер, а уже в него положили шапку. То есть вложенность тэгов налицо. div id — это и есть тэг с индивидуальным атрибутом, который стоит после знака равенства и должен быть обязательно заключен в кавычки.
Полюбовались? Теперь продолжим писать код для листа стилей. Открываем его и следом за правилом для шапки запишем правило для блока навигации:
Уже немного сложнее, не правда ли? Разберём по косточкам. Панель навигации будет у нас одна — сразу под шапкой, горизонтальная. (в подвале сделаем дублирование обычными ссылками). Для её реализации мы воспользуемся таким элементом как маркированный список. Для тех, кто не в танке объясняю: маркированный список — это список из нескольких пунктов, записанных в столбик, у которых слева взаместо порядковых чисел стоят маркеры (кружки, квадратики, и пр.) Список сей в HTML обозначается тэгом ul. Элементы списка (а попросту говоря - строчки) обозначаются тэгом li. Выглядит это примерно так:
<ul> <li>Утром надел трусы.</li> <li>Не забыл про часы.</li> <li>Снова не забыл.</li> </ul>
Как видим, тэги имеют парные закрывающие тэги, и тэг li вложен в тэг ul. Теперь вернёмся к нашему листу стилей. Блок навигации мы обозвали атрибутом nav. Вначале укажем общие настройки для него: бэкграунд — это картинка с именем nav_bg.jpg размером 8х35 пикселей. Это обычный такой "столбик” с градиентом от белого к серому сверху вниз. Чтобы растянуть его по всей полосе навигации, мы указали в значении слово repeat-x, что означает "повторить по оси х”, то есть по горизонтали. Далее указали цвет шрифта ярко-красного цвета #f00 для активного раздела. Он у нас не будет ссылкой, а останется простым текстом (делать на Главной странице ссылку на самое себя — тавтология). Остальное в этом правиле несложно: размер шрифта, толщина, высота по вертикали (тут появилась новая единица измерения em, которая равна высоте прописной буквы выбранного шрифта. Значение 1.8em показывает, что шрифт увеличен на 1.8 высоты стандартной буквы), ну и выравнивание текста по центру.
Следующее правило указывает, что у нашего списка не должно быть никаких маркеров. Это задаётся значением none.
Далее указываем для строк списка расположение по горизонтали, то есть в линию, чтобы не получился обыкновенный столбец. И отступы: сверху и снизу по нулям, с боков по 8 пикселей.
А теперь укажем, каким образом наши менюшки будут раегировать на наведение мышкой на них. Понятное дело, что менюшки — это ссылки на другие разделы нашего сайта. А каким тэгом означаются ссылки? Пральна, тэгом a. Поэтому пропишем ещё пару правил для этих ссылок. В первом мы обозначили цвет ссылки в спокойном состояни, а во втором — в активном, то есть при наведении мыши.
Ну а теперь следом добавим вот такое правило:
a { text-decoration: none; }
Оно указывает, что все ссылки на странице по умолчанию не используют подчёркивание. Ну согласитесь, в меню навигации это не всегда выглядит красиво. А там где нужно, мы это правило изменим.
