Как задать оформление ссылок с помощью CSS?

Категория: HTML/CSS
2011-08-23 23:58:22

Псевдокласс hover, который добавляется к селектору A, как раз определяет стиль ссылки, когда на нее наводится курсор мыши. В таблице стилей вначале указывается селектор A, потом через двоеточие hover. Например:

code: #html
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. A {
  5.  color: #008000; /* Цвет обычной ссылки */
  6.  text-decoration: none; /* Убираем подчеркивание у ссылок */
  7. }
  8. A:visited {
  9.  color: #800080; /* Цвет посещенной ссылки */
  10. }
  11. A:hover {
  12.  color: #800000; /* Цвет ссылки при наведении на нее курсора мыши */  
  13.  text-decoration: underline; /* Добавляем подчеркивание */
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <p><a href="rome.html">Cras ingens iterabimus aequor</a> - завтра снова мы выйдем в огромное море.</p>
  19. </body>
  20. </html>

В данном примере ссылка становится подчеркнутой и меняет свой цвет, когда на нее наводится указатель. Псевдокласс hover в таблице стилей идет после visited. Это имеет значение, иначе посещенные ссылки в данном случае не будут изменять свой цвет.

Поделиться:

Похожие статьи:

теги: новички, ссылки, таблицы стилей