Css активная ссылка: варианты оформления — учебник CSS


05.12.2019 Facebook Twitter LinkedIn Google+ Разное


:active — CSS | MDN

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


a:active {
  color: red;
}

Также псевдокласс :active срабатывает при использовании клавиши TAB на клавиатуре. Обычно это используется для HTML-элементов <a> и <button>, но может применяться и к другим элементам.

Это свойство может быть переопределено любыми другими псевдоклассами, относящимся к ссылке, такими как :link, :hover и :visited, описанными в последующих правилах. Чтобы стилизировать нужные ссылки, вам нужно ставить правило :active после всех других правил, относящихся к ссылке, как определено правилом LVHA-порядком:

:link:visited:hover:active.

Примечание: В системах с много-кнопочными мышами, CSS 3 указывает, что псевдокласс :active должен применяться только к первой кнопке; для праворуких мышей — это обычно самая левая кнопка.

Активные ссылки

HTML
<p>Этот абзац содержит ссылку:
<a href="#">Эта ссылка будет окрашена в красный, когда вы нажмёте на неё.</a>
У абзаца фон станет серым при нажатии на него или на ссылку. </p>
CSS
a:link { color: blue; }          
a:visited { color: purple; }     
a:hover { background: yellow; }  
a:active { color: red; }         

p:active { background: #eee; }   
Результат

Активные элементы формы

HTML
<form>
  <label for="my-button">Моя кнопка: </label>
  <button type="button">Попробуй Нажать Меня или Мою подсказку!</button>
</form>
CSS
form :active {
  color: red;
}

form button {
  background: white;
}
Result

BCD tables only load in the browser

Псевдокласс :active | CSS | WebReference

Псевдокласс :active определяет стиль активного элемента. Это такое состояние элемента, которое происходит между щелчком и отпусканием клавиши мыши. В основном применяется к ссылкам и кнопкам, но ими не ограничен.

Синтаксис

Селектор:active { ... }

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз. <число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>active</title> <style> a:link { color: #0000d0; /* Цвет ссылок */ } a:visited { color: #900060; /* Цвет посещённых ссылок */ } a:active { color: #f00; /* Цвет активной ссылки */ } </style> </head> <body> <p><a href=»page/task1.html»>Вычислить число оборотов двигателя в минуту</a></p> <p>Даётся: линейка, часы с секундной стрелкой, лист бумаги, нитка, карандаш, ножницы.</p> </body> </html>

В данном примере задаётся цвет обычных, посещённых и активных ссылок.

Примечание

Internet Exporer до версии 8 и Opera до версии 7 поддерживают :active только для ссылок.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 05.09.2017

Редакторы: Влад Мержевич

Псевдоклассы и переходы для ссылок и кнопок

От автора: гиперссылки и кнопки – все еще являются функционалом в привычном внешнем виде вебсайта или веб-приложения. При взаимодействии они чаще всего дают очень небольшую ответную реакцию. Но можно очень легко добавить самые простые стили и дать понять пользователю, что они либо уже взаимодействуют, либо могут взаимодействовать с данным элементом.

Псевдоклассы и селекторы

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

Добавив в CSS всего несколько классов, можно создать намного более профессиональное и удобное для пользователя меню или форму. Рассматриваемые нами сегодня псевдоклассы – это:

:focus

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

:hover

:active

:target

:first-letter

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

Начинаем

Первое, что следует сделать – назначить основные стили своему списку ссылок. Я ограничился простым синим текстом на светло-сером фоне. Также я удалил пока текстовые украшения, но позже мы добавим их обратно. Чтобы ссылки смотрелись похожими именно на кнопки, я изменил display на block и добавил сплошную рамку.

a { color: #1c8dc7; padding: 10px; text-decoration: none; font-size: 20px; background-color: #c2c2c2; border: 1px solid #ffffff; display: block; }

a {        

    color: #1c8dc7;

    padding: 10px;

    text-decoration: none;

    font-size: 20px;

    background-color: #c2c2c2;

    border: 1px solid #ffffff;

    display: block;

}

Взаимодействие

Первый стиль, который мы собираемся добавить – при проведении пользователем над элементом. Чтобы сделать его, применим класс :hover, здесь изменяется цвет и фоновый цвет, чтобы показать пользователю, что он действительно проводит мышью над элементом.

a:hover { color: #7cc9f0; background-color: #cccccc; }

a:hover {

    color: #7cc9f0;

    background-color: #cccccc;

}

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Теперь, когда ясно, что мы находимся над элементом, можно применить класс :active для изменения цвета color, фонового цвета background-color и текстового украшения text-decoration при действительном щелчке или нажатии на элемент

a:active { color: #7cc9f0; background-color: #555555; text-decoration: underline; }

a:active {

    color: #7cc9f0;

    background-color: #555555;

    text-decoration: underline;

}

В представленном мною примере HTML у каждой гиперссылки есть атрибут ID. Он дает возможность применить класс :target для добавления дополнительных стилей к выбранному в данный момент элементу.

a:target { color: #f59805; background-color: #555555; text-decoration: underline; }

a:target {

    color: #f59805;

    background-color: #555555;

    text-decoration: underline;

}

Помимо того, для получения дополнительного эффекта мы добавим редко используемый класс :first-letter. Он работает только с блочными элементами (которые мы применили ранее), и дает нам возможность назначить стили первой букве элемента. Здесь я применяю черный цвет, но вы можете взять другой шрифт.

a:first-letter { color: #333333; } a:active:first-letter, a:target:first-letter { color: #eeeeee; }

a:first-letter {

    color: #333333;            

}

 

a:active:first-letter, a:target:first-letter {

    color: #eeeeee;            

}

Как видите, еще я скомбинировал классы :first-letter и :active для применения другого цвета при активном состоянии элемента или наведении на него мыши.

Выложимся на все сто

Чтобы все эти изменения действительно совпали, нужно сделать их плавне и аккуратнее. Для этого мы применим свойство перехода transition, чтобы в течении какого-то времени цветовые изменения постепенно проявлялись. Я определил их длительность в 0,5 сек., потому что переход не должен быть слишком быстрым, но и если он будет слишком медленным, то тоже не станет смотреться настолько эффектно.

a { color: #1c8dc7; padding: 10px; text-decoration: none; font-size: 20px; background-color: #c2c2c2; border: 1px solid #ffffff; display: block; line-height: 105%; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }

a {        

    color: #1c8dc7;

    padding: 10px;

    text-decoration: none;

    font-size: 20px;

    background-color: #c2c2c2;

    border: 1px solid #ffffff;

    display: block;

    line-height: 105%;

    

    -moz-transition: all 0.

5s ease-in-out;

    -webkit-transition: all 0.5s ease-in-out;

    -moz-transition: all 0.5s ease-in-out;

    -o-transition: all 0.5s ease-in-out;

    transition: all 0.5s ease-in-out;                

}

Автор: Jonny Schnittger

Источник: //www.developerdrive.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

CSS | Свяжите активный CSS — узнайте за 30 секунд от Microsoft MVP, награжден

Переключить боковую панель

  • Учебники
  • ТЕХНОЛОГИИ
    • ВСЕ ТЕХНОЛОГИИ
    • СТАТЬИ
  • ПОЛНАЯ ФОРМА НОВАЯ
  • ВЕБИНАРЫ
  • ОШИБКИ И ИСПРАВЛЕНИЯ
  • ИНТЕРВЬЮ
  • ФОРУМЫ
  • ВИДЕО
    • КОЛИЧЕСТВЕННАЯ СПОСОБНОСТЬ
    • НЕ ГЛАВНЫЙ
    • ГРУППОВОЕ ОБСУЖДЕНИЕ
    • СТРАНА ВОПРОСОВ ДЛЯ ИНТЕРВЬЮ
    • ИНЖИНИРИНГ
  • КАРЬЕРА
    • Программное обеспечение Интервью
    • HR Интервью
    • GD Интервью
    • Примеры резюме
    • Инженерное дело
    • Искусство / наука
    • Мастера
    • Медицинский
    • Способность
    • Рассуждения
    • Вопросы компании
    • Загородная виза
    • Дресс-код для визы
    • Вступительный экзамен
    • Колледжи
    • Оповещения о приеме
    • ScholarShip
    • Образовательные ссуды
    • Письма
    • Изучайте языки

Использование тени текста CSS3 для состояний активных ссылок

Недавно Крис Спунер из Line25 написал руководство, описывающее, как создать эффект высокой печати с помощью свойства text-shadow CSS3.

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

Во время недавнего проекта, над которым я работал, пока возился со свойством CSS3 text-shadow , я по счастливой случайности объединил два разных эффекта из этих двух статей, чтобы создать эффект высокой печати на активных состояниях ссылок.

Просмотрите демонстрационную страницу, чтобы увидеть четыре примера ссылок, в активном состоянии которых используется свойство CSS3 text-shadow (наряду с позиционированием) для создания ссылок, которые, как говорит Койер, «напоминают кнопки».

CSS

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

a: link, a: посещено {
  цвет: #aaa;
  текстовое оформление: нет;
  размер шрифта: 36 пикселей;
  тень текста: 1px 1px 1px # 555;
  семейство шрифтов: Arial, Helvetica, sans-serif;
  font-weight: жирный;
}

a: hover {
  цвет: #bbb;
}

a: active {
  тень текста: -1px -1px 1px # 555;
  положение: относительное;
  верх: 1px;
  слева: 1px;
}
 

Пример кода выше взят из второй большой ссылки на демонстрационной странице. После установки цвета ссылки и размера шрифта свойство text-shadow смещается на 1 пиксель по осям x и y, затем тень изменяется на смещение -1 пиксель в «активном» состоянии или когда ссылка находится в процессе нажатия.

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

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

: active — CSS: каскадные таблицы стилей

Псевдокласс CSS : active представляет элемент (например, кнопку), который активируется пользователем. При использовании мыши «активация» обычно начинается, когда пользователь нажимает основную кнопку мыши.

 
a: active {
  красный цвет;
}  

Псевдокласс : active обычно используется в элементах и

CSS
  форма: активная {
  красный цвет;
}

кнопка формы {
  фон: белый;
}  
Результат

Таблицы BCD загружаются только в браузере

.
Comments