Подчеркивание ссылки css: text-decoration-color | htmlbook.ru

Содержание

CSS оформление ссылок: убираем подчёркивание, меняем цвет

Селекторы псевдо-классов

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

span:hover { color: red; }

Ссылки

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


a:link { color: #0000ff; }

a:visited { color: #ff00ff; }

a:hover { color: #00ccff; }

a:active { color: #ff0000; }

Попробовать »

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

Псевдо-классы :hover и :active формально называют динамическими, поскольку они применяют стиль только при взаимодействии пользователя с соответствующими элементами путем наведения курсора мыши и щелчка по ссылке соответственно.

Примечание: :hover, помимо ссылок, можно использовать и с другими элементами, что позволяет создавать эффекты вроде подсветки строки таблицы при наведении на нее курсора мыши. Однако браузер IE6 и более ранние версии поддерживают использование данного псевдо-класса исключительно с элементами <a>.

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      a { text-decoration: none; } 
      a:hover { text-decoration: underline; }  
    </style>
  </head>

  <body>
    <p><b><a href="#">обычная ссылка</a></b></p>
  </body>
</html>

Попробовать »

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

Псевдо-классы :first-child и :last-child

Еще одним примером псевдо-классов являются :first-child и :last-child. Псевдо-класс :first-child ссылается на первый по порядку дочерний элемент обозначенного родителя, в отличие от него :last-child работает наоборот, он ссылается на последний дочерний элемент:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      div p:first-child { color: green; }
      div p:last-child { color: blue; }  
    </style>
  </head>

  <body>
  
    <div>
      <p>Первый дочерний абзац элемента div, он будет отображаться зеленого цвета.</p>
	  
	  <p>Второй дочерний абзац элемента div, он будет отображаться черного цвета,
	  поскольку никаких правил для него не задано.</p>
	  
	  <p>Третий дочерний абзац элемента div, он же является последним дочерним абзацем.
	  Цвет текста будет синим.</p>
    </div>
	
  </body>
</html>

Попробовать »

Поскольку первый абзац является первым дочерним элементом для <div>, его текст будет отображаться зеленым цветом. Цвет текста второго абзаца будет соответствовать цвету заданному по умолчанию, то есть черному. Цвет текста третьего абзаца будет окрашен в синий цвет, поскольку третий абзац является последним дочерним элементом для <div>.

Как удалить подчеркивание из ссылок в CSS

В веб-дизайне важна каждая деталь, включая ваши ссылки.

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

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

  • a: link – когда пользователь не посещал, не зависал или не нажимал на ссылку
  • a: посещено – после того, как пользователь перешел по ссылке
  • a: hover – когда пользователь наводит курсор мыши на ссылку
  • a: active – когда пользователь нажимает на ссылку

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

Источник изображения

Чтобы удалить подчеркивание из ссылок, вы можете использовать свойство CSS text-decoration. Ниже мы рассмотрим, как определить это свойство, чтобы полностью удалить подчеркивание со ссылок на вашем HTML-сайте или сайте Bootstrap.

Как удалить подчеркивание из ссылок в CSS

  1. Добавьте свой HTML-код в раздел своей веб-страницы.
  2. Определите четыре псевдокласса ссылок с помощью свойства text-decoration в разделе.
  3. Убедитесь, что ссылки: и: посещены предшествуют: hover, а: active идут последними. Это важно для каскадирования таблицы стилей.
  4. Установите для каждого свойства значение «нет».

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

Вот CSS:

 
   a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
a:active {
  text-decoration: none;
}
 

Вот HTML:

 
   <p><b><a href="default.asp" target="_blank">This is a link</a></b> that appears within a paragraph.</p>

Вот результат:

Источник изображения

Как удалить подчеркивание из ссылок в CSS на сайте Bootstrap

Этот процесс удаления немного отличается, если вы используете Bootstrap CSS в своем веб-проекте. Давайте кратко обсудим процесс для сайтов Bootstrap.

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

Источник изображения

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

Вот CSS:

 
   a:hover {
  text-decoration: none;
}
    a:active {
  text-decoration: none;
}
 

Вот HTML:

 
   <p><b><a href="default.asp" target="_blank">This is a link</a></b> that appears within a paragraph. Below is a link defined by Bootstrap's button class.</p>
  <a href="#" role="button">Link</a>
 

Вот результат:

Источник изображения

Стилизация ссылок с помощью CSS

Удаление подчеркивания в ссылках – один из самых частых вопросов программистов. Хорошая новость заключается в том, что с помощью свойства text-decoration процесс прост. Для этого вам просто нужно немного знать HTML и CSS.

Источник записи: https://blog.hubspot.com

Как через CSS убрать подчеркивание ссылок? Пособие для новичка. Как убрать подчеркивание ссылки

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

И как убрать это ненужное подчеркивание, я сейчас расскажу.

Как убрать подчеркивание у ссылок в HTML на CSS

В CSS существует свойство под названием «text-decoration
» – именно с помощью него мы и будем убирать стандартное подчеркивание ссылок.

Вариант с отдельным CSS:

Hello, World!

Или с CSS, прописанным в HTML:

Hello, World!

В первом случае «.link
» – это класс нужной вам ссылки, у которой необходимо убрать подчеркивание.

Как убрать подчеркивание у ссылок в HTML на jQuery

В jQuery существует метод «css
», который позволяет работать со стилями элемента. Воспользуемся им и получим следующее:

Hello, World!

Где «.link
» – идентификатор нужного элемента.

Обратите внимание
, что если ни один из способов вам не помог – есть вероятность того, что стили элемента уже где-то определены.

Для этого в любом из вариантов добавьте «!important
» через пробел, например:

Hello, World!

Это должно решить вашу проблему.

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

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

Инструкция: как в CSS убрать подчеркивание ссылок

За подчеркивание текста отвечает свойство text-decoration. Чтобы полностьюубрать нижнее подчеркивание ссылки CSS на странице, мы можем использовать один из следующих способов:

  • непосредственно к тегу ссылки в HTML назначить атрибут style
    , в котором прописать: text-decoration: none
    ;
  • назначить ссылке id
     и применить к нему аналогичные свойства;
  • чтобы убрать подчеркивание ссылок CSS для нескольких элементов, необходимо присвоить им класс атрибутом class
     и прописать такое же свойство, как и для одиночной ссылки.

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

  • a {text-decoration: none;}.

Подводные камни при работе в CSS со ссылками

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

Ссылки очень привередливы в плане управления ими через CSS. Например, интуитивно кажется, что если установить цвет текста для абзаца красным, то и ссылка в нем должна быть красной — но не тут то было. К каждой ссылке нужен «индивидуальный» подход, а если выражаться более технически точно — сначала в CSS мы должны указать либо id, либо class, либо селектор «a» в виде его местоположения в веб-документе, для которого мы хотим задать свойства. Если свойства прописывать просто для тега «a», то это определит базовые стили ссылок на странице, которые можно переназначить для отдельных элементов на странице с помощью CSS.

Убрать подчеркивание ссылок при наведении — просто, но не очевидно

Что мы имеем в виду, говоря о наведении на ссылку? С технической точки зрения, это является псевдоклассом селектора и определяет его состояние на данный момент. Разнообразие псевдоклассов и их функционал обширные настолько, что им можно выделить отдельную статью, а сейчас нас интересует лишь один псевдокласс — hover. Именно он отвечает за поведение ссылки (или любого другого HTML-тега) при наведении. Теперь, понимая структуру процесса обработки браузером вашего кода, можете использовать данный пример:

  • a: hover {text-decoration: none}.

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

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

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

Убираем различные линии

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

Если текст подчеркнут с использованием стандартной функции подчеркивания Microsoft Word, убрать его можно следующим образом:

1. Выделите текст, из которого нужно убрать подчеркивание.

2. Заходите в раздел «Главная
» и обратите внимание на пункт «Шрифт
».

3. Нажимайте на кнопку «Ч

».

4. Установите курсор после крайнего символа в документе (откуда начнете дальше писать) и посмотрите, стоит ли использование этого форматирования для последующего текста (выделена ли кнопка «Ч

»). Если да, снимите выделение и можно писать нормально.

Некоторым пользователям мешают всевозможные зеленые и красные подчеркивания, которые вызываются из-за работы автоматического сервиса проверки правописания в тексте. В данном случае два варианта:

Первый – отдельно просмотреть все исправления и согласиться/отклонить их. Делается следующим образом:

  • Кликните правой кнопкой мыши по отдельному слову (или любому слову в подчеркнутом словосочетании), под которым есть подчеркивание, после, выберите один из пунктов исправления.
  • Если вы считаете, что варианты исправления являются некорректными или программа по ошибке считает слово неправильным, просто нажмите «Добавить в словарь
    » или «Пропустить
    ».

Или можете просто отключить функцию автоматического правописания, делается следующим образом:

1. Нажимайте на значок «Word
» или клавишу «Файл
» в верхнем левом углу (в зависимости от используемой версии программы).

2. Выбирайте пункт «Параметры
».

3. Кликайте на «Правописание
».

4. Убирайте галочки с пунктов, указанных на скрине.

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

Дополнительные способы снятия подчеркивания вы можете .

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

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

Как убрать подчеркивание в Word: настройка форматирования

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

Если под словом находится линия, самый простой способ её удалить — изменить параметры начертания текста. Сделать это можно, используя инструмент вкладки «Главная»
, который визуально представляется собой кнопку с буквой «Ч
». В англоязычной версии программы этой функции соответствует кнопка «U
».

Вот последовательность действий, которая приведёт к требуемому результату:

  • выделить текст;
  • на вкладке «Главная» сделать неактивной кнопку «Ч
    », нажав на неё мышкой.

Продвинутые пользователи знают, как убрать подчеркивание в Word быстрым способом, и применяют для его снятия клавиши .

Специальные виды подчеркивания

Встроенная опция проверки правильности написания и расстановки знаков препинания отмечает фрагменты с ошибками линиями разных цветов. Красная волнистая линия означает, что слово написано неверно (или оно не присутствует в словаре Word), зелёная волнистая линия — требуется корректировка знаков препинания.

Есть три способа, как убрать красные подчеркивания в Word.

  1. Проверить правильность написания слова и исправить его, если при наборе была допущена опечатка.
  2. Навести курсор на слово, нажать правую кнопку мышки и в контекстном меню выбрать один из вариантов, предлагаемых программой.
  3. Отказаться от исправления. Для этого также следует навести курсор мышки на слово, нажать правую кнопку и выбрать в меню «Пропустить» или «Добавить в словарь». Слово, включённое пользователем в словарь, впоследствии ошибкой считаться не будет.

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

А как убрать зеленое подчеркивание в Word? Ответ: используйте способы, описанные выше. Отличие состоит в том, что приложение обнаружило ошибку грамматики.

Настройки программы

Кардинальный способ избавиться от цветных волнистых линий — отключить автопроверку текста. Выполняется эта операции через окно настроек программы. В версии 2007 — щелчок мышкой по логотипу Office, в новых версиях — переход в меню «Файл». Далее необходимо на вкладке «Правописание» убрать отметки в полях «Скрыть ошибки».

Итак, теперь вопрос о том, как убрать подчеркивание в Word, перестанет тревожить пользователя. Автоматическое исправление отключено. Но есть и минус — искать ошибки в документе придётся вручную.

В Word можно подчеркнуть надписи, пробелы, знаки табуляции. Доступны разные виды линий: волнистые, прямые, двойные. Ещё есть разделители страниц, таблицы . Красными, зелёными и синими «волнами» программа выделяет ошибки и неправильно оформленный текст. Чтобы пользоваться данным инструментарием, разберитесь, как добавить эти линии, как изменить их атрибуты и как убрать подчёркивание в Word, если его нельзя выделить.

В редакторе Word есть несколько способов подчеркивания текста. О них мы расскажем ниже.

Сделать полоску под надписью можно так:

  1. Выделите фрагмент.
  2. На главной панели меню найдите букву «Ч» с чёрточкой под ней. Или нажмите Ctrl+U. Избавиться от линии можно этим же сочетанием клавиш.
  3. Чтобы печатать уже с полосками, кликните на значок «Ч», напишите что-то, и снова кликните на «Ч».

Сама операция достаточно проста. Но так можно добавить только обычную черту. Вот как подчеркнуть текст в Word, если вам хочется использовать разные виды и цвета полосок:

  1. Выделите фрагмент.
  2. Нажмите маленькую стрелочку рядом с буквой «Ч».
  3. В выпавшем списке выберите расцветку и тип: двойная линия, штриховая, толстая, волнистая.

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

  1. Через раздел «Таблицы» (или Вставка — Таблицы, если у вас Word 2007) добавьте сетку.
  2. Напишите в ней пару слов.
  3. Кликните по рамке правой кнопкой мыши.
  4. «Границы и заливка».
  5. Откроются параметры. Справа будет область, в которой есть настройки видимости границ. Оставьте только нижнюю линию. Она останется на месте, даже если вы удалите текст.
  6. В этом же меню выберите тип и толщину полоски.

Можно сделать проще:

  1. После добавления сетки вверху окна появится раздел «Работа с таблицами». В нём перейдите во вкладку «Конструктор».
  2. Нажмите стрелку рядом с «Границы».
  3. Оставьте активной только опцию «Нижняя граница».

Такие полоски нужны при работе с HTML-документами. Этот приём подходит для создания полей ввода и веб-форм.

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

  1. Выделите текст.
  2. Кликните на чёрную стрелочку рядом с буквой «Ч».
  3. Пункт «Другие».
  4. В поле «Подчёркивание» выберите «Только слово».

Подчёркивание пробелов

Иногда нужно, чтобы линии находились под пробелами. Например, если вы готовите к печати документ, в котором должно быть место для ввода имени, фамилии или других данных. Для этого подойдут таблицы (взаимодействие с ними описано выше). Но есть и другие способы. Вот как сделать подчёркивание в Word без слов:

  1. Самый простой метод — нажмите Shift+[-] (дефис; без скобок). Появится линия. Это не часть оформления, а символ. К нему применимы все настройки шрифта.
  2. Чтобы изменить цвет полоски , найдите на панели меню кнопку с пиктограммой в виде буквы «А». Нажмите на стрелочку рядом с ней — откроется палитра.

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

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

  1. Нажмите клавишу «TAB». Она находится над кнопкой Caps Look. Курсор Word сдвинется.
  2. Лучше активировать отображение скрытых символов, чтобы видеть знаки табуляции, а не только набор слов. Для этого кликните на панели инструментов на иконку, похожую на букву «П» (кнопка называется «Абзац»). Или нажмите Ctrl+Shift+* (звёздочка). Табуляция в Word выглядит как стрелочка, указывающая вправо.
  3. Выделите её.
  4. Нажмите Ctrl+U.

Печатать над такими линиями тоже не получится. Но они гораздо шире пробелов — с ними будет легче выровнять строку.

Границы страниц

Если в Word ввести три звёздочки или три дефиса подряд, они могут стать горизонтальной линией (иногда для этого надо нажать Enter). Это автозамена превращает их в границу страницы . Чтобы создать определённый вид такой линии, надо сделать так:

  • Введите три знака равенства (=), чтобы создать двойную полосу.
  • Три звёздочки (*) — пунктирную.
  • Три дефиса (-) — простую.
  • Три нижних пробела (_) — жирную.

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

Вот как убрать подобную линию:

  1. Поставьте курсор Word в начало строки с полоской.
  2. Нажмите Delete.

Если этот способ не поможет, лучше сделать так:

  1. Раздел «Разметка страницы». Он находится в строке меню наверху окна.
  2. Кнопка «Границы страниц».
  3. В поле «Тип» задайте параметр «Нет». Горизонтальная линия пропадёт.

Красное, зелёное и синее подчёркивание — проверка орфографии

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

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

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

  1. Кликните правой кнопкой мыши на фрагмент, под которым появилась волнистая линия.
  2. Чтобы избавиться от неё, выберите пункт «Пропустить».
  3. Чтобы Word запомнил выбранное слово и записал его в свой словарь, нажмите «Добавить».

Если вы хотите совсем отключить проверку, откройте настройки:

  1. Перейдите в меню Сервис — Правописание (в Word 2007 для этого надо нажать на логотип Office в левом верхнем углу и в выпавшем списке выбрать «Параметры»).
  2. Уберите галочку в «Автоматически проверять орфографию» или отметьте «Скрыть ошибки только в этом документе». Автопроверка перестанет вам докучать. Но искать опечатки будет сложнее.

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

Стилизация: подчеркивание ссылок | Полезное для разработчика

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

«Практическая типография» на Butterick: Если вы чувствуете желание акцентировать что-то, используйте жирный шрифт или курсив. В особых ситуациях, таких как заголовки, вы также можете рассмотреть возможность использования всех заглавных букв, маленьких заглавных букв или изменения толщины. Не уверены? Я предлагаю вам найти книгу, газету или журнал, в которых акцентируется текст.

Но в Интернете все по-другому. Гиперссылки являются важной частью Интернета; и с самого начала интернета они были подчеркнуты. Это общепризнанное соглашение. Значение кристально ясно — подчеркивание означает ссылку.

Тем не менее, большое количество популярных веб-сайтов убрало подчеркивание: The New York Times, New York Magazine, The Washington Post, Bloomberg, Amazon, Apple, GitHub, Twitter, Wikipedia. Когда в 2014 году Google удалили подчеркивания со страницы результатов поиска, их ведущий дизайнер Джон Уайли заявил, что это создало более чистый вид. Тем не менее, на большинстве этих сайтов сохранилось с небольшими различиями выделение традиционным сине-голубым цветом (#0000EE), который был цветом браузера по умолчанию с самого начала Интернета. Хотя это обеспечивает для большинства пользователей визуальную подсказку, этого может быть недостаточно для обеспечения соответствия доступности WCAG.

Цвет не должен использоваться в качестве единственного визуального средства передачи информации, указания действия, запроса ответа или различения визуального элемента. — WCAG 2.1

WCAG не обязывает строго использовать подчеркивания для ссылок, но рекомендует их. Пользователи-дальтоники должны иметь возможность различать ссылки. Вы можете выделить их другими способами, например, жирным шрифтом font-weight. Или вы могли бы сохранить эту старую визуальную доступность. Но если мы собираемся использовать подчеркивание, мы хотим, чтобы оно выглядело красиво. Марчин Вичари, дизайнер из Medium, описал идеальное подчеркивание как:

[…] видимое, но ненавязчивое — позволяющее людям понять, на что можно нажимать, но не обращающее на себя слишком много внимания. Оно должно располагаться на правильном расстоянии от текста, удобно помещаясь позади текста, когда это же место должны занять выступающие части букв.

Для достижения этого традиционно требовались хитрости CSS.

Хаки, которые мы использовали

С этим трюком должны быть знакомы все разработчики — с помощью :border-bottom. Имитируя подчеркивание с помощью border-bottom, мы получаем контроль над цветом и толщиной. Эти псевдо-подчеркивания имеют одну проблему: слишком большое расстояние от текста. Вы могли бы потенциально решить эту проблему с помощью line-height, но и это имеет свои недостатки. Аналогичная техника использует box-shadow. Марчин Вичари впервые применил самую сложную технику, которая использовала background-image для имитации подчеркивания. Это были полезные хаки, но, к счастью, они больше не нужны.

Стилизация реальных подчеркиваний

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

text-underline-offset контролирует положение подчеркивания.

text-decoration-thickness контролирует толщину подчеркивания.

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

UX- агентство Clearleft смело использует (псевдо) подчеркивания, четко обозначая ссылки с помощью красочных стилей. Вот один из примеров искусственного подчеркивания:

a {
  text-decoration: none;
  border-bottom: #EA215A 0.125em solid;
}

Обратите внимание, что это псевдо-подчеркивание явно ниже выступающей части буквы «у»:

Вот тот же параграф при использовании DevTools для применения того же стиля к реальному подчеркиванию с новыми свойствами CSS:

a {
  text-decoration-color: #EA215A;
  text-decoration-thickness: .125em;
  text-underline-offset: 1.5px;
}

Вы заметили, что я использую в этом примере кода единицу em. Спецификация настоятельно рекомендует использовать ее, а не пиксели, чтобы толщина соответствовала шрифту. Эти свойства уже реализованы в Safari и появятся в Firefox 70.

С переходом браузера Microsoft Edge на Chromium мы, наконец, получим кросс-браузерную поддержку для свойства text-decoration-style, которое предлагает варианты: solid (по умолчанию), double, dotted, dashed и wavy. В сочетании эти новые свойства открывают целый ряд возможностей.

Возможно, это самое большое обновление для подчеркивания в Интернете, и при этом разработчикам нет необходимости что-либо делать. В старые добрые времена выступающие части букв бесцеремонно обрезались подчеркиванием, что было далеко не элегантно. Разработчики привыкли обходить этот недостаток, применяя text-shadow соответствующий цвету фона. text-decoration-skip-ink дает лучший способ создать разрывы подчеркивания вокруг выступающих частей.

Значение по умолчанию auto (слева) и значение none (справа)

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

Автор: Ollie Williams

Источник: https://css-tricks.com

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

Источник: https://webformyself.com/stilizaciya-podcherkivanie-ssylok/

Основы работы со ссылками и границами через CSS

В данном уроке мы с вами продолжим изучать различные CSS свойства.

Блок . Свойство text-decoration

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

Чаще всего это свойство используются для отмены подчеркивания ссылок
(они по умолчанию подчеркнуты).

Давайте посмотрим, какие значения может принимать свойство text-decoration.

Значение underline

Значение underline добавляет подчеркивание тексту:

p {
	text-decoration: underline;
}
<p>
	Lorem ipsum dolor sit amet.
</p>

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet.

Значение overline

Значение overline добавляет линию над текстом:

p {
	text-decoration: overline;
}
<p>
	Lorem ipsum dolor sit amet.
</p>

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet.

Значение line-through

Значение line-through добавляет линию, перечеркивающую текст:

p {
	text-decoration: line-through;
}
<p>
	Lorem ipsum dolor sit amet.
</p>

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet.

Значение none

Значение none отменяет все эффекты,
обычно используется для отмены подчеркивания ссылок.

В следующем примере ссылка по умолчанию будет подчеркнута,
а вторая ссылка с id=»link» будет без подчеркивания, так
как мы ей зададим text-decoration в значении none:

#link {
	text-decoration: none;
}
<a href="#">Ссылка по умолчанию</a>
<a href="#">Ссылка без подчеркивания</a>

Так код будет выглядеть в браузере:

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

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

К примеру, вот так — a:hover — мы поймаем состояние,
когда на ссылку навели курсор мышки. В этот момент мы можем, к примеру,
поменять цвет ссылки или убрать/добавить ей подчеркивание.

Конструкция :hover
называется псевдоклассом. Псевдоклассы позволяют
отлавливать разные состояния элементов.

Кроме :hover
если еще псевдоклассы :link, которые отлавливают не посещенную ссылку,
и :visited, которые отлавливают посещенную ссылку.

На некоторых сайтах с их помощью показывают пользователям, где они были,
а где — нет.

Есть еще и псевдокласс :active, который отлавливает следующее
состояние: на элемент нажали мышкой, но еще не отпустили.

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

a:link {
	color: red;
}
a:visited {
	color: green;
}
a:hover {
	text-decoration: none;
}
a:active {
	color: blue;
}
<a href="#">Ссылка</a>

Так код будет выглядеть в браузере:

Псевдоклассы наследуют друг от друга. К примеру, если я уберу подчеркивание для
состояния :link, то оно уберется для всех состояний.

Из-за наследования для корректной работы данные псевдоклассы следует
размещать именно в таком порядке, как в примере:
:link, :visited, :hover, :active (ненужные можно не писать). Этот порядок
подчиняется следующему мнемоническому правилу: LoVe HAte.

Часто состояния :link и :visited объединяют вместе через запятую:

a:link, a:visited {
	color: red;
}
a:hover {
	text-decoration: none;
}
a:active {
	color: blue;
}

В таком случае можно их вообще и не указывать:

a {
	color: red;
}
a:hover {
	text-decoration: none;
}
a:active {
	color: blue;
}

Блок . Сложные селекторы с учетом состояний ссылок

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

Давайте научимся обращаться к таким ссылкам.

Пусть у нас есть ссылки с классом .test и без него.
Выберем только ссылки с этим классом:

<a href="#">Ссылка без класса</a>
<a href="#">Ссылка с классом test</a>
<a href="#">Ссылка с классом test</a>
<a href="#">Ссылка с классом test</a>

a:link.test, a:visited.test {
	color: red;
}
a:hover.test {
	color: blue;
}

Пусть у нас есть ссылки внутри блока с id test.
Выберем только ссылки только из этого блока:

<a href="#">Ссылка вне блока</a>
<div>
	<a href="#">Ссылка внутри блока</a>
	<a href="#">Ссылка внутри блока</a>
	<a href="#">Ссылка внутри блока</a>
</div>
#test a:link, #test a:visited {
	color: red;
}
#test a:hover {
	color: blue;
}

Если вам не очень понятно, как обращаться со ссылками, то специально
для вас я снял следующее видео:

Здесь скоро появится видео по работе с состояниями ссылок.

Блок . Работа с границами на CSS

Сейчас мы с вами научимся добавлять границу элементам.
Это делается при помощи трех свойств:
свойство border-width задает толщину границы,
border-color — цвет, а border-style задает тип границы.

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

А вот свойство border-style может принимать одно из нескольких значений:
solid (сплошная линия), dotted (граница в виде точек),
dashed (граница в виде черточек), ridge (выпуклая граница), double (двойная граница),
groove (вогнутая граница), inset (рамка), outset (рамка) или none (отменяет границу).

Сделаем, к примеру, границу толщиной 3 пикселя, в виде точек, красного цвета:

div {
	border-width: 3px; /* толщина 3px */
	border-style: dotted; /* в виде точек */
	border-color: red;  /* красный цвет */
	width: 300px;
	height: 100px;
}

Так код будет выглядеть в браузере:

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

Значение solid

Значение solid — сплошная линия:

div {
	border-width: 1px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Так код будет выглядеть в браузере:

Значение dotted

Значение dotted — линия в виде точек:

div {
	border-width: 1px;
	border-style: dotted;
	border-color: black;
	width: 300px;
	height: 100px;
}

Так код будет выглядеть в браузере:

Значение dashed

Значение dashed — линия в виде тире:

div {
	border-width: 1px;
	border-style: dashed;
	border-color: black;
	width: 300px;
	height: 100px;
}

Так код будет выглядеть в браузере:

Значение ridge

Значение ridge — выпуклая линия:

div {
	border-width: 3px;
	border-style: ridge;
	border-color: black;
	width: 300px;
	height: 100px;
}

Так код будет выглядеть в браузере:

Значение double

Значение double — двойная линия:

div {
	border-width: 3px;
	border-style: double;
	border-color: black;
	width: 300px;
	height: 100px;
}

Так код будет выглядеть в браузере:

Значение groove

Значение groove — вогнутая линия:

div {
	border-width: 3px;
	border-style: groove;
	border-color: black;
	width: 300px;
	height: 100px;
}

Так код будет выглядеть в браузере:

Значение inset

Значение inset — рамка:

div {
	border-width: 3px;
	border-style: inset;
	border-color: black;
	width: 300px;
	height: 100px;
}

Так код будет выглядеть в браузере:

Значение outset

Значение outset — рамка:

div {
	border-width: 3px;
	border-style: outset;
	border-color: black;
	width: 300px;
	height: 100px;
}

Так код будет выглядеть в браузере:

Блок . Свойство-сокращение для границ

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

<div></div>
div {
	width: 300px;
	height: 100px;
	border: 1px solid red;
}

Так код будет выглядеть в браузере:

Чаще всего гораздо удобнее пользоваться свойством-сокращением,
чем отдельными свойствами.

Блок . Граница для отдельных сторон

Существуют также свойства-сокращения для отдельных сторон:
border-left (левая граница), border-right (правая граница),
border-top (верхняя граница), border-bottom (нижняя граница).

Давайте сделаем блоку
только левую границу с помощью свойства border-left:

<div></div>
div {
	width: 300px;
	height: 100px;
	border-left: 1px solid red;
}

Так код будет выглядеть в браузере:

А теперь одновременно сделаем и левую, и правую границы:

<div></div>
div {
	width: 300px;
	height: 100px;
	border-left: 1px solid red;
	border-right: 1px solid red;
}

Так код будет выглядеть в браузере:

Блок . Скругленные уголки

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

Уголки границ (и фона, который мы разберем ниже) скругляются свойством border-radius,
которое принимает значение в пикселях или процентах (или других единицах CSS).

Давайте скруглим уголки блоку, задав ему скругление в 10px:

<div></div>
div {
	width: 300px;
	height: 100px;
	border: 1px solid red;
	border-radius: 10px;
}

Так код будет выглядеть в браузере:

Что означает то, что мы указали скругление в 10px?
Это радиус круга, который можно вписать в это скругление.
Если у вас нелады с математикой и вам не понятно последнее предложение —
забудьте о нем и просто подбирайте скругление на глаз.
При некотором опыте это сделать не проблема
(измерительного инструмента для измерения скруглений не существует,
по крайней мере я о таком не слышал).

Имейте ввиду, что border-radius не входит в свойство-сокращение border,
это разные свойства, хоть и имеют похожие названия.

Блок . Разные скругления для разных углов

Сейчас мы с вами научимся делать
разные скругления для разных углов.
Как это сделать: свойство border-radius может не только одно значение,
но и два, три или четыре. Каждое значение будет задавать скругление для своего угла.
Давайте посмотрим более подробно.

Четыре значения

Свойство border-radius может принимать 4 значения.
Как в этом случае будут скругляться уголки — смотрите на следующем примере:
border-radius: 10px 20px 30px 40px —
10px — верхний левый угол,
20px — верхний правый угол,
30px — нижний правый угол,
40px — нижний левый угол.

Смотрите, что у нас получится:

<div></div>
div {
	width: 300px;
	height: 100px;
	border: 1px solid red;
	border-radius: 10px 20px 30px 40px;
}

Так код будет выглядеть в браузере:

Два значения

Если же в border-radius написать два значения,
то первое задаст скругление углов одной диагонали,
а второе — другой.

Смотрите на примере:

<div></div>
div {
	width: 300px;
	height: 100px;
	border: 1px solid red;
	border-radius: 10px 40px;
}

Так код будет выглядеть в браузере:

Три значения

Ну, и наконец, если в border-radius написать три значения,
то первое задаст скругление верхнего левого угла, третье — нижнего правого,
а второе — скругление углов диагонали (двух оставшихся углов).

Смотрите на примере:

<div></div>
div {
	width: 300px;
	height: 100px;
	border: 1px solid red;
	border-radius: 10px 20px 30px;
}

Так код будет выглядеть в браузере:

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Когда все решите — переходите к изучению новой темы.

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

В веб-дизайне часто прибегают к такому решению — подчеркивание ссылок пунктирной линией или точками. Такие ссылки обычно не совершают перехода на страницу, а открывают какой-либо скрытый слой. Например: на сайте expange.ru (если пользователь не авторизован) при нажатии на ссылку «Авторизация» открывается скрытый слой, на котором форма авторизации — удобно, быстро и без перезагрузки страницы (экономия трафика).

Подчеркивание черточкой

Подчеркивание черточками

<a href=»/»>
Подчеркивание черточками
</a>

Подчеркивание точками

Подчеркивание точками

<a href=»/»>
Подчеркивание точками
</a>

Примечание: В Internet Explorer 6 подчеркнуть точками не получится, выглядеть будет как подчеркивание черточкой.

Примечание

a:hover

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

<style type=»text/css»>
a {color:#F00; text-decoration:none; border-bottom:#F00 1px dashed;}
a:hover {color:#900; border-bottom-color:#900;}
</style>
<a href=»http://expange.ru/»>При наведении цвет изменится с #F00 на #900</a>

Свойство padding в ссылках

Если ссылка в стилях имеет свойство padding, например padding:5px 10px;, то наше нижнее подчеркивание ссылки будет на 5 пикселей отдалено от текста. Чтобы решить эту проблему нам понадобится «промежуточный тег»:

<style type=»text/css»>
a {color:#F00; text-decoration:none; padding:5px 10px;}
a ins {text-decoration:none; border-bottom:#F00 1px dashed;}
</style>
<a href=»http://expange.ru/»><ins>Используем промежуточный тег</ins></a>

КАК: Как удалить подчеркивания из ссылок

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

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

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

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

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

Используйте каскадные таблицы стилей, чтобы отключить подчеркивание ссылок.

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

a { text-decoration: none;}

Это оно! Эта простая строка CSS отключит подчеркивание (которое на самом деле использует свойство CSS для «text-decoration») для всех ссылок.

Вы также можете получить более конкретный характер с этим стилем. Например, если вы хотите отключить подчеркивание или ссылки внутри элемента «nav», вы можете написать:

nav a { text-decoration: none;}

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

Одна вещь, которую многие веб-дизайнеры предпочитают делать, — это включить ссылку «on», когда кто-то нависает над текстом. Это будет сделано с использованием псевдокласса CSS: hover CSS, например:

a { text-decoration: none;}a: hover { текст-отделка: подчеркнуть;}

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

В качестве альтернативы внесению изменений в внешнюю таблицу стилей вы также можете добавить стили непосредственно к самому элементу в HTML.

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

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

В заключение

Так же легко, как удалить подчеркивание из текстовых ссылок веб-страницы, вы также должны помнить о последствиях этого. Хотя он действительно может очистить внешний вид страницы, он может сделать это за счет общего удобства использования. Примите во внимание следующий раз, когда вы рассмотрите возможность изменения свойств «text-decoration» страницы.

Списки стилей CSS

заказанных списков:

  1. Кофе
  2. Чай
  3. Кока-Кола
  1. Кофе
  2. Чай
  3. Кока-Кола

Списки HTML и свойства списков CSS

В HTML есть два основных типа списков: