Автор статьи: Головин Андрей
Мне неоднократно приходилось отвечать на вопросы о том, как сделать неподчеркнутые ссылки, как сделать ссылки разного вида на странице. Поэтому сегодня я остановлюсь на придании требуемого вида ссылкам на странице.
Чтобы задать вид ссылки можно воспользоваться описанием стиля в атрибутах элемента <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.
