Псевдоклассы в CSS. Оформление ссылок
В CSS псевдоклассы используются для изменения свойств элементов, когда они находятся в определенном состоянии. Например, если на картинку навести курсор мыши, то у нее появляется состояние hover . В таблице стилей может быть правило изменения каких-либо свойств элемента img в этом состоянии (размеров, затенения, рамок).
Селектор превдокласса элемента имеет следующий синтаксис:
То есть псевдоклассам предшествует двоеточие.
Если псевдокласс описывается для класса, выглядеть это может так:
В отличие от классов, в элементах HTML превдоклассы не упоминаются. То или иное состояние элемента случается или нет, независимо от html-кода страницы. Ряд состояний может быть характерным только для определенного типа элементов.
Так для ссылок (гиперссылок) выделяют четыре состояния:
- link – непосещенная ссылка (в истории браузера не хранится ее адрес),
- visited – посещенная ссылка (в истории есть адрес),
- hover – курсор мыши находится над ссылкой,
- active – ссылка в момент, когда на нее наведен курсор мыши, и зажата левая кнопка мыши.
По умолчанию во всех четырех состояниях ссылки имеют подчеркивание. Непосещенная ссылка окрашена в синий цвет, посещенная – в фиолетовый. При наведении на ссылку курсора, он меняется со стрелки на иконку руки. Ссылка в момент «активации» приобретает красный цвет.
В настоящее время оформление ссылок по-умолчанию используется редко. Обычно его изменяют в таблице стилей, стилизуя ссылки под цветовую схему сайта. При этом последовательность описания состояний, приведенная выше, должна сохраняться. Некоторые могут быть пропущены. Общие свойства обычно выносят в селектор-тег (без псевдокласса).
Часто у ссылок убирают подчеркивание, а между посещенной и непосещенной не делают различий.
a { margin: 10px; text-decoration: none; color: Green; } a:hover, a:active { border-bottom: dashed 1px Green; }
Когда любые селекторы группируются через запятую, это значит, что правило применяется ко всем в группе по отдельности. Так делают, чтобы избежать повторений, когда разные элементы оформляются одинаково.
В примере выше добавлять в правило селектор с псевдоклассом active не обязательно. Состояние active переопределяет hover . Поэтому если для active нет правила, то в этом состоянии ссылка будет выглядеть также, как в состоянии hover .
Для главного меню сайта ссылки часто стилизуют под кнопки:
a:link, a:visited { background: Green; color: White; text-decoration: none; padding: 15px 20px; text-align: center; display: inline-block; width: 200px; } a:hover, a:active { background-color: OliveDrab; }
На одной веб-странице ссылки могут быть не только в меню, также встречаться в теле статьи и другом контенте. Как сделать так, чтобы часть ссылок на странице была оформлена в одном стиле, а другая часть в другом?
Конечно, мы можем назначить одним ссылкам один класс, другим – иной, или оставить без класса.
Однако упоминание класса в каждой ссылке, особенно если их много, делает код грязным. Должно быть какое-то более экономичное решение.
В CSS есть возможность выбирать из html-документа элементы, которые вложены (то есть являются потомками) в определенный внешний элемент (предок), по-сути являющийся для них html-контейнером. Селектор, с помощью которого выполняется такой выбор, называется селектором потомка. Он относится к комбинированным селекторам, которые создаются с помощью различных так называемых комбинаторов.
Комбинатор потомка обозначается пробелом. В селекторе пробел ставится между внешним контейнером и вложенным в него элементом, для которого описывается правило. В данном случае потомками называют элементы HTML на любом уровне вложенности: сразу или вложенные во вложенные в предка – неважно.
В примере на скрине выше ссылки меню заключены в контейнер . Nav относится к семантическим элементам HTML и предназначен для основного меню сайта, навигации по сайту. В то же время для ссылок в статье в качестве предка мы можем выделить контейнер .
CSS-код ниже дает такое же оформление ссылок, как на скрине выше:
a { text-decoration: none; } main a { color: DarkGreen; } main a:hover { border-bottom: dashed 1px Green; } nav a { background: Green; color: White; padding: 15px 20px; text-align: center; display: inline-block; width: 200px; } nav a:hover { background-color: OliveDrab; }
Здесь четыре селектора потомка. В частности, селектор main a применяет свойства своего правила ко всем ссылкам, которые находятся в контейнере main . Таким образом, мы можем разделить стилизацию ссылок в зависимости от их обрамляющего html-элемента. При этом общее свойство было вынесено в селектор a . Его значение применяется для всех ссылок до их стилизации в зависимости от предка.
В отличие от примера, в котором использовался селектор класса, при использовании селектора потомка в коде HTML нет необходимости писать атрибут class в ссылках навигации, что делает код чище:
nav> a href="python">Программирование/a> a href="web">Web-Дизайн/a> a href="blender">3D-моделирование/a> /nav>
Заметим, что селектор потомка может комбинировать классы и иные типы селекторов:
.имя_класса вложенный_элемент
внешний_элемент .имя_класса
Введение в веб-разработку и создание сайтов
Как с помощью css сделать ссылку красивой
В css , ссылки имеют привилегированное положение по сравнению с остальными элементами. Каскадные таблицы стилей предоставляют широкий набор средств для оформления ссылок. И было бы настоящим кощунством не использовать их на практике:
Преимущества использования CSS
Появление каскадных таблиц стилей ( CSS ) во многом упростило весь процесс разработки и оформления внешнего вида веб-страниц. Благодаря CSS объемы кода сильно сократились. Теперь стилевое решение можно прописать один раз, а затем применять его для нужных элементов.
В CSS доступ к стилевым описаниям реализован с помощью классов и селекторов. Многие прослеживают в этом проявление основных принципов объектно-ориентированного программирования.
Сравните объем кода с использованием каскадных таблиц стилей и без них:
А вот, насколько уменьшается код после включения в него CSS :
Даже визуально заметно, что объем уменьшился в несколько раз. При этом одно стилевое описание CSS ссылки применено ко всем остальным.
Ссылки в CSS
CSS включает в себя большой набор средств для установки стилевых характеристик ссылок. Доступ к тегу может быть реализован несколькими способами:
Описанный стиль будет применен ко всем ссылкам внутри страницы:
- Через селектор идентификатора – он задается внутри тега . А его стилевое описание располагается в блоке CSS внутри страницы или в отдельном файле каскадных таблиц стилей. В начале имени селектора ставится решетка. Пример:
#a1 Нажми меня Нажми меня еще раз Еще хоть раз! Да еще раз! Да еще много, много раз!
Результат аналогичен предыдущему.
- Через селектор класса – для этого внутри тега в атрибуте class прописывается имя класса. В CSS перед его именем ставится точка. Пример:
.a1 Нажми меня Нажми меня еще раз Еще хоть раз! Да еще раз! Да еще много, много раз!
С помощью всех этих трех методов можно легко установить цвет ссылки. Пример:
a #a2 .a3 Нажми меня Нажми меня еще раз Еще хоть раз!
Как видно, цвет шрифта, установленный через селектор элемента, сохраняется для всех ссылок. При этом цвета фона, заданные через класс a3 и идентификатор a2 , доминируют над цветом, установленным через селектор элемента a .
Таким же образом можно убрать подчеркивание ссылок. Для этого внутри селектора свойству text-decoration присваивается значение none . Пример:
a Нажми меня Нажми меня еще раз Еще хоть раз!
Псевдо классы ссылок в CSS
Ссылка является не совсем обычным элементом html . Да и в css отношение к тегу тоже особенное. Для установки характеристик внешнего вида ссылки в каскадных таблицах стилей применяются встроенные псевдо классы.
Псевдо классом называется класс CSS , применяемый к стилю элемента в зависимости от его состояния ( активный, неактивный, при нажатии ).
В CSS различают несколько псевдо классов ссылок:
- A:link – задает стиль ссылки до посещения;
- A:visited – стиль после посещения;
- A:active – устанавливает, как будет выглядеть активная ссылка;
- A:hover – вид ссылки при наведении на нее курсора мыши.
A:link по своему действию аналогичен селектору элемента a ( оба задают внешний вид не посещенной ссылки ).
Пример, в котором подчеркивание ссылки и размер шрифта будут меняться в зависимости от ее состояния:
С помощью псевдо классов можно легко установить фоновое изображение ссылки, которое меняется в зависимости от действий пользователя. Пример:
Как видно из приведенных примеров, с помощью css ссылкам можно придавать разнообразную форму и вид. И эти возможности намного обширнее, чем в html . Да и писанины c CSS намного меньше.
Стили ссылок. Псевдоклассы
Для оформления гиперссылок используются встроенные стили, присваиваются классы и идентификаторы, т.е применяются те же методы оформления, что и к прочим тегам.
Ссылка — строчный элемент. Иногда это может доставить неудобства, например нельзя задать размеры.
Как сделать ссылку блочной
Обойти это правило очень легко. Любой строчный элемент можно сделать блочным с помощью CSS.
/* CSS. Создаем классы и индексы для ссылки */ /* делаем ссылку блочной */ a.block_link {display: block;} /* плавающей (автоматически становится блочной */ a#float_link {float: left;} /* абсолютной (автоматически становится блочной */ а.absolut_link {position: absolute;}
После этого со ссылкой вида
a class="block_link" href="#/">Блочная ссылка/a>
можно обращаться как с блочным элементом.
href — обязательный атрибут. Если мы хотим чтобы ссылка никуда не вела, используем url #/ .При указании в качестве url # без слэша, будет осуществлен переход к началу страницы.
Псевдоклассы
Рассмотрим особенности отображения гиперссылок браузером (у разных браузеров возможны варианты):
— Цвет. Обычно браузеры отображают не посещенную ссылку синим цветом
— Подчеркивание
— При наведении на ссылку, вид курсора меняется
— При клике, цвет ссылки меняется на красный
— После посещения, цвет ссылки становится фиолетовым
При отображении гиперссылок большинство браузеров по умолчанию использует определенные стилевые правила.
Мы можем установить по умолчанию собственные правила для отображения ссылок. Например, выводить их более крупным и/или плотным шрифтом, задать цвет по-вкусу, применить курсив, убрать подчеркивание и многое другое.
Но что делать с изменением цвета при клике на ссылку, или после посещения?
Браузеры способны изменять внешний вид содержимого тега в зависимости от состояния. Управлять этими изменениями можно с помощью псевдоклассов
a:псевдокласс
Различают 4 специальных состояния гиперссылок.
- a:link — не выбранная пользователем, непосещенная гиперссылка
- a:visited — ссылка, посещенная ранее
- a:hover — выбранная ссылка, на которую наведен указатель курсора
- a:active — выбранная ссылка, в настоящий момент обрабатываемая браузером
(при нажатии на кнопку мыши) - a:focus — ссылка, получившая фокус
Как сделать ссылку кнопкой
a href="#/" class="link_button">Кнопка/a> Псевдоклассы можно применять как непосредственно к тегу a , так и к классу ссылки
/*-- CSS. --*/ .link_button { padding: 4px 12px; border: 1px solid #CDECD3; background: #E9FFEE; border-radius: 6px; } .link_button:hover { background: black; color: #fff; } .link_button:active { color: red; }
Внимание специфичность!
Почему иногда псевдоклассы не работают?
Т.к все рассмотренные псевдоклассы имеют одинаковый приоритет, то следующий переопределяет предыдущий. Здесь важен порядок записи стилей.
«LoVe & HAte» — любовь и ненависть (Link, Visited, Hover, Active). Придерживайтесь указанного порядка, и все будет хорошо.