Как сделать ссылки не подчеркнутыми
Свойства ссылок
Для управления видом различных ссылок в CSS используются псевдоклассы, которые указываются после селектора A через двоеточие. В табл. 1 приведены допустимые псевдоклассы и их описания.
| Свойство | Описание |
|---|---|
| A:link | Определяет стиль для обычной непосещенной ссылки. |
| A:visited | Определяет стиль для посещенной ссылки. |
| A:active | Определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее. |
| A:hover | Определяет стиль для ссылки при наведении на нее мышью. |
Ссылки без подчеркивания
Одно из наиболее популярных применений CSS — это скрытие подчеркивания у ссылок. С позиции юзабилити не совсем верное решение, поскольку пользователь может сразу не догадаться, что текст, который он видит, является ссылкой. Все ведь уже привыкли — раз подчеркивание используется, значит это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать определенный эффект сайту. Часто делается, что при наведении курсора, ссылка становится подчеркнутой, меняет свой цвет или используется и тот и другой эффект одновременно (пример 1).
Пример 1. Подчеркивание у ссылки и изменение ее цвета
Ниже приведено использование данного примера. При наведении курсора на ссылку, она становится подчеркнутой и красной.
Подчеркнутые и надчеркнутые ссылки
Пример 2. Использование подчеркивания в ссылках
Изменение размера ссылки
Пример 3 показывает, как изменять размер ссылки при наведении на нее курсора.
Пример 3. Изменение размера ссылки
Изменение цвета подчеркивания
Со ссылками, при помощи CSS, можно сделать интересную особенность. Цвет ссылки, при наведении на нее курсора мыши, остается неизменным, но зато у нее появляется подчеркивание другого цвета, нежели сама ссылка (пример 4).
Пример 4. Создание подчеркивание другого цвета
Ссылки разных цветов
Часто возникает необходимость на одной странице использовать ссылки разных цветов и размеров. И применять для каждой области веб-страницы ссылки подходящего типа. Одни для меню, другие для текста. В этом случае создаем два или больше класса со своими параметрами и применяем их по своему усмотрению. В примере 6 достаточно поменять значения у соответствующего класса, и цвета у ссылок, где этот класс используются, изменятся автоматически.
Пример 5. Ссылки разных цветов
Результат данного примера показан на рис. 1.
Первое, что мы теперь делаем, это делаем список всех подпунктов, касающихся нашей темы подчеркивание ссылки! Это, как мне кажется намного стало удобнее и процент ухода пользователя, сократился до не бывалых малых величин!
Все о добавлении и удалении подчеркивания ссылки:
Подчеркивание ссылки по умолчанию
Мы сделаем отдельный класс чтобы увидеть это подчеркивание по умолчанию прямо на даннйо странице!
Следующим пунктом уберем подчеркивание у ссылки!
Убрать подчеркивание ссылки css
И добавим такой этот класс нашей ссылке
Результат удаления подчеркивания у ссылки через css
Чтобы это правило распространялось на все ссылки на сайте нужно написать просто без класса
Но мы хоти удалить подчеркивание не на всегда, а лишь тогда, когда мышка будет сверху ссылки! Как убрать подчеркивание при наведении на ссылку!
Давайте это сделаем! Нам понадобится псевдо класс :hover
Чтобы нам продемонстрировать убирание ссылки при наведении нам понадобится новая ссылка и новый класс
Результат удаления подчеркивания при наведении мышки:
Результат добавления ссылки при наведении мышки:
Бордюр в качестве подчеркивания ссылки
border-bottom: 1px solid red;
Как изменить цвет подчеркивания ссылки?
Для того, чтобы изменить цвет подчеркивания, ссылки нам понадобится уничтожить подчеркивание по умолчанию :
Далее добавляем цветную линию под ссылкой:
Соберем стили для цветного подчеркивания ссылки:
border-bottom: 1px solid red;
Результат подчеркивание ссылки другого цвета:
Убрать бордюр под ссылкой при наведении
border-bottom: 1px solid red;
Результат, как убрать подчеркивание свойства border:
Изменить цвет подчеркивания под ссылкой при наведении
Как переводится слово solid
border-bottom: 1px solid red;
border-bottom: 1px solid black;
Результат изменения подчеркивания цвета при наведении
Пунктирное подчеркивание ссылки
Цвет подчеркивания задаем в свойстве «border»
Как переводится dashed
border-bottom: 1px dashed red;
Результат : пунктирное подчеркивание ссылки
Плавное подчеркивание ссылки при наведении css
Как сделать плавное подчеркивание ссылки!? Просто нужно написать соответствующие стили для плавного подчеркивание ссылки, либо же прямо здесь скопировать их!
Сделаем чтобы подчеркивание начиналось слева. При наведении, ссылка будет плавно подчеркиваться и подчеркивание будет начинаться слева. Пока курсор будет над ссылкой.
Когда дело доходит до ссылок, их легче принять такими, как они есть. В конце концов, вы просто ссылаетесь на какой-нибудь текст и все. Но что можно реально сделать, чтобы заставить людей кликнуть по ним? Может подчеркивание текста CSS?
Большая проблема, которую я вижу на многих блогах — ссылки не выглядят как ссылки. Читатель узнает о них только при наведении на них курсора. Это неприемлемо.
Выделите свои ссылки! В этой статье я расскажу о 8 эффективных способах изменения стиля ссылок.
Добавьте цвет
Один из лучших способов выделить ссылку состоит в том, чтобы добавить цвет! Когда большая часть текста черного цвета, добавьте другие цвета, чтобы сделать ссылки заметнее.
Но вы должны быть уверены, что выбранный цвет взаимодействует с остальной частью вашего бренда. Иначе ссылки будут выделяться, но неправильно.
Также помните о контрасте. Темный, почти черный цвет не обеспечит отличия ссылки от остального абзаца. А слишком светлый не даст достаточного контраста между белым фоном и текстом.
Мэрайя c Femtrepreneur использует интересный красный цвет, чтобы выделить свои ссылки:
Чтобы изменить цвет ссылок на сайте, взгляните на таблицу стилей темы и найдите следующее:
Нужна помощь в выборе цвета? Воспользуйтесь одним из популярных инструментов:
Сделайте жирнее
Еще один способ добавить контраста ссылкам состоит в том, чтобы сделать их полужирными. Выделение ссылки полужирным работает таким же образом.
Чтобы сделать CSS подчеркивание ссылки полужирным, добавьте следующий код:
Или используйте шрифт, который поддерживает различные значения насыщенности ( толщины ):
Добавьте подчеркивание
По умолчанию все ссылки оформлены подчеркиванием, а это означает, что если бы вы удалили CSS с сайта, каждая ссылка содержала бы подчеркивание. Это довольно распространенное предположение, что любой подчеркнутый текст является ссылкой. Так какой способ лучше использовать для выделения ссылок?
Более нетрадиционный способ добавить подчеркивание ссылке — установить нижнюю границу. Этот метод дает больше гибкости, когда речь заходит о том, как отображается подчеркивание.
В блоге KORY автор использует нижнюю границу для ссылок. Обратили внимание на большой разрыв между текстом и подчеркиванием? Это можно реализовать с помощью изменения внутреннего отступа ссылки:
Небольшой совет : Не обязательно придерживаться сплошной границы. Можно попробовать один из приведенных ниже вариантов:
Стиль курсивом
Выделить ссылки курсивом довольно просто, но об этом способе стилизации часто забывают. На приведенном ниже скриншоте страницы они выделяются, но при этом органично вписываются в дизайн сайта:
Сделайте все буквы заглавными
Используйте другой шрифт
Еще один способ выделить ссылки — использовать другой шрифт. Этот метод может внести беспорядок, если он неправильно использован. Так что следуйте следующим советам.
Для обеспечения максимальной слаженности выберите шрифт из того же семейства. В сжатом или черном варианте шрифт будет выделяться, но не слишком отличаться.
Для своих ссылок я выбрала шрифт, который достаточно похож, чтобы не бросаться в глаза, но отличается от остального текста. Так я получила контраст, который хотела.
Добавьте фоновый цвет
Один из моих любимых способов выделить ссылку ( после подчеркивания точками CSS ) — добавить фоновый цвет. Посмотрите на следующий пример:
Все, что нужно сделать, это добавить цвет фона и, возможно, небольшой внутренний отступ. Также можно изменить цвет шрифта для лучшей читаемости:
Комбинируйте!
Для достижения максимальных результатов скомбинируйте любые два ( или больше ) из перечисленных выше методов выделения. Вы, наверное, заметили, что в большинстве приведенных примеров ссылки были цветными. Это связано с тем, что цвет играет действительно большую роль в выделении ссылок по сравнению с окружающим текстом.
Подчеркивание ссылок и текста через CSS, свойство text-decoration
В одной из прошлых статей мы писали о мини дизайнерском тренде в виде добавления ярких фоновых полосок под ссылками и текстом на сайте. Аналогичный эффект также можно встретить в современных иллюстрациях для социальных сетей, которые содержат некий контент.
Сегодня решили продолжить тему и рассмотреть вопрос с точки зрения верстки, то есть рассказать как сделать подчеркивание текста / ссылок в HTML. В этом нам поможет одна замечательная статья, где хорошо описаны все нюансы текущей темы. В реализации будем использовать разные настройки свойства text-decoration, которое отвечает за функцию подчеркивания в CSS. Этим же способом сможете выделять mailto ссылки на адрес почты на сайте.
Раньше, помнится, поддержка данной опции в стилях была очень слабая, многие браузеры вообще ее не воспринимали. Сейчас ситуация улучшилась, хотя вы все еще рискуете получить неожиданный результат на старых версиях или в IE. Вероятно, совсем скоро наступит время, когда мы сможем задавать однозначное и корректное подчеркивание HTML ссылок / текстов без применения border-bottom. Хотя в одном из примеров прошлой статьи (онлайн журнале Wired) именно оно используется при реализации тренда:
Но вернемся к нашему уроку по верстке и более традиционному методу.
Опиця text-decoration для подчеркивание текста в CSS
Ранее она принимала одно из базовых значений:
Однако в новой редакции стилей предлагаются несколько иные свойства:
Для свойства text-decoration вы можете использовать сразу несколько значений параметров, перечисляя их в одной строке. Рассмотрим их по отдельности…
text-decoration-color — CSS цвет подчеркивания ссылки
Эта опция максимально простая и здесь, в принципе, нечего особо объяснять.
В качестве значение вводите код веб-цвета.
text-decoration-line — расположение линии оформления текста
Позволяет сделать разное подчеркивание в HTML нижнее (underline), верхнее (overline), перечеркнутый текст (line-through) и т.п. Совместим эту фишку с предыдущей и получится:
Во второй строке показано как все записывается в один ряд с text-decoration.
text-decoration-style — стиль подчеркивания текста
Опция задает внешний вид декоративной линии для оформления текста / ссылки. В новых рекомендациях CSS были добавлены значения wavy и double, теперь их всего 5:
text-underline-position — позиционирование CSS подчеркивания
С помощь этого свойства можно управлять позицией линии относительно глифа шрифта.
Всего доступны 4 варианта:
Вот наглядное отличие нижнего подчеркивания текста с помощью under и auto:
Разница, думаю, вполне очевидна.
text-decoration-skip — убираем подчеркивание для элементов
С помощью опции можно отменить (пропустить) декорирование некоторых элементов в HTML строке. Чтобы лучше понять допустимые значения spaces, objects, box-decoration, edges, ink продублирую картинку из прошлой заметки:
То есть, например, с помощью ink вы можете сделать нижнее подчеркивание в CSS, которое бы не пересекалось с символами шрифта. Значение objects позволяет пропускать инлайновые элементы (inline-block) — вставляете span, и сплошная линия прервется в соответствующем месте:
Параметры box-decoration, spaces, edges намного хуже поддерживаются браузерами, поэтому их результат иногда отличается от ожидаемого. Вот состояние по совместимости/поддержке text-decoration на момент написания статьи:
Дополнительные фишки для подчеркивания ссылок
Начинающие пользователи часто задают некоторые типовые вопросы по теме, поэтому мы также решили их рассмотреть. Общий пример находится в самом низу после пояснений.
Как убрать подчеркивание ссылки
Если ссылка декоративно выделена с помощью линии, то вам нужно найти CSS стиль, в котором прописывается свойство text-decoration и заменить его значение на «none»:
Тут важно правильно определить где именно в задается оформление вашему элементу. У него могут быть сторонние классы и другие дополнительные конструкции (не только тег a). Смотрите как мы реализовали это в примере ниже — абзац с классом «nounder».
Как сделать подчеркивание ссылки при наведении
В CSS для этих целей содержится так называемый псевдокласс hover — по теме есть большая детальная статья о создании hover эффекта в кнопках / картинках и не только (советуем глянуть). Если говорить вкратце, то вам просто нужно прописать обработку события:
Оба примера ниже позволяют понять логику работы при наведении: или вы изначально указываете в CSS подчеркивание ссылок, а потом убираете его в hover, либо наоборот.
Если будут еще какие-то вопросы по теме, задавайте их в комментариях. Постараемся рассмотреть позже или подсказать в ответах. Главное в этом деле практика — попробуйте добавить разные свойства для опции text-decoration непосредственно в примерах или создайте свой тестовый файл. Надеемся по теме подчеркивания текста и ссылок в CSS / HTML все стало ясно.
Типичный верстальщик
4 способа сделать нижнее подчеркивание для ссылок
В этой статье мы разберем несколько способов сделать нижнее подчеркивание текста. Два из них — самые популярные, остальные два не так очевидны, но имеют значительное преимущество. Какое? Об этом поговорим ниже. Итак, поехали!
text-decoration
Это самый популярный и, можно сказать, стандартный способ, подчеркнуть текст. Давайте рассмотрим как такое подчеркивание выглядит на практике:
Подчеркнутый текст и дополнительные содержание
border-bottom
Этот метод тоже можно отнести к стандартному. Многие его применяют, когда хотят отделить подчеркивание от текста. Наглядный пример:
Подчеркнутый текст и дополнительные содержание
Однако рассмотренные методы имеют 2 минуса:
Чтобы решить эти проблемы Вы можете воспользоваться двумя оставшимися методами. Применяйте тот, который больше нравится Вам.
a>span
Смысл этого метода в стилизации дочернего элемента span. А это значит, что внутри тега a, необходимо добавит тег span. Давайте посмотрим как это выглядит:
Подчеркнутый текст и дополнительные содержание
linear-gradient
Этот метод подразумевает создание линии через градиент и позиционирования его относительно текста. Давайте посмотри как это выглядит на практике:
Подчеркнутый текст и дополнительные содержание
Стоит заметить, что цвет линии становится не такой яркий, это нужно учесть для дизайна. «Отдалненность» линии от текста возможно регулировать за счет background-position.
Давай рассмотрим как сделать такое подчеркивание:
Заключение
В заключение хотелось бы вынести все примеры в один блок, чтобы возможно было понять разницу всех этих методов.
text-decoration:
Подчеркнутый текст и дополнительные содержание
border-bottom:
Подчеркнутый текст и дополнительные содержание
a>span:
Подчеркнутый текст и дополнительные содержание
linear-gradient:
Подчеркнутый текст и дополнительные содержание
А какой метод подчеркивания текста применяете Вы чаще всего? Например, я чаще всего использую третий способ, однако и четвертый очень сильно помогает, когда по макету требуется сделать линию не такой яркой, как сам текст.