|
|
|
|
Описание стилей элементов
<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. Оно может принимать следующие значения:
Из всех рассмотренных способов "украшения" текста, наиболее употребительны первые два, а последний не реализовани ни одним браузером (да и правильно, его уже давно никто не рекомендует уптореблять из-за чрезмерной раздражительности), кроме Нетскейпа. Для того, чтобы ссылка была неподчеркнута необходимо использовать следующий код: <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. |
||||||||||||||||||
