Лекция 2-05

Введение
Без ссылок Web-пространство потеряет смысл.
Ссылки позволяют отслеживать информацию, переходя с одной Web-страницы на другую и от одной идеи к другой независимо от местонахождения сервера информационного сайта.

Удаление подчеркивания ссылок (1)
Для того чтобы удалить стандартное подчеркивание ссылок используется свойство text-decoration с селектором псевдокласса для непосещаемых и посещаемых ссылок:
a:link, a:visited {
text-decoration: none;
}
Псевдокласс :link применяется к ссылкам, которые пользователь еще не посетил. Псевдокласс :visited соответствует ссылкам, уже посещенным пользователем.

Удаление подчеркивания ссылок (2)
Свойство text-decoration может принимать пять значений:

Пример. Подчеркивание ссылок
Домой
Следующая
<br>a:link, a:visited {<br>text-decoration: none;<br>}<br>
Домой
Следующая

Изменение цвета ссылок в разных секциях страницы (1)
При оформлении ссылки в основном тексте и в элементах навигации, сначала секции страницы помещаются в элементы div с разными значениями атрибутов:
Домой
Следующая
Домой

Изменение цвета ссылок в разных секциях страницы (2)
Затем используются селекторы потомка вместе с селекторами ID, для того чтобы отделить разные стили ссылок, предназначенные для разных частей Web-страницы:
#nav a:link { color: blue;}
#nav a:visited { color: purple;}
#content a:link { color: black;}
#content a:visited { color: yellow;}

Меняющиеся курсоры (1)
Чтобы заменить стандартный курсор, отображаемый, когда указатель мыши наведен на ссылку, используется свойство cursor:
a:link, a:visited {
cursor: move;
}

Меняющиеся курсоры (2)
Свойство cursor может принимать следующие значения:

Создание навигационных текстовых меню (1)
Для того, чтобы создать меню, прежде всего надо разметить список ссылок в маркированном списке так, чтобы они были включены в элемент-контейнер div с атрибутом id:
Домой
Следующая
Далее используется свойство border для создания основной структуры дизайна:

Создание навигационных текстовых меню (2)
#nav {
border-top: 1px solid black;
border-right: 1px solid red;
border-left: 1px solid red;
padding: 0;
margin-bottom: 1em;
color:black;
width: 8 em;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#nav ul li {
margin: 0;
border-bottom: 1px solid black;
}

Вставка подменю в вертикальное меню (1)
Основное навигационное меню дополняется в нужном пункте списка вложенным маркированным списком:
Домой
Главная
Следующая

Вставка подменю в вертикальное меню (2)
После задается некоторое поле слева от вложенного маркированного списка с помощью селектора потомка:
#nav ul ul {
background-color: grey;
margin-left: 10 px;
}

Создание горизонтальных навигационных меню (1)
Данное меню создается по принципу вертикального меню, но при задании правил CSS, надо обязательно указать свойство float для пунктов меню: