Гиперссылки css: Ссылки — Учебник CSS — Schoolsw3.com

Leave a Comment / Css / By /

CSS — Ссылки — CoderLessons.com

Эта глава научит вас, как устанавливать разные свойства гиперссылки с помощью CSS. Вы можете установить следующие свойства гиперссылки —

Мы вернемся к тем же свойствам, когда будем обсуждать псевдоклассы CSS.

  • Ссылка: обозначает непосещенные гиперссылки.

  • Посещение означает посещенные гиперссылки.

  • : Hover обозначает элемент, на котором в данный момент находится курсор мыши пользователя.

  • : Active обозначает элемент, по которому пользователь в данный момент щелкает.

Ссылка: обозначает непосещенные гиперссылки.

Посещение означает посещенные гиперссылки.

: Hover обозначает элемент, на котором в данный момент находится курсор мыши пользователя.

: Active обозначает элемент, по которому пользователь в данный момент щелкает.

Обычно все эти свойства хранятся в заголовочной части документа HTML.

Помните, что: hover ДОЛЖЕН идти после определения: link и a: посещения в определении CSS, чтобы быть эффективным. Кроме того, a: active ДОЛЖЕН идти после: hover в определении CSS следующим образом:

<style type = "text/css">
   a:link {color: #000000}
   a:visited {color: #006600}
   a:hover {color: #FFCC00}
   a:active {color: #FF00CC}
</style>

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

Установить цвет ссылок

В следующем примере показано, как установить цвет ссылки. Возможные значения могут быть любым именем цвета в любом допустимом формате.

Live Demo

<html>
   <head>
      <style type = "text/css">
         a:link {color:#000000}
     </style>
   </head>
   <body>
      <a href = "">Link</a>
   </body>
</html>

Это даст следующую черную ссылку —

Установить цвет посещенных ссылок

В следующем примере показано, как установить цвет посещаемых ссылок.

Возможные значения могут быть любым именем цвета в любом допустимом формате.

Live Demo

<html>
   <head>
      <style type = "text/css">
         a:visited {color: #006600}
      </style>
   </head>
   <body>
      <a href = ""> link</a> 
   </body>
</html>

Будет произведена следующая ссылка. Как только вы нажмете эту ссылку, она изменит свой цвет на зеленый.

Изменить цвет ссылок, когда мышь над

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

Live Demo

<html>
   <head>
      <style type = "text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>
   <body>
      <a href = "">Link</a>
   </body>
</html>

Будет произведена следующая ссылка. Теперь вы наведите курсор мыши на эту ссылку и увидите, что она меняет свой цвет на желтый.

Изменить цвет активных ссылок

В следующем примере показано, как изменить цвет активных ссылок. Возможные значения могут быть любым именем цвета в любом допустимом формате.

Live Demo

<html>
   <head>
      <style type = "text/css">
         a:active {color: #FF00CC}
      </style>
   </head>
   <body>
      <a href = "">Link</a>
   </body>
</html>

Будет произведена следующая ссылка. Он изменит свой цвет на розовый, когда пользователь щелкнет по нему.

Состояния ссылок на CSS | Трепачёв Дмитрий

Я думаю, что вы, посещая различные сайты в интернете, обращали внимание на то, что ссылки обычно реагируют на наведение мышкой на них. Такого эффекта можно добиться, задавая поведение ссылок в различных состояниях.

К примеру, вот так — a:hover — мы поймаем состояние, когда на ссылку навели курсор мышки. В этот момент мы можем, к примеру, поменять цвет ссылки или убрать/добавить ей подчеркивание. Конструкция :hover называется псевдоклассом. Псевдоклассы позволяют отлавливать разные состояния элементов.

Кроме :hover есть еще псевдоклассы :link, которые отлавливают не посещенную ссылку, и :visited, которые отлавливают посещенную ссылку. На некоторых сайтах с их помощью показывают пользователям, где они были, а где — нет. Есть еще и псевдокласс :active, который отлавливает следующее состояние: на элемент нажали мышкой, но еще не отпустили

.

В следующем примере для ссылки в состоянии :hover убирается подчеркивание, в состоянии :link задается красный цвет, в состоянии :visited — зеленый, в :active — голубой. В результате получится, что в начале ссылка будет красного цвета, после нажатия на нее — зеленого, если нажать на нее мышкой и не отпускать — голубого, а если навести мышкой — станет неподчеркнутой.

a:link { color: red; } a:visited { color: green; } a:hover { text-decoration: none; } a:active { color: blue; }<a href="#">ссылка</a>

:

Нюансы

Псевдоклассы наследуют друг от друга. К примеру, если я уберу подчеркивание для состояния :link

, то оно уберется для всех состояний.

Из-за наследования для корректной работы данные псевдоклассы следует размещать именно в таком порядке, как в примере: :link, :visited, :hover, :active (ненужные можно не писать). Этот порядок подчиняется следующему мнемоническому правилу: LoVe HAte.

Сделайте все ссылки в состоянии :hover красными и неподчеркнутыми, в состоянии :link — голубыми, в состоянии :visited — зелеными, в состоянии :active — черными.

Состояния link и visited

Часто состояния :link и :visited объединяют вместе через запятую:

a:link, a:visited { color: red; } a:hover { text-decoration: none; } a:active { color: blue; }<a href="#">ссылка</a>

:

В таком случае можно их вообще и не указывать:

a { color: red; } a:hover { text-decoration: none; } a:active { color: blue; }<a href="#">ссылка</a>

:

Обычное использование

Как правило, указываются состояния для всех типов ссылок одновременно, а потом ниже добавляются особенности поведения ссылки при наведении мышкой, вот так:

a { color: red; } a:hover { text-decoration: none; }<a href="#">ссылка</a>

:

Сделайте все ссылки во всех состояниях голубыми и неподчеркнутыми, а в состоянии :hover — красными и подчеркнутыми.

Свойства CSS — Гиперссылки

 

Изучив, как создавать гиперссылки, первое, что хотят знать большинство начинающих веб-дизайнеров, — как удалить подчеркивание. Свойства CSS в таблице ниже охватывают эту и другие настройки, которые вы можете внести в внешний вид гиперссылок на своей веб-странице. Вы можете просто применить их к элементу A или применить их к расширенным селекторам, используя ссылки и динамические псевдоклассы. К ним относятся следующие:

А , А: ссылка , А: посетил , А:активный , A: Hover

Свойные свойства CSS 7 — Гиперссылки

Наименование свойства Некоторые возможные значения Что делает
Текстовый декларация8
. надчеркивание | нет Подчеркнут ли текст ссылки?
курсор перекрестие | по умолчанию | help Устанавливает стиль указателя мыши
фон (любой цвет) цвет фона ролловера
дисплей блок | inline Установить ссылку как блочный элемент?

ПРИМЕЧАНИЯ:

  • Псевдоклассы ~ Так как гиперссылка является динамической по своей природе, вы, вероятно, захотите изменить ее внешний вид в соответствии с ее текущим статусом. Этого можно добиться с помощью расширенного селектора, который сочетает в себе A со специальным суффиксом, известным как псевдокласс . Они описаны ниже:
    • A:link — элемент
      A       в сочетании с псевдоклассом :link можно использовать для установки свойств CSS, применяемых к гиперссылке, по которой было посещено , а не . . Пример:

      A:link {цвет: синий;}

    • A:visited — элемент A в сочетании с псевдоклассом :visited можно использовать для установки свойств CSS, применяемых к гиперссылке, которая 0075 было посещено . Пример:

      A:посетил {цвет: фиолетовый;}

    • A:active — Элемент A в сочетании с псевдоклассом :active можно использовать для установки того, какие свойства CSS применяются к гиперссылке, которая в данный момент активируется (щелчок). Пример:

      A:активный {цвет: красный;}

    • A:hover — элемент A в сочетании с псевдоклассом :hover можно использовать для установки свойств CSS, применяемых к гиперссылке, когда указатель мыши наводится на нее. Пример:

      A: наведите курсор {цвет: красный;}

  • Оформление текста ~ Это свойство CSS используется для определения того, будет ли текст подчеркнут или нет. Он применяется ко всем элементам, но вы, вероятно, найдете его наиболее полезным при применении к гиперссылкам. Вот некоторые возможные значения:
    • underline — это подчеркнет текст вашей гиперссылки.
    • overline — это применит строку поверх текста вашей гиперссылки.
    • нет — Это удалит подчеркивание, обычно применяемое к тексту гиперссылки.
    Например, вы можете использовать следующий код во встроенной или внешней таблице стилей для удаления подчеркивания со всех гиперссылок:

    A {text-decoration: none;}

  • Курсор ~ Вы можете использовать свойство курсора для определения стиля указателя мыши, отображаемого при наведении курсора на гиперссылку (курсор также может использоваться с другими элементами). Некоторые возможные значения:
    • перекрестие — это сделает курсор перекрестием. (покажи мне)
    • по умолчанию — курсор будет отображаться в виде стрелки. (покажи мне)
    • help — Это отобразит курсор со знаком вопроса. (покажи мне)
  • Background ~ Это свойство подробно описано на странице Backgrounds, но я должен упомянуть здесь, что его можно использовать вместе с селектором A:hover для применения цвета фона, когда пользователь наводит курсор на ваши гиперссылки (что является своего рода прохладный).

    Чтобы увидеть это в действии, наведите указатель мыши на следующую тестовую ссылку:

    ТЕСТОВАЯ ССЫЛКА

    Вот код, который можно использовать во встроенной или внешней таблице стилей:

    A:hover {background: yellow;}

  • Display ~ Помимо многих других вещей, свойство display особенно полезно для превращения гиперссылок в блочные элементы. Это позволит вам применять такие размеры, как ширина , высота и с отступом , чтобы сделать интерактивную область вашей гиперссылки настолько большой, насколько вы хотите. Вот пример:

    Все это желтое поле является гиперссылкой. Вы можете щелкнуть в любом месте внутри него.

    Все это желтое поле является гиперссылкой. Вы можете щелкнуть в любом месте внутри него.

Лучшие бесплатные вещи
для веб-мастеров

Бесплатные текстовые редакторы
Бесплатные графические редакторы
Инструменты анализа веб-сайтов
Бесплатные шаблоны сайтов

См. также:

Лучший бесплатный веб-хостинг
Как сделать веб-страницу

 

Если вам нужен веб-адрес .COM , вы можете быстро и легко получить его по адресу…

<~ НАЗАД ВЕРХ ВВЕДЕНИЕ

Стиль гиперссылок CSS — как изменить цвет гиперссылки

  • « Предыдущая
  • Далее »

Стиль гиперссылок CSS работает при наведении курсора или щелчке по определенной гиперссылке. вы можете установить стили гиперссылок, используя различные свойства CSS, такие как background-color, font-family, вес шрифта, цвет, размер шрифта и многое другое.

Вы также можете установить специальные стили в зависимости от специального события, выполняемого по гиперссылке.

Ниже приведены специальные события гиперссылок для применения стиля CSS, когда это происходит.

  • a:link Обычная непосещаемая ссылка
  • a:visited Ссылка уже была посещена пользователем
  • a:hover Когда пользователь наводит указатель мыши на ссылку
  • a:active Щелкнул по ссылке в этот момент

Здесь применяются некоторые правила, когда вы устанавливаете стиль для гиперссылки.

  • a:hover всегда следует после a:link или a:visited
  • a:active всегда следует после a:hover

После свойства стиля гиперссылки CSS перечислены стили различных типов.

Пример

 

<голова>
  Гиперссылка CSS
  <тип стиля="текст/CSS">
    a:link {color:#e14d43;} /* обычная ссылка */
    a:visited {color:#50afe5;} /* посещенная ссылка */
    a:hover {color:#fe0000;} /* наведите указатель мыши на ссылку */
    a:active {color:#fe0000} /* выбранная ссылка */
  

<тело>
  
Нажмите здесь, чтобы открыть страницу пример CSS.

Запустить…   »

Цвет фона ссылок CSS

Здесь задается цвет фона гиперссылки для :link, :visited, :hover, :active.

Пример

  <голова>Гиперссылка CSS устанавливает фоновый цвет <тип стиля="текст/CSS"> a:link {background-color:#CCCCCC;} /* обычная ссылка */
 a:visited {background-color:#CCFFCC;} /* посещенная ссылка */
 a:hover {background-color:#FF0000;} /* указатель мыши на ссылку */
 a:active {background-color:#FFFFFF;} /* выбранная ссылка */   <тело>
Нажмите здесь, чтобы открыть страницу

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *