Шаг 8
Оформление внешнего вида web страницы (навигация)
- Переходим в отделение стиля и с новой строки, после последнего правила, которое мы там записали
(правило элемента h1) пишем серию правил, которые сформируют стиль навигации нашего
сайта.
#nav {
font-size: 80%;
margin: 0;
padding: 5px 0 20px 10px;
border-bottom: 2px solid #666666;
background: #ccccaa;
}
#nav ul, #nav li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#nav a {
color: #003366;
font-weight: bold;
float: left;
margin: 0 10px;
text-decoration: none;
}
#nav a:hover {
color: #ff6600;
border-bottom: 4px solid #cc0000;
padding-bottom: 2px;
background: transparent;
}- Элемент #nav – селектор навигации.
- Строка border-bottom: 2px solid #666666; - нижняя рамка: сплошная линия толщиной
два пикселя серого цвета.
- Строка padding: 5px 0px 20px 10px; - поля отступа со всех четырех сторон внутри
селектора #nav.
- Элементы #nav ul, #nav li – это общее правило списка для селектора навигации
#nav ul и элементов списка для селектора навигации #nav li. Кнопки
навигации сайта будут находиться внутри списка ul, при этом каждая кнопка будет
являться элементом списка li.
- Строка display: inline; - где display это код способа отображения
элементов, а inline заставляет элементы списка выстраиваться в строку. Если говорить
русским языком, то этот параметр сообщает компьютеру о том, что навигация будет горизонтальной – в
строку, а не вертикальной в столбик.
- Строка list-style-type: none; - параметр list-style-type –
определяет маркер для списка, а свойство none отменяет отображение маркера. Перед
названием кнопки не будет стоять маркер в виде жирной точки или квадратика.
- Элемент #nav a– правило ссылок между страницами сайта для селектора навигации.
- Строка font-weight: bold; - толщина шрифта: жирный шрифт.
- Строка float: left; - плавание (размещение) элемента: по левому краю.
- Строка text-decoration: none; - текстовые эффекты отсутствуют.
- Элемент #nav a:hover – правило для кнопок (ссылок) селектора навигации,
при наведении на них мышкой стрелки курсора.
- Строка padding-bottom: 2px; - поле нижнего отступа: два пикселя.
- Строка background: transparent; - цвет фона: прозрачный.
- Параметры, которые не прокомментированы, прочитайте самостоятельно,
они уже упоминались в настоящем руководстве.
- Итак, на этом мы закончили создание отделения стиля для нашего сайта.
- Шаг 9 >>>
Карта сайта
