Главная
К библиотеке

Military.com Free Screensavers!

Описание стилей элементов <A>
Мне неоднократно приходилось отвечать на вопросы о том, как сделать неподчеркнутые ссылки, как сделать ссылки разного вида на странице. Поэтому сегодня я остановлюсь на придании требуемого вида ссылкам на странице.

Чтобы задать вид ссылки можно воспользоваться описанием стиля в атрибутах элемента <A> (так называемый in-line CSS). Делается это так: <A HREF="..." STYLE="стиль">. В атрибуте STYLE описываем все возможные параметры стиля в соответствии с правилами CSS. Например, чтобы задать цвет ссылки делаем так: <A HREF="index.html" STYLE="color: red">. Выглядеть это будет так: все опыты. Если далее мы хотим ссылку сделать зеленого цвета и полужирным начертанием, то пишем соответствующий код: <A HREF="index.html" STYLE="color: green; font-weight: bold"> и получаем: все опыты. Таким образом мы получили две ссылки, которые выглядят абсолютно по-разному на одной странице.

Теперь разберемся как сделать ссылки неподчеркнутыми. Для этого используется правило text-decoration. Оно может принимать следующие значения:

Значение Описание Пример
none Обычный текст text-decoration: none
underline Подчеркивание text-decoration: underline
overline Надчеркивание text-decoration: overline
line-through Зачеркивание text-decoration: line-through
blink Мигание text-decoration: blink

Из всех рассмотренных способов "украшения" текста, наиболее употребительны первые два, а последний не реализовани ни одним браузером (да и правильно, его уже давно никто не рекомендует уптореблять из-за чрезмерной раздражительности), кроме Нетскейпа.

Для того, чтобы ссылка была неподчеркнута необходимо использовать следующий код: <A HREF="..." STYLE="text-decoration: none">

Для того, чтобы при наведении указателя мыши такая ссылка стала подчеркнутой в описании стилей необходимо использовать "псевдо-класс" :hover. Это можно сделать только в элементе описания стиля <STYLE> или во внешнем файле описания стилей. Например вот так:

A:hover {
  text-decoration: underline;
}

Раз уж мы залезли в дебри описания классов, воспользуемся этим и рассмотрим полное описание элементов <A>. Кроме указанного псевдо-класса :hover, который, в соответствии со спецификацией W3C относится к динамическим псевдо-классам (к ним еще относятся псевдо-классы :focus, когда элемент получает "фокус", например, после нажатия клавиши TAB, и :active, когда элемент активизируется, например, нажатием клавиши мыши.), имеется два псевдо-класса ссылочных элементов: :link и :visited. Первый применяется для описания обычных ссылок, второй - тех ссылок, которые уже были просмотрены браузером.

Таким образом, для полного писания вида ссылки необходимо разработать четыре описания для элементов A:link, A:visited, A:hover и A:active (A:focus не реализован в текущих версиях браузеров). Выглядеть это может, например, так:

A:link {
   color: #850026;
   text-decoration: none;
}
A:visited {
   color: #A06060;
   text-decoration: none;
}
A:active {
   color: #850026;
   text-decoration: none;
}
A:hover {
   color: #ff0000;
   text-decoration: underline;
}

Именно так (несколько более развернуто) выглядят описания стиля ссылок на данной странице.

Если вам необходимо что-то изменить в одной, отдельно взятой ссылке, то лучще всего сделать это описав новый класс сылок, например A.coolLink, тогда описание стиля может выглядеть примерно так:

A.coolLink:link {
  ...
}
A.coolLink:visited {
  ...
}
A.coolLink:hover {
  ...
}
A.coolLink:active {
  ...
}

А код на странице - так: <A HREF="..." CLASS="coolLink">

И на последок необходимо заметить, что класс :hover не реализован в браузере компании Netscape.

http://exper.ural.ru/

Hosted by uCoz