Урок 4

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

1.

2.

3.

4.

5.

Таким нехитрым способом мы получили 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;
}

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

Урок 1 | Урок 2 | Урок 3 | Урок 4 | Урок 5 | Урок 6 | Урок 7 | Урок 8 | Урок 9