Урок 4

   Продолжим рассматривать CSS. В принципе, в каскадных листах стилей принято четкое представление правил. С самого начала определяются общие правила для страницы, а после этого – отдельные для каждого элемента. На данный момент мы определили не все общие правила для страницы. Еще не определены заголовки и ссылки (с помощью тегов h, ul, ol, a). Это все будет рассмотрено позже, а сейчас прикрепим к страничке первые значимые элементы. Шапку мы подготовили в графическом редакторе (Фотошоп), она будет служить для нас фоном – для меню сверху и нижней полосы.

   1. header.jpg

   2. nav-bg.jpg

   3. poloska.gif

   4. img1.jpg

   5. img2.jpg

   Таким нехитрым способом мы получили 5 изображений. Их, как правило, располагают в том же каталоге, где уже сохранены лист стилей и, собственно, сама страница. Да, когда разрабатывается одна страница, то все можно скинуть в одну кучу, но когда Вы будете иметь дело с множеством страниц, возьмите себе в привычку размещать все по полочкам и четко разграничивать, иначе просто забудете, что где лежит.

   Пойдем дальше.

   Внесем правило для шапки страницы:

#header { background: url(header.jpg) no-repeat; width: 760px; height: 158px; }

   Тут мы обозначили следующее – в вверху страницы размещена картинка, имеющая размеры 760х158 пикселей (это не существенно, размер может изменяться), а url(header.jpg) – это соответственно ссылка на саму картинку.

   Вы заметили, что ссылка принимает вид обычного имени и расширения. Это из-за того, что картинка находится в той же папке, в которой расположен лист стилей. Поэтому такой вид ссылки называют относительным. Абсолютная ссылка приблизительно имеет такой вид - url(http://www.ххх.ru/header.jpg).

   Если мы глянем ниже, то увидим no-repeat, это означает, что запись используется единожды и не повторяется. Если бы это не было прописано, то браузер бы располагал картинку в окне бесконечно долго, а так мы ограничиваем ее присутствие одним разом. Кроме этого мы могли использовать repeat-x или repeat-y, если бы нам было необходимо размножить фон по вертикали или горизонтали. Необходимо сохранить лист стилей. Это удобно сделать в тот же каталог, где находятся основная страница и изображения. Сохранение происходит так же, как и раньше, но следует изменить расширение файла на .css — назовем его style.css.

   Давайте еще раз откроем главную страницу и в промежутке между добавим участок кода:

<div id="container"> <div id="header"> </div> </div>

   После чего необходимо сохраниться и открыть страничку в любом браузере. Перед нами возникает страница и картинка, находящаяся ровно посредине и вверху. Это контейнер с шапкой добавился к телу страницы.

   Сначала мы добавили тег контейнера строкой <div id="container">, после чего развернули тег шапки <div id="header">, после чего его сразу и закрыли строчкой </div>. После чего окончательно закрыли тег нашего контейнера </div>. div id в этом случае выступает тегом с индивидуальным атрибутом. Атрибут обязательно заключается в кавычки.

   Теперь снова нужно открыть лист стилей.

   Сразу за правилом для шапки напишем правило для навигации:

#nav { background: url(nav-bg.jpg) repeat-x; color: #f00; font-size: 80%; font-weight: bold; line-height: 1.8em; text-align: center; } #nav ul { list-style-type: none; } #nav li { display: inline; margin: 0 8px; } #nav li a { color: #000000; } #nav li a:hover { color: #f00; }

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

   Объясню:
   Под маркированным списком понимается список, состоящий, как Вы поняли, из нескольких пунктов. Но вместо цифр в этом случае используются маркеры, в роли которых могут выступать ромбики, кружки и т.п. В HTML такие списки обозначаются с помощью тега <ul>, а элементы списка (строчки) – тегом <li>. Это выглядит так:

<ul> <li>Я дома.</li> <li>Я на работе.</li> <li>Я сплю.</li> </ul>

   А сейчас снова глянем на наш лист стилей. Атрибутом nav мы обозначили блок навигации. Укажем некоторые настройки для него. Бэкграунд - в качестве него мы выбрали обычный столбик-градиент серого цвета. Для того, чтобы он равномерно растянулся в его значении мы написали repeat-x, это «повторило» его по оси горизонтали. После чего мы обозначили цвет шрифта как ярко-красный - #f00. И, соответственно все остальные параметры – размер, толщина, вертикальная высота. Мы познакомились с новой величиной – em, которая соответствует высоте обычной прописной буквы.

   Уже в следующем правиле мы определили, что в нашем списке не должно быть никаких маркеров. Для этого мы использовали значение none. Если не указывать дополнительных параметров, то согласно умолчаниям, строки располагаются в столбик. Мы укажем горизонтальное расположение с помощью display: inline. Кроме этого добавим отступы по 8 пикселей по бокам, и нулевые сверху и снизу. А теперь пропишем реакцию наших пунктов меню на наведение курсора с помощью тега <а>. У нас получится подобное этому:

#nav li a { color: #000000; } #nav li a:hover { color: #f00; }

   В первом элементе кода мы обозначили цвет ссылки в обычном состоянии, а во втором случае — в активном, то есть после наведения на нее курсора.

   В дополнение добавим следующее правило:

a { text-decoration: none; }

   Это правило – общее для всех ссылок. Оно вводится для того, чтобы все ссылки не могли использовать подчеркивание по умолчанию.