Как изменить цвет ссылок в css

Варианты стилизации ссылок в CSS

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

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

Со ссылками работают самые разнообразные свойства: color , background , border , border-radius , text-decoration , padding и т. д. Мы покажем наиболее распространенные варианты оформления ссылок, после чего вы можете подумать, каким образом их дополнить либо изменить.

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

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

Чтобы отменить дефолтный подчеркнутый стиль у ссылок, потребуется задать значение none для уже знакомого нам свойства text-decoration :

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

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

Один из распространенных стилей для ссылки — подчеркивание при наведении курсора. В этом варианте ссылку в исходном состоянии необходимо визуально выделить, а для состояния :hover добавить соответствующее свойство. Пример:

a < text-decoration: none; font-weight: bold; >a:hover

Подчеркивание с помощью border

Стандартное свойство text-decoration не поддается особой стилизации, поэтому веб-разработчики часто используют в качестве альтернативы свойство border . Управлять внешним видом границы гораздо легче: ей можно задать цвет, толщину, стиль полосы. Пример:

Подчеркивание ссылки с помощью рамки

Согласитесь, такой вариант выглядит веселее с точки зрения возможностей. Не забывайте, что с помощью псевдокласса :hover можно изменить вид границы (и не только) при наведении курсора. А если при этом еще и задействовать CSS-анимацию, то из обычной ссылки может получиться настоящее произведение искусства! Убедитесь в этом сами, взглянув на несколько оригинальных способов выделения ссылок в CSS.

Ссылка с фоном

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

Как обозначить ссылки, которые открываются в новом окне/вкладке? Для этого поведения даже существует привычная иконка. Но добавлять ее через тег будет не очень хорошим тоном. Желательно, чтобы иконка открытия в новом окне появлялась автоматически, если у ссылки есть соответствующий HTML-атрибут target=»_blank» . Здесь нам на помощь придет селектор атрибутов:

a[target=»_blank»]

Ссылка с фоновым рисунком background-image

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

Кроме изображений, можно задавать ссылкам и различные виды градиентов (помните, мы это делали на последнем практическом уроке?). Это здорово преображает элемент, в чем мы снова убедимся далее.

Ссылка-кнопка

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

Несколько примеров (чтобы просмотреть код CSS для каждого примера, кликните по изображению):

Код CSS для данного примера:

a < font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #ffffff; padding: 16px 26px; background: -moz-linear-gradient( top, #42aaff 0%, #003366); background: -webkit-gradient( linear, left top, left bottom, from(#42aaff), to(#003366)); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #003366; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); text-shadow: 0px -1px 0px rgba(000,000,000,0.7), 0px 1px 0px rgba(255,255,255,0.3); display: inline-block; text-decoration: none; >a:hover < background: -moz-linear-gradient( top, #42aaff 0%, #0d5aa7); background: -webkit-gradient( linear, left top, left bottom, from(#42aaff), to(#0d5aa7)); >a:active

Код CSS для данного примера:

a < font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #fafafa; padding: 16px 26px; display: inline-block; text-decoration: none; border-radius: 3px; box-shadow: 0px 6px #27ae60; background: #2ecc71; >a:hover < background: #36d479; >a:active

В этих примерах определены стили как для обычного состояния ссылки-кнопки, так и для состояний :hover (наведение) и :active (нажатие/удержание). Как видите, CSS позволяет имитировать внешний вид настоящей кнопки до мельчайших деталей.

Важно: чтобы иметь возможность подобным образом стилизовать ссылку, нужно заставить ее вести себя как блочный (block) либо строчно-блочный элемент (inline-block). Дело в том, что если вы будете добавлять отступы к строчному элементу (коим по умолчанию является ссылка), то не увидите никакого эффекта.

Как изменить цвет ссылки на странице с помощью CSS: простой гайд

Веб-страницы наполнены ссылками, которые дают возможность пользователям переходить из одной части сайта в другую и на другие сайты. Однако, стандартный цвет ссылок может иногда выглядеть скучно и не привлекать внимание посетителей. Но не беда! Изменение цвета ссылки на странице используя CSS простой дело.

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

Так что же, давайте начнем и освоим один из базовых приемов для стилизации элементов на веб-странице!

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

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

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

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

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

Изменение цвета текста ссылки с помощью CSS

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

Для того чтобы изменить цвет текста ссылки, нужно применить CSS свойство color. Например:

Общий стиль для всех ссылок:
a { color: blue; } — текст ссылки будет синим цветом
a { color: #FF0000; } — текст ссылки будет красным цветом

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

Изменение цвета ссылки внутри определенного элемента:
p a { color: green; } — текст ссылки внутри всех элементов «p» будет зеленым цветом
h3 a { color: #FFA500; } — текст ссылки внутри всех элементов «h3» будет оранжевым цветом

Еще по теме: Как создать резиновый сайт по шагам с помощью HTML и CSS

Значение color можно указывать как название цвета в виде строки (например, «red»), так и в виде шестнадцатеричного кода (например, «#FFA500»). Также можно использовать значения RGBA или HSLA для указания цвета с прозрачностью.

Как изменить цвет фона ссылки на странице с помощью CSS

Цвет фона ссылки на странице можно легко изменить используя CSS. Для этого необходимо добавить соответствующий CSS-код внутрь тега .

Вот пример CSS-кода, который изменяет цвет фона ссылки на желтый:

Этот код будет выглядеть так:

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

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

Изменение цвета при наведении

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

Чтобы изменить цвет ссылки при наведении, нужно указать для псевдокласса :hover нужный цвет:

Синий цвет: a:hover
Красный цвет: a:hover
Зеленый цвет: a:hover

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

Как изменить цвет нескольких ссылок на странице с помощью CSS?

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

  .red-link < color: #ff0000; >.blue-link Это красная ссылка.
 Это синяя ссылка.

В этом примере мы создали два класса — .red-link и .blue-link — и применили их к соответствующим ссылкам. С помощью CSS мы задали цвет для каждого класса и изменили цвет нескольких ссылок одновременно.

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

Изменение цвета по состоянию

Цвет ссылки может изменяться в зависимости от её состояния. Это позволяет улучшить пользовательский опыт и облегчить навигацию на сайте. Состояния ссылок, которые можно стилизовать, включают:

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

Чтобы стилизовать цвет ссылки в каждом из вышеперечисленных состояний, нужно использовать соответствующий псевдокласс и указать цвет в свойстве color. Например:

:link	состояние ссылки по умолчанию	a:link
:visited	состояние ссылки после посещения	a:visited
:hover	состояние ссылки при наведении курсора	a:hover
:active	состояние ссылки во время нажатия	a:active

Обратите внимание, что порядок указания псевдоклассов в CSS имеет значение. Если два правила имеют одинаковый селектор, но разные псевдоклассы, то будет применяться правило с псевдоклассом, указанным последним.

Еще по теме: Как добавлять классы CSS в WordPress с помощью условий if else

Изменение цвета по классу

В CSS можно изменять цвет ссылки не только по ее типу, но и по классу. Класс – это специальный атрибут, который можно добавлять к элементам кода, например, к ссылкам.

Чтобы создать класс для ссылок, нужно написать следующий код:

 .my-link

В данном случае мы создаем класс с названием «my-link», который будет изменять цвет ссылки на зеленый. Чтобы применить этот класс к конкретной ссылке, нужно добавить его в атрибут class:

Таким образом, все ссылки с классом «my-link» будут иметь зеленый цвет. Это удобно, если на странице есть несколько ссылок и нужно изменить цвет только у некоторых из них.

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

Изменение цвета глобально

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

Для того чтобы сделать изменение глобально, нужно использовать псевдокласс :link , который определяет стиль для непосещенных ссылок. С помощью свойства color мы можем задать цвет для всех ссылок, у которых атрибут href еще не был кликнут.

a:link color: blue;
>

В данном примере мы устанавливаем цвет синей для всех не кликнутых ссылок на странице.

Дополнительно, можно использовать другие псевдоклассы, такие как :visited (для задания стиля посещенных ссылок), :hover (для задания стиля при наведении на ссылку) и :active (для задания стиля при нажатии на ссылку).

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

Использование градиента

Градиент – это плавный переход от одного цвета к другому. Он может быть линейным или радиальным и использоваться для создания интересных фоновых эффектов. Градиент можно задать с помощью CSS и использовать в своем дизайне.

Для создания градиента в CSS используется свойство background-image. Сначала нужно определить направление градиента, которое задается с помощью свойства background-image: linear-gradient. Далее указываем начальный и конечный цвет и, при желании, добавляем другие параметры.

background-image: linear-gradient(to bottom, #FFFFFF, #000000);

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

Градиенты могут также быть наложены на текст, что создаст интересный и эффектный дизайн. Для этого используют свойство background-clip.

background-image: linear-gradient(to bottom, #FFFFFF, #000000); background-clip: text; color: transparent;

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

Еще по теме: Как избавиться от нижнего скролла в CSS? Эффективные способы

Оптимизация под SEO

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

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

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

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

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

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

Вопрос-ответ:

1. Как изменить цвет ссылки на всей странице?

Для изменения цвета ссылки на всей странице можно использовать селектор, который выбирает все ссылки на странице. Например, можно прописать такой код: a — где red — цвет, который вы хотите использовать в качестве цвета ссылки.

2. Как изменить цвет ссылки при наведении мыши?

Для изменения цвета ссылки при наведении мыши можно использовать псевдокласс :hover. Например, можно прописать такой код: a:hover — где green — цвет, который вы хотите использовать в качестве цвета ссылки при наведении мыши.

3. Могу ли я изменить цвет ссылки только для конкретных элементов на странице?

Да, вы можете изменить цвет ссылки только для конкретных элементов на странице, используя специфические селекторы. Например, если вы хотите изменить цвет ссылки только для ссылок, находящихся внутри элемента с классом «my-class», то нужно прописать такой код: .my-class a — где blue — цвет, который вы хотите использовать в качестве цвета ссылки.

4. Как добавить подчеркивание к ссылкам?

Для добавления подчеркивания к ссылкам можно использовать свойство text-decoration. Например, чтобы добавить подчеркивание к ссылкам, можно прописать такой код: a — где underline — стиль подчеркивания, который вы хотите использовать.

5. Могу ли я изменить цвет ссылки только для выбранной его части?

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

, то можно прописать такой код: h1 a — где purple — цвет, который вы хотите использовать в качестве цвета ссылки.

Как поменять цвет посещенной ссылки , но не везде

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

Отслеживать
задан 27 сен 2016 в 11:26
1,395 19 19 серебряных знаков 47 47 бронзовых знаков
Что такое «убрать цвет»? Сделать цвет ссылки равным цвету фона?
27 сен 2016 в 11:59

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

a, a:visited, a:hover, a:active

Отслеживать
ответ дан 27 сен 2016 в 11:36
1,753 1 1 золотой знак 15 15 серебряных знаков 21 21 бронзовый знак

Вы сказали, что «на сайте есть разные блоки с разными цветами», т.е. эти блоки имеют свой класс, этим вы и можете воспользоваться.

Например у Вас используются блоки с классом .a1 и .a2. Если Вам надо поменять цвет посещённой ссылки в .a1, то сделайте так:

.a1 a:visited

А если нужно поменять цвет посещённой ссылки везде, кроме этих DIVов, то пишите так:

a:visited .a1 a:visited, .a2 a:visited

Как убрать синий цвет ссылки в html

Привет, друзья! Устраивает ли вас цвет ссылок на вашем блоге или сайте? Если нет, и вы хотите изменить цвет ссылки, не беда. Сегодня я научу вас, как изменить цвет ссылки в HTML и CSS коде.

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

То, что я вам расскажу, будет работать на любом движке, неважно будет это WordPress или uCoz, ведь HTML и CSS используют все движки.

Цвет ссылки в CSS

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

Значение, каким цветом выводить ссылки на сайте прописывается в CSS коде, чаще всего в файле style.css. Находится этот файл всегда в корневой папке сайта.

Чтобы изменить цвет всех ссылок на сайте в CSS вам нужно открыть файл style.css и найти в нем код отвечающий за вывод ссылок. Просто найдите упоминание link или Link Styles.

стиль ссылок

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

Цвет CSS ссылок в обычном состоянии.

CSS цвет ссылок при нажатии на нее.

Цвет посещенной ссылки.

Соответственно, чтобы цвет ссылок в спокойном состоянии, мы меняем значение color: #0169D3 на свой цвет в псевдоклассе a:link.

Чтобы изменить цвет посещенных ссылок, нужно изменить значение color: #0169D3 в псевдоклассе a:visited.

Если вы хотите, чтобы ваши ссылки стали подчеркнутыми, нужно вписать в CSS код ссылки значение text-decoration:underline; как на примере:

А если наоборот хотите убрать подчеркивание ссылки, нужно вписать значение text-decoration:none;

Как менять цвет ссылок в CSS думаю понятно. Теперь давайте рассмотрим как изменить цвет ссылки в HTML коде.

HTML цвет ссылки

В отличие от CSS, где разом можно изменить все ссылки на сайте, в HTML можно поменять цвет только одной определенной ссылки.

Сама ссылка в HTML коде выглядит следующим образом:

Для того, чтобы задать ей цвет, нужно добавить значение font color для текста ссылки, чтобы получилось вот так:

Таким образом я выделил ссылку красным цветом в HTML коде.

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

Стилизация ссылок

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

Для изучения вам потребуется:	Основы компьютерной грамотности, базовые знания HTML (изучите Введение в HTML), основы CSS (изучите Введение в CSS), базовые знания о текстах и шрифтах CSS.
Вы узнаете:	Изучите как стилизуются ссылки и как использовать ссылки эффективно в общих задачах UI (пользовательских интерфейсах), например, в меню навигации.

Давайте посмотрим на некоторые ссылки

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

Состояния ссылок

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

Link (не посещённая): Состояние по умолчанию, в котором находится ссылка , когда она не находится в каком-либо другом состоянии. Она может быть специфически стилизована используя псевдокласс :link .
Visited: Ссылка, когда она уже была посещена (существует в истории браузера), стилизуется используя псевдокласс :visited .
Hover: Ссылка, когда на неё наведён курсор мыши, стилизуется используя псевдокласс :hover
Focus: Ссылка, когда она была сфокусирована (например когда пользователь переместился на неё используя клавишу Tab или наподобие или программно сфокусирована используя HTMLElement.focus() (en-US)) — стилизуется используя псевдокласс :focus .
Active: Ссылка, когда она активируется (например при клике по ней), стилизуется используя псевдокласс :active

Стили по умолчанию

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

Вы заметите несколько вещей при изучении стилей по умолчанию :

Ссылки подчёркнуты.
Не посещённые ссылки синие.
Посещённые ссылки фиолетовые
Наведение курсора мыши на ссылку меняют указатель мыши на иконку маленькой руки.
Сфокусированные ссылки имеют контур вокруг себя — вы можете сфокусироваться на ссылках на этой странице с помощью клавиатуры, нажав клавишу табуляции (на Mac, вам может понадобиться включить опцию Full Keyboard Access: All controls нажав Ctrl + F7 , прежде чем это будет работать ).
Активные ссылки красные (попробуйте удерживать кнопку мыши на ссылке, когда вы кликните по ней).

Довольно интересно, что эти стили по умолчанию приблизительно такие же какими они были в первые дни браузеров в середине 1990-ых. Это потому, что пользователи знают и привыкли ожидать такого поведения — если бы ссылки были стилизованы по-разному, это бы путало много людей. Это не значит, что вы не должны стилизовать ссылки совсем, просто вы не должны уходить слишком далеко от ожидаемого поведения. По крайней мере вы должны:

Использовать нижнее подчёркивание для ссылок, но не для других вещей. Если вы не хотите подчёркивать ссылки, то хотя бы выделите их каким-либо другим путём.
Сделать так чтобы они как-нибудь реагировали на наведение/фокусировку на них и немного отличались после активации.

Стили по умолчанию могут быть выключены/изменены, используя следующие свойства CSS:

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

Обратите внимание: вы не ограничены только перечисленными выше свойствами чтобы стилизовать ссылки — вы можете использовать любые свойства, которые вам нравятся. Просто постарайтесь не сходить с ума слишком сильно!

Стилизация некоторых ссылок

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

Чтобы начать, мы выпишем наши пустые наборы правил:

Этот порядок важен так как стили ссылок опираются друг на друга, например стили в первом правиле будут применяться ко всем последующим правилам и когда ссылка будет активирована, она также будет находиться под «наведением» (hover). Если вы введёте их в неправильном порядке, стили не будут работать правильно. Чтобы запомнить этот порядок вы можете попробовать использовать мнемонику типа LoVe Fears HAte.

А теперь давайте добавим ещё немного информации чтобы правильно оформить этот стиль:

Также мы дадим некий пример HTML к которому применяется CSS:

Объединение этих двух даёт нам такой результат:

Итак, что мы сделали тут? Это определённо выглядит иначе чем стилизация по умолчанию, но все ещё даёт достаточно знакомый опыт для пользователей, чтобы знать, что происходит:

Первые два правила не так интересны в этом обсуждении.
Третье правило использует селектор a чтобы избавиться от подчёркивания текста и контура фокуса по умолчанию (которые всё равно варьируют в зависимости от браузера), а также добавляет малое количество padding к каждой ссылке — все это станет ясно позже.
Далее, мы используем селекторы a:link и a:visited чтобы настроить пару цветовых вариаций не посещённых и посещённых ссылок, так чтоб они отличались.
Следующие два правила используют a:focus и a:hover настраивают сфокусированные и наведённые (hovered) ссылки таким образом чтобы они имели разные фоновые цвета, плюс нижнее подчёркивание чтобы ссылка выделялась ещё больше. Два пункта на которые надо обратить внимание:
- Нижнее подчёркивание создано используя border-bottom , а не text-decoration (en-US) — некоторые люди предпочитают это потому что первый имеет лучшие варианты стилизации, чем второй, и отрисован немного ниже, так что не срезает нижние элементы слов будучи подчёркнутыми (например хвосты у букв как «р» и «у»).
- Значение border-bottom установлено на 1px solid , без определённого цвета. Это позволяет границам принимать тот же цвет что и элементы текста, что полезно в случае как этом, где текст имеет разные цвета в каждом случае.
Активное изучение: Стилизуйте ссылки самостоятельно

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

Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку Reset. Если вы действительно застряли нажмите кнопку Show solution чтобы вставить пример, который мы показали выше.

Добавление иконок в ссылки

Обычной практикой является добавление иконок в ссылки, чтобы предоставить больше индикатора того, на какой контент указывает ссылка. Давайте рассмотрим очень простой пример, который добавляет иконку к внешним ссылкам (ссылки, которые ведут на другие сайты). Такая ссылка обычно выглядит как маленькая стрела торчащая из коробочки — например, мы будем использовать этот отличный образец с сайта icons8.com.

Давайте взглянем на HTML и CSS которые дадут нам эффект, который мы хотим. Во-первых, немного простого HTML который будет стилизован:

Итак, что же тут происходит? Мы пропустим большую часть CSS так как это та же информация, которую вы рассматривали ранее. Однако, последнее правило интересное — тут мы вставляем пользовательское фоновое изображение во внешнюю ссылку схожим способом как мы делали пользовательские маркеры для пунктов списка в последней статье — в этот раз, однако, мы используем короткую запись background вместо индивидуальных свойств. Мы задаём путь к изображению, которое хотим вставить, устанавливаем no-repeat чтобы мы получили только одну копию вставленного и затем устанавливаем позицию на 100% до правого края изображения и 0 пикселей от верхнего края.

Также мы используем background-size для того чтобы указать размер в котором бы хотим чтобы было показано фоновое изображение — полезно иметь иконку большего размера и далее менять его размер так, как нужно для адаптивного (отзывчивого) веб-дизайна. Однако это работает только в IE9 и следующих версиях так что, если вам нужна поддержка тех старых браузеров вам просто придётся менять размер изображения и вставлять его как есть.

Наконец, мы задаём некоторый padding-right для ссылки чтобы добавить пространство в котором появляется фоновое изображение, таким образом, чтобы мы не накладывали его на текст.

И последнее слово — как мы выбрали только внешние ссылки? Ну, если вы пишете свои HTML ссылки правильно, то вы должны были использовать только абсолютные URL для внешних ссылок — гораздо эффективнее использовать относительные ссылки для связи с другими частями вашего сайта. Текст «http» таким образом должен появляться только во внешних ссылках и можем выбрать его при помощи селектора атрибутов: a[href*=»http»] выбирает элементы , но только если они имеют атрибут href со значением содержащим «http» где-то внутри него.

Ну вот и все — попробуйте посетить секцию активного изучения выше и испытайте этот новый метод!

Обратите внимание: Не переживайте если вы ещё не знакомы с фоном и адаптивным (отзывчивым) веб-дизайном; это объяснено в других местах

Стилизация ссылок в виде кнопок

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

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

Для начала HTML:

А теперь наш CSS:

Что даёт нам следующий результат:

Давайте объясним, что тут происходит, фокусируясь на самых интересных частях:
- Наше второе правило удаляет заданный по умолчанию padding у элемента
  - Элементы
  - по умолчанию в норме являются блочными (см. типы блоков CSS чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаём горизонтальный список ссылок, поэтому в третьем правиле задаём свойству display значение inline, что приводит к тому, что элементы списка располагаются в одной строке друг с другом — теперь они ведут себя как строчные элементы.
  - четвёртое правило — которое стилизует элемент — самое сложное; давайте пройдёмся по нему шаг за шагом:
    - как в предыдущем примере, мы начинаем отключать настройки по умолчанию для text-decoration (en-US) и outline (en-US) — мы не хотим, чтоб они портили нам вид.
    - Далее мы устанавливаем display на inline-block — элементы являются строчными по умолчанию и, поскольку мы не хотим чтобы они вываливались на свои собственные строки как если бы это получалось со значением block , мы хотим иметь возможность менять их размер. inline-block позволяет нам делать это.
    - Теперь только изменение размера! Мы хотим заполнить всю ширину элемента