ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Вид курсора. Псевдостили гиперссылок

Вид курсора. Псевдостили гиперссылок

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

  • auto — web-браузер сам определяет форму курсора мыши;
  • A { cursor: auto }

  • crosshair — в виде креста;
  • A { cursor: crosshair }

  • default — стрелка (курсор по умолчанию);
  • A { cursor: default }

  • hand — в виде руки;
  • A { cursor: hand }

  • move — стрелка указывающая все направления;
  • A { cursor: move }

  • n-resize, ne-resize, nw-resize, s-resize, se-resize, sw-resize, e-resize, w-resize — стрелки , показывающие направление;
  • A { cursor: n-resize }

  • text — текстовой курсор;
  • A { cursor: text }

  • wait — песочные часы;
  • A { cursor: wait }

  • halp — стрелка с вопросительным знаком;
  • A { cursor: halp }

Раскраска полос прокруток в окне web-браузера

  • Атрибут scrollbar-base-color задает цвет бегунка, кнопок со стрелками и их граней;
  • BODY { scrollbar-base-color: green }

  • Атрибут scrollbar-face-color задает цвет бегунка и кнопок со стрелками. Цвет граней не задается;
  • BODY { scrollbar-face-color: red }

  • Атрибут scrollbar-arrow-color задает цвет стрелок;
  • BODY { scrollbar-arrow-color: white }

  • Атрибут scrollba-track-color задает цвет области, покоторой перемещается бегунок;
  • BODY { scrollbar-track-color: white }

  • Атрибут scrollbar-3dlight-color задает цвет верхней и левой грани элементов, а атрибут scrollbar-highlight-color задает цвет "освещенной" части этих граней;
  • BODY { scrollbar-3dlight-color: red }

    BODY { scrollbar-highlight-color: yellow }

  • Атрибут scrollbar-shadow-color задает цвет правой и нижней грани элементов, а атрибут scrollbar-darkshadow-color задает цвет "тени" этих граней;
  • BODY { scrollbar-shadow-color: red }

    BODY { scrollbar-darkshadow-color: black }

    Эти атрибуты работают не во всех web-браузерах.

Псевдостили гиперссылок. Отображение ссылок разными цветами

Большинство веб-браузеров позволяют отобразить посещенные и непосещенные ссылки разными цветами. Достигается это при помощи предопределенных стилей — псевдостилей:

  • A: link —вид непосещенной ссылки;
  • A: visited — вид посещенной ссылки;
  • A: active — вид активной ссылки;
  • A: hover — вид ссылки, на которую указывает курсор мыши.

Внимание! До и после двоеточия не должно быть пробелов.

Псевдостили аналогичны параметрам link, vlink и alink тега <body>:

<body link = "#000000" vlink = "#000080" alink = "#FF0000">

эквивалентно заданию стиля

A: link {color: #000000 }

A: link {color: #000080 }

A: link {color: #FF0000 }

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

A: link { color: red; text-decoration: underline }

A: visited { color: blue; text-decoration: underline }

A: active { color: green; text-decoration: none }

A: hover { color: lime; text-decoration: none }

Кроме того, можно применить стиль гиперссылок не только ко всему документу, но и к определенному классу:

A .linkl: link { color: red; text-decoration: underline }

A .linkl: visited { color: blue; text-decoration: underline }

A .linkl: active { color: green; text-decoration: none }

A .linkl: hover { color: lime; text-decoration: none }

Рассмотрим пример, в котором продемонстрирована возможность задания внешнего вида гиперссылок для всего документа, а также для определенного класса.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Псевдостили гиперссылок</title>
<style>
A:link { color: red; text-decoration: underline }

A:visited { color: blue; text-decoration: underline }

A:active { color: green; text-decoration: none }

A:hover { color: lime; text-decoration: none }

A .linkl:link { color: red; text-decoration: underline }

A .linkl:visited { color: blue; text-decoration: underline }

A .linkl:active { color: green; text-decoration: none }

A .linkl:hover { color: lime; text-decoration: none }
</style>
</head>

<body>
<a href="1.html">Ссылка1</a><br>
<a href="3.html" class="linkl">Ссылка2</a>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.