Exore LTD » Основы CSS » Урок 4. Псевдоселекторы ссылок
Лого SiteHere.ru

Май 31, 2020 Запись была обновлена

Время чтения: 2 мин. Прочитать позже

Урок 4. Псевдоселекторы ссылок

Урок 4. Псевдоселекторы ссылок

Здравствуй, уважаемый читатель.

Это четвертый урок изучения CSS. Из данного урока вы узнаете что такое псевдоселекторы ссылок и как их использовать.


Перед изучением CSS пройдите предыдущие уроки:


Урок 1. Что такое CSS?
Урок 2. Базовые селекторы
Урок 3. Групповые селекторы и селекторы потомков

Теория и практика

Этот урок будет небольшим но интересным. Сегодня мы рассмотрим свойства ссылок.

У ссылки может быть 4 состояния:

  1. Когда мы только открыли страницу и ничего не сделали со ссылкой.
  2. Когда мы навели на ссылку.
  3. Когда мы нажали на ссылку.
  4. Когда мы перешли по ссылке.

Для каждого состояния в CSS есть свой селектор. Рассмотрим их:

  • Когда мы ничего не делали со ссылкой состояние в CSS обозначается просто a {свойства;}
  • Когда мы навели на ссылку — a:hover {свойства;}
  • Когда нажали на ссылку — a:active {свойства;}
  • Когда перешли по ссылке — a:visited {свойства;}

Если в CSS не заданы свойства, то браузер сам задает свойства по умолчанию. Но если вы хотите сами задать цвет и стиль ссылкам, вы можете сделать это через данные псевдоселекторы.

Рассмотрим на примере. У нас есть следующая html страница:

1
2
3
4
5
6
7
8
9
10
11

<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>Изучение CSS</p>
    <p><a href="#">Как быстро изучить технологию CSS</a></p>
</body>
</html>

Посмотрите какие цвета и стили браузер задает по умолчанию(без свойств в файле CSS):

Посмотреть пример

А сейчас зададим свои собственные свойства ссылкам через псевдоселекторы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

a{ /* ссылка с которой ничего не делали */
    color:#000000; /* черный цвет */
}
 
a:hover{ /* ссылка при наведении */
    color:#FFA807; /* оранжевый цвет */
}
 
a:active{ /* ссылка при нажатии */
    color:#07ED00; /* зеленый цвет */
}
 
a:visited{
    color:#F700EF; /* розовый цвет*/
}

После того, как добавили CSS код выше в ваш файл стилей получили следующее:

Посмотреть примерСкачать

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

Больше практикуйтесь!

Предыдущий урок
Следующий урок

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

5 комментариев к записи
  • Влад

    Спасибо за статью(очень хорошая), но остался один вопрос, как задавать состояние не всём ссылкам, а по отдельности(пробовал через селекторы, не получилось), заранее Спасибо.

     
    Ответить
    • Юрий Немец

      Здравствуйте, Влад!

      Чтобы задать по отдельности, необходимо использовать селекторы в виде классов.

      HTML:

      <a href="#" class="red-link">Пример ссылки 1</a>
<a href="#" class="red-link">Пример ссылки 2</a>
<a href="#" class="red-link">Пример ссылки 3</a>

      CSS:

      .red-link {
    color: red;
}

      Таким образом с помощью класса вы сможете задать уникальные стили только для определенных ссылок.

       
      Ответить
  • Григорий

    Юрий, подскажите пож-ста, в чем различие использования селекторов id=" " и class=" "?

     
    Ответить
    • Юрий Немец

      Здравствуйте, Григорий!

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

       
      Ответить
  • Михаил

    ваш пример не работает(

    ссылка изначально розовая, когда должна быть таковой только после перехода

     
    Ответить

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

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