 |
Задание. Эффекты ссылок. Несколько стилей ссылок с использованием селекторов классов и селекторов потомков. Существуют стандартные для всех браузеров состояния ссылок, управлять которыми можно с помощью селекторов псевдоклассов
|
|
|
|
Задание
Задайте следующие параметры форматирования для текста главной страницы " Туристическая фирма":
- Создайте стиль и примените его к одному из заголовков и одному понятию, выделенному полужирным шрифтом.
Задайте следующие параметры форматирования для текста web-страниц по направлениям отдыха:
- Создайте стили для написания старой и новой цены путевки. Старая цена — серого цвета, перечеркнутая. Новая цена — красного цвета, на 50% более крупного кегля, чем остальной текст.
- Отформатируйте несколько фрагментов текста вне таблицы и в ячейках таблицы полужирным шрифтом. Создайте стиль, который должен применяться только к тексту, выделенному полужирным шрифтом, расположенному в ячейке таблицы. Если полужирный текст расположен вне таблицы, то стиль применяться не должен. Используйте селекторы потомков.
Рассчитайте значения специфичности для селекторов:
| . list li b {}#container. sidebar #nav {}#main. content p: first-letter {} |
Эффекты ссылок
Существуют стандартные для всех браузеров состояния ссылок, управлять которыми можно с помощью селекторов псевдоклассов. Для стилей ссылок доступны следующие селекторы:
- : link — упралвяет состоянием ссылки до ее активации.
- : visited — управляет состоянием, в которое переходит ссылка после ее активации.
- : hover — управляет состоянием, когда указатель мыши наведен на ссылку.
- : active — управляет состоянием, возникающим при щелчке на ссылке для ее активации.
При этом важен порядок следования псевдоклассов —: visited указывается до: hover, иначе посещённые ссылки не будут изменять свой цвет при наведении на них курсора.
Рассмотрим на примере:
| a: link {color: blue; } a: visited {color: purple; } a: hover {color: fuchsia; } a: active {color: red; } |
Результат работы данного кода: ссылка
|
|
|
Несколько стилей ссылок с использованием селекторов классов и селекторов потомков
Допустим, нам потребовалось создать область навигации на основе ссылок cо своим оформлением, а к ссылкам в тексте должен быть применен другой стиль. Решить эту задачу можно двумя способами: с использованием селекторов классов или селекторов потомков.
Первый способ. Несколько стилей ссылок с использованием селекторов классов.
| /*стиль для ссылок в тексте*/ a: link {color: blue; } a: visited {color: purple; } a: hover {color: fuchsia; } a: active {color: red; } /*стиль для ссылок области навигации*/ . nav: link {color: black; background-color: white; } . nav: visited {color: blue; background-color: white; } . nav: hover {color: white; background-color: olive; } . nav: active {color: yellow; background-color: olive; } |
Чтобы применить класс к ссылкам панели навигации, к каждому тегу ссылки панели навигации необходимо добавить атрибут class=" nav":
| < A class=" nav" href=" home. htm" > Домой< /A> < A class=" nav" href=" products. htm" > Товары< /A> < A class=" nav" href=" contact. htm" > Контакты< /A> |
Второй способ. Несколько стилей ссылок с использованием селекторов потомков.
Недостаток первого способа заключается в добавлении множества атрибутов class в HTML-документ. Этой ситуации можно избежать, если воспользоваться селекторами потомков. В рассмотренном ниже примере особый стиль будет применен ко всем элементам a, являющимся потомками родительского элемента с идентификатором nav.
| /*стиль для ссылок в тексте*/ a: link {color: blue; } a: visited {color: purple; } a: hover {color: fuchsia; background-color: white; } a: active {color: red; } /*стиль для ссылок области навигации*/ #nav a: link {color: black; background-color: white; } #nav a: visited {color: blue; background-color: white; } #nav a: hover {color: white; background-color: olive; } #nav a: active {color: yellow; background-color: olive; } |
Элемент div является универсальным блочным элементом и предназначен для группирования элементов документа с целью изменения вида содержимого через стили. Чтобы применить стиль к ссылкам панели навигации, необходимо создать блок с помощью тега div с идентификатором nav:
|
|
|
| < DIV id=" nav" > < A href=" home. htm" > Домой< /A> < A href=" products. htm" > Товары< /A> < A href=" contact. htm" > Контакты< /A> < /DIV> |
Существует важное отличие между селекторами класса и ID-селекторами. Селекторы класса можно использовать в документе любое количество раз, а ID-селекторы — только один раз.
Задание
Модифицируйте стиль ссылок на разделы документа " Туристическая фирма", параметры для различных состояний ссылки определите самостоятельно.
Создание панели навигации
Создадим вертикальную панель навигации на основе списка ссылок. Сначала следует разметить HTML-код:
| < div class=" nav" > < ul> < li> < a href=" #" > О компании< /a> < /li> < li> < a href=" #" > Услуги< /a> < /li> < li> < a href=" #" > Контакты< /a> < /li> < /ul> < /div> |
Каждый браузер по умолчанию отображает списки с отступами и полями, а также добавляет маркеры к пунктам списка. Следует обнулить отступы и поля (padding, margin), удалить все маркеры в списке свойством list-style-type со значением none, задать ширину (width). Обратите внимание, в примере используются контекстные селекторы.
| . nav ul { margin: 0; padding: 0; list-style-type: none; width: 200px; } |
Далее следует сделать ссылки блочными элементами (display: block). Увеличить площадь ссылок можно с помощью отступов (свойство padding).
Каждый браузер по умолчанию отображает ссылки с подчеркиванием. Следует убрать подчеркивание у ссылок свойством text-decoration со значением none.
С помощью свойства border в меню добавлены разделители — горизонтальные линии.
| . nav a { display: block; padding: 10px 15px; text-decoration: none; color: #0088CC; border-bottom: 1px solid #E5E5E5; } |
Далее для оформления различных состояний пунктов меню используются селекторы псевдоклассов. В примере с помощью псевдокласса: hover задан стиль при наведении курсора мыши на ссылку.
| . nav a: hover { color: #ffffff; background: #0088CC; } |
|
|
|
