Урок #5. Интересные возможности CSS


В этом уроке мы рассмотрим интересные возможности языка стилей CSS, которые могут пригодится при создании сайта.

Удаляем подчеркивание ссылок

По умолчанию все ссылки на веб-странице подчеркиваются. Но иногда возникает потребность в удалении подчеркивания ссылок. Как это сделать? Сделать это можно при помощи CSS.

Вот пример:

a{text-decoration:none}

Как видите в свойстве text-decoration указано значение none. Это говорит о том, что с текстом ничего не будет происходить (он не будет подчеркнут).

Изменяем цвет ссылки при наведении на нее указателя мыши

Можно сделать так, чтобы цвет ссылки менялся при наведении на нее указателя мыши. В следующем примере для ссылок установлен синий цвет, но при наведении указателя мыши на ссылку цвет ссылки будет красным:

a{color: blue}
a:hover{color:red}

С первой строкой у Вас не должно быть вопросов. А вот вторая строка вам еще не знакома. Во второй строке использован псевдокласс hover. Обратите внимание на двоеточие после буквы a. Правило во второй строке будет применено только тогда, когда на ссылку пользователь наведет указатель мыши. Допустимы и другие псевдоклассы: active,visited. Вот мы их сейчас и рассмотрим на примерах.

Изменяем цвет активных ссылок

Можно изменить также цвет активных ссылок. Для этого нужно использовать псевдокласс active

Вот пример:

a:active{color:black}

В данном примере для активных ссылок установлен черный цвет. То есть после того как пользователь кликнул по ссылке, она стала черной.

Изменяем цвет посещенных ссылок

Цвет посещенных пользователем ссылок можно тоже изменить. Делается это при помощи псевдокласcа visited.

Вот пример:

a:visited{color:green}

В данном примере для посещенных ссылок установлен зеленый цвет.

Рассмотрим пример написания полного html-кода веб-страницы с применением css-стилей для ссылок.
Вот исходный код:

<html>
<head>
<style >
a{
  color:blue
}
a:hover{
  color:red
}
a:active{
  color:black
}
a:visited{
  color:green
}
</style>
  <title>Page</title>
</head>

<body>
     <a href="#">Ссылка 1</a>
     <a href="#">Ссылка 2</a>
     <a href="#">Ссылка 3</a>
</body>

</html>

В данном примере для ссылок установлен синий цвет. Если пользователь наведет указатель мыши на любую из ссылок, цвет ссылки станет красным. Для активных ссылок установлен черный цвет. Для посещенных пользователем ссылок установлен зеленый цвет.


<<<<Назад   Содержание   Далее>>>