Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
Facebook 0 Likes
Twitter 0 Followers
Instagram 0 Followers
Pinterest 0 Followers
YouTube 0 Subscribers
Подписаться
Маркетер
Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • CSS

Описание стилей элемента<A>

  • 05.11.2001
Total
0
Shares
0
0
0
0
0
0

Автор статьи: Головин Андрей

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

Чтобы задать вид ссылки можно воспользоваться описанием стиля в атрибутах элемента <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.

Total
0
Shares
Телеграфировать 0
Поделиться 0
Репост 0
Твитнуть 0
alexvolkov

Предыдущий материал
  • Проектирование

Кто такой вебмастер или Как делать сайты правильно

  • 04.11.2001
  • alexvolkov
Read More
Следующий материал
  • HTML

favicon.ico

  • 06.11.2001
  • alexvolkov
Read More
Вас также может заинтересовать
Read More
  • CSS

Формализация CSS

  • Алексей Волков
  • 23.05.2012
Read More
  • CSS

Ножницы для CSS

  • Алексей Волков
  • 25.01.2005
Read More
  • CSS

CSS: фон и цвет

  • Алексей Волков
  • 27.05.2004
Read More
  • CSS

CSS: позиционирование блоков

  • Алексей Волков
  • 08.04.2004
Read More
  • CSS

Что такое каскадные таблицы стилей (CSS)

  • Алексей Волков
  • 02.02.2004
Read More
  • CSS

Что такое каскадные таблицы стилей (CSS)

  • Алексей Волков
  • 27.11.2003
Read More
  • CSS

Создание “буквиц”

  • alexvolkov
  • 30.11.2001
Read More
  • CSS

Все правила CSS. Отступы

  • alexvolkov
  • 02.11.2001

Добавить комментарий

Для отправки комментария вам необходимо авторизоваться.

Свежие посты
  • Рассылка как продукт
    • 24.07.20
  • Google назвал лучшие приложения App Store за 2018 год
    • 14.12.18
  • Онлайн-конференция интернет-магазин от “А до Я” CyberE-com 2018
    • 25.05.18
  • Бесплатная онлайн-конференция по управлению репутацией
    • 04.12.17
  • Открыта регистрация на CyberMarketing-2017
    • 19.10.17
Маркетер
  • О проекте
  • Информационное спонсорство
  • Рекламным агентствам
  • Ссылки
(с) ООО "Маркетер". Официальный сайт. Маркетер: Статьи про рекламу, маркетинг, public relations, интернет

Введите ключевые слова для поиска и нажмите Enter