В Уроке 5 мы рассмотрели свойство text-transform, которое может переключать символы с верхнего на нижний регистр. Это также можно использовать для создания эффектов на ссылке:
Эти два примера показывают почти безграничные возможности комбинирования различных свойств. Вы можете создавать свои собственные эффекты - попробуйте!
Обычный вопрос - как удалить подчёркивание ссылок?
Вы должны точно определить, нужно ли убрать подчёркивание ссылок, так как это может значительно снизить использование вашего web-сайта. Люди привыкли видеть на web-страницах синие подчёркнутые ссылки и знают, что по ним нужно щёлкать. Даже моя мама знает это! Если вы уберёте подчёркивание и измените цвет ссылок, весьма вероятно, что это смутит пользователей и они не получат доступа ко всему содержимому вашего сайта web-сайт.
Вообще-то удалить подчёркивание ссылок очень просто. Как вы, может быть, помните изУрока 5, свойство text-decoration можно использовать для определения подчёркивания текста. Для удаления подчёркивания просто установите в text-decoration значение none.
a { text-decoration:none; }
Альтернативно можно также установить text-decoration, наряду с другими свойствами, для всех четырёх псевдоклассов.
Урок 7: Идентификация и группирование элементов (class и id)
Иногда вам нужно будет применить особый стиль к определённому элементу или конкретной группе элементов. В этом уроке мы подробно разберём, как можно использовать class и id для специфицирования свойств выбранных элементов.
Как изменить цвет конкретного заголовка отдельно от других заголовков на вашем web-сайте? Как группировать ссылки по категориям и задавать для каждой категории особый стиль? Это лишь примерные вопросы, на которые мы ответим в этом уроке.
Предположим, у нас есть два списка ссылок сортов винограда - для белого и для красного вина. HTML-код может быть таким:
<p>Виноград для белого вина:</p> <ul> <li><a href="ri.htm">Рислинг</a></li> <li><a href="ch.htm">Шардонэ</a></li> <li><a href="pb.htm">Пино Блан</a></li> </ul> <p>Виноград для красного вина:</p> <ul> <li><a href="cs.htm">Кабернэ Совиньон</a></li> <li><a href="me.htm">Мерло</a></li> <li><a href="pn.htm">Пино Нуар</a></li> </ul>
Далее, мы хотим, чтобы ссылки на белое вино были жёлтого цвета, на красное вино - красного, а остальные ссылки на этой же странице оставались синими.
Для достижения этой цели мы разделим ссылки на две категории с помощью присвоения класса каждой ссылке атрибутом class.
Попробуем установить классы для предыдущего примера:
<p>Виноград для белого вина:</p> <ul> <li><a href="ri.htm" class="whitewine">Рислинг</a></li> <li><a href="ch.htm" class="whitewine">Шардонэ</a></li> <li><a href="pb.htm" class="whitewine">Пино Блан</a></li> </ul> <p>Виноград для красного вина:</p> <ul> <li><a href="cs.htm" class="redwine">Кабернэ Совиньон</a></li> <li><a href="me.htm" class="redwine">Мерло</a></li> <li><a href="pn.htm" class="redwine">Пино Нуар</a></li> </ul>
Далее мы можем определить специальные свойства для ссылок whitewine и redwine, соответственно.
Как показано в примере, вы можете определять свойства для элементов, принадлежащих к определённому классу, с помощью .имя_класса в таблице стилей документа.
