Как в html сделать подчеркивание: Тег | htmlbook.ru

Содержание

Как добавить подчеркивание к заголовку?

Подчеркивание для блочных элементов вроде тега <h2> можно проводить двояко. Например, линию под текстом устанавливать на всю ширину блока, независимо от объема текста. А также подчеркивание делать только у текста. Далее рассмотрим оба варианта.

Линия под текстом на всю ширину блока

Чтобы создать линию под текстом, следует добавить к элементу стилевое свойство border-bottom, его значением выступает одновременно толщина линии, ее стиль и цвет (пример 1).

Пример 1. Линия на всю ширину

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Линия под заголовком</title>
  <style>
   h2 {
    font-size: 200%; /* Размер шрифта */
    border-bottom: 2px solid maroon; /* Параметры линии под текстом */
    font-weight: normal; /* Убираем жирное начертание */
    padding-bottom: 5px; /* Расстояние от текста до линии */
   }
  </style>
 </head>
 <body>
  <h2>Пример текста</h2>
  <p>Черный заголовок привлекает к себе внимание, 
   несмотря на то, что он черный, а не белый.</p>
 </body>
</html>

Расстояние от линии до текста можно регулировать свойством padding-bottom, добавляя его к селектору h2. Результат данного примера показан на рис. 1.

Рис. 1. Линия под заголовком

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

Чтобы подчеркнуть только текст, необходимо воспользоваться свойством text-decoration со значением underline, опять же, добавляя его к селектору h2 (пример 2).

Пример 2. Линия на ширину текста

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Подчеркивание заголовка</title>
  <style>
   h2 {
   text-decoration: underline; /* Подчеркивание заголовка */
   }
  </style>
 </head>
 <body>
  <h2>Пример текста</h2>
  <p>Черный заголовок привлекает к себе внимание, 
   несмотря на то, что он черный, а не белый.</p>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Подчеркивание заголовка

В случае использования свойства text-decoration линия жестко привязана к тексту, поэтому определить ее положение и стиль не удастся.

Подчеркнутый текст силами HTML и CSS

Серёжа СыроежкинКопирайтер

Подчеркнутый текст в HTML выделяется с помощью тега u HTML (от слова underline). Применяется он следующим образом (нужная часть текста помещается между тегами <u></u>):

Конструктор сайтов <u>"Нубекс"</u>

Но данный код считается невалидным, поэтому значительно эффективнее и правильнее использовать CSS-стили для декорации текста.

Подчеркнуть текст — CSS

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

<!DOCTYPE html>
<html>
 <head>
    <title>Подчеркнутый текст с помощью CSS - "Нубекс"</title>
	<meta charset="utf-8">
	<style>
	   .underline {
	   text-decoration: underline;
	   }
	</style>
 </head>
  <body>
	 <p>Конструктор сайтов <span>Нубекс"</span></p>
  </body>
</html>

Подчеркнуть текст с помощью CSS можно не только сплошной линией. Посмотрим, какими вариантами можно подчеркнуть текст:

  • Подчеркнуть текст пунктиром CSS: 
    <!DOCTYPE html>
<html>
 <head>
    <title>Подчеркнутый пунктиром текст - "Нубекс"</title>
	<meta charset="utf-8">
	<style>
	   .dashed {
	   border-bottom: 1px dashed blue;
	   }
	</style>
 </head>
  <body>
	 <p>Конструктор сайтов <span>Нубекс"</span></p>
  </body>
</html>

  • Подчеркивание точками: 
    <!DOCTYPE html>
<html>
 <head>
    <title>Подчеркнутый точками текст - "Нубекс"</title>
	<meta charset="utf-8">
	<style>
	   .dotted {
	   border-bottom: 2px dotted blue;
	   }
	</style>
 </head>
  <body>
	 <p>Конструктор сайтов <span>Нубекс"</span></p>
  </body>
</html>

  • Двойная черта: 
    <!DOCTYPE html>
<html>
 <head>
    <title>Подчеркнутый двумя линиями текст - "Нубекс"</title>
	<meta charset="utf-8">
	<style>
	   .double {
	   border-bottom: double blue;
	   }
	</style>
 </head>
  <body>
	 <p>Конструктор сайтов <span>Нубекс"</span></p>
  </body>
</html>

Как видно из приведенных примеров, управлять стилем подчеркивания можно при помощи свойства border-bottom (нижняя граница). С помощью этого параметра можно задать тип подчеркивания, цвет, толщину.

Смотрите также:

Как сделать подчёркивание заголовка? | WebReference

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

Использование text-decoration

Свойство text-decoration со значением underline добавляет подчёркивание к тексту; такого рода подчёркивание можно наблюдать для ссылок по умолчанию. Созданная таким образом линия равна ширине текста и будет такого же цвета, что и сам заголовок. Изменить цвет линии можно через свойство text-decoration-color. В примере 1 показано применение text-decoration к элементу <h3>.

Пример 1. Использование text-decoration

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Подчёркивание</title>
<style>
h3 {
text-decoration: underline; /* Добавляем подчёркивание */
text-decoration-color: red; /* Цвет линии */
}
</style>
</head>
<body>
<section>
<h3>Культурный речевой акт в XXI веке</h3>
<p>Действительно, мифопорождающее текстовое устройство
иллюстрирует дискурс, и это придает ему свое звучание,
свой характер.</p>
</section>
</body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид линии, созданной через text-decoration

Браузеры IE и Edge не поддерживают свойство text-decoration-color.

Использование border-bottom

Свойство border-bottom добавляет к элементу снизу линию заданной толщины, цвета и стиля. Такая линия занимает всю доступную ширину, несмотря на длину текста заголовка (рис. 2).

Рис. 2. Вид линии, созданной с помощью border-bottom

Расстояние от линии до текста можно регулировать с помощью свойства padding-bottom, как показано в примере 2.

Пример 2. Использование border-bottom

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Подчёркивание</title>
<style>
h3 {
border-bottom: 2px solid red; /* Добавляем подчёркивание */
padding-bottom: 5px; /* Расстояние от текста до линии */
}
</style>
</head>
<body>
<section>
<h3>Культурный речевой акт в XXI веке</h3>
<p>Действительно, мифопорождающее текстовое устройство
иллюстрирует дискурс, и это придает ему свое звучание,
свой характер.</p>
</section>
</body>
</html>

Чтобы линия была на ширину текста, достаточно заголовок превратить в строчно-блочный элемент, добавив к селектору h3 свойство display со значением inline-block.

Использование ::after и content

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

Рис. 3. Линия, созданная через ::after

Положение такой линии относительно текста задается через свойство bottom с отрицательным значением, цвет линии через свойство background. На деле это получается не линия, а прямоугольный блок, поэтому используем фоновую заливку (пример 3).

Пример 3. Использование ::after

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Подчёркивание</title>
<style>
h3 {
position: relative; /* Относительное позиционирование */
display: inline-block; /* Линия на ширину текста */
}
h3::after {
content: ‘; /* Выводим пустое содержимое */
position: absolute; /* Абсолютное позиционирование */
background: red; /* Цвет линии */
left: 0; /* Положение линии слева */
bottom: -5px; /* Положение линии */
width: 100%; /* Линия на ширину текста */
height: 2px; /* Высота линии */
}
</style>
</head>
<body>
<section>
<h3>Культурный речевой акт в XXI веке</h3>
<p>Действительно, мифопорождающее текстовое устройство
иллюстрирует дискурс, и это придает ему свое звучание,
свой характер.</p>
</section>
</body>
</html>

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

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

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

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

Подчеркивание в html: способы.

С помощью html тексту можно придать красивое оформление. Очень популярен элемент подчеркивания, но не все постоянные пользователи знают как его применять.

Подчеркивание в HTML

Итак, как же сделать подчеркивание? Подчеркивание текста в html оформляется при помощи тега <u>. Он используется во всех спецификациях html и xhtml, но только при условии переходного <DOCTYPE!>, так как должна быть указана версия разметки для браузера. В этом случае документ успешно проходит валидацию. Указывать элемент надо стандартно, то есть в самом верху страницы.

Тег <u> закрывающийся, он обязательно должен сопровождаться </u>. В разметку его нужно добавлять таким образом:

  1. <h2>Заголовок номер один</h2>
  2. <p>Наш <u>текст</u> в абзаце</p>

Слово «текст» при этом будет подчеркнутым.

Подчеркнуть можно и отдельную букву в слове:

  1. <h3>Заголовок номер два</h3>
  2. <p>Наш те<u>к</u>ст в абзаце</p>

Рекомендации

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

Кроме того, прописывание стилей в css делает код более компактным, а это значит, что загрузка страницы будет быстрее.

Чаще всего верстальщики применяют стили, добавляя границы или подчеркивание в html или же вынося их в отдельный css-файл.

Подчеркивание в CSS

Декорирование текста при помощи css — удобный и практичный способ. Самые простые способы такого выделения: использование text-decoration или border-bottom.

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

  • нужный-класс {
  • text-decoration: underline;
  • }

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

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

  • нужный-класс {
  • text-decoration: none;
  • }

Затем текст украшается при помощи следующего свойства:

  • .нужный-класс {
  • text-decoration: none;
  • border-bottom: 2px dashed black;
  • }

Так выходит декорирование с пунктирной линией. Чтобы сделать ее сплошной, вместо «dashed» применяется «solid». Тем, кому нравится украшать текст подчеркиванием точками, можно попробовать применить «dotted».

Стили рамок прописываются в одну строку. Кроме типа подчеркивания, нужно еще указать толщину подчеркивания и цвет. Чтобы определиться с размером, можно поэкспериментировать, но обычно достаточно 1 или 2 пикселей. Цвет текста тоже можно сделать в цвет подчеркивания:

  • нужный-класс {
  • text-decoration: none;
  • border-bottom: 1px dotted blue;
  • color: blue;
  • }

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

  • <h4>Третий заголовок</h4>
  • <p>Наш текст в абзаце</p>

Вот и все, это основы подчеркивания в html.

Как сделать подчеркивание в word на пустом месте?

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

Подчеркивание Word: основные типы

Прежде всего, средств, которые могут создавать подчеркивание или даже перечеркивание текста, в редакторе Word имеется достаточно много. В данном случае нас интересует нижнее подчеркивание в «Ворде», поскольку оно используется чаще всего.

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

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

Для начала используем самый простой пример применения стандартного инструмента Word. На панели инструментов, расположенной сверху, имеется специальная кнопка с изображением буквы «Ч» с черточкой внизу. Достаточно выделить нужный фрагмент текста и нажать на нее. Можно поступить иначе и использовать кнопку еще до начала ввода текста. Эффект получится тот же самый. Тем, кто предпочитает использовать не кнопки, а «горячие» клавиши, для быстрого доступа к этой функции, подойдет сочетание Ctrl + U.

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

Как сделать подчеркивание в «Ворде» без слов

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

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

Более простым методом является использование клавиши табуляции вместе с клавишей Shift при включенной кнопке подчеркивания. Этим достигается и установка одинаковой или пропорциональной длины линий и выравнивание при вводе текста. И тут появляется главная проблема. Только для печати документа такие методы применимы, но когда требуется ввод текста над подчеркнутым пространством в самом редакторе, их использование оказывается нецелесообразным (что-то напечатать будет просто невозможно). Придется применять другие методы.

Работа с таблицами и использование автоматического преобразования

И тут в решении проблемы, как сделать подчеркивание в «Ворде» без слов, на помощь приходит конструктор таблиц. Решение само по себе и простое, и универсальное.

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

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

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

Как сделать подчеркивание в Word-е на пустом месте, а не под словами?

  1. ____________________________________
    Вот так? Шифт и тире нажимайте
  2. бред, причем тут тире — человек про нижнее подчеркивание спрашивает — табом нужно его делать!!! используйте включенный значек непечатуемых знаков — тогда будет видно что и как.
  3. на кнопке «-» есть «_» им и линии
  4. пробелом или табом доберись до этого места сначала, потом подчеркивай (переход на новую строку — ENTER)
    SHIFT+»-» кнопка после нуля с шифтом
  5. Век печатных машинок и их дорогих машинисток, мне кажется кончился, причем уже давным давно. И последовательное тыканье на одну и ту же кнопку это как то не для совеременного пользователя. По человечески это делается так:
    1. Нажимаем TAB, появляется стрелочка, которая отодвигает курсор на какую-то длину. Это знак табуляции.
    2. С табуляцией можно делать все что угодно. Будь это многоточие в оглавлении (Например Введение…. стр 3) или ПОДЧЕРКИВАНИЕ ПУСТОГО МЕСТА (_______) или заполнение знаками тире (———) или перемещение курсора по строке, без долбления по клавише «пробел». Нажимаем на линейку вверху, под меню команд. На ней еще такие циферки редкие через палочки нарисованы, а та область в которой размещается текст показана белым цветом, остальная черным — по бокам.
    3. После этого курсор на листке отодвигается на ту позицию которую мы указали на линейке, на ней появляется маленький значек. Черненьккий уголок. Он показывает на сколько длнинная у нас табуляция. Если на него нажать два раза то появится меню в котором можно установить разные параметры этого пустого места. На которое она отдалила курсор. Будь то выравнивание, заполнители, и позиции (позициями как раз и называетяс этот маленький черный уголок. Таких можно наставить целую кучу для одной табуляции. А еще можно их менять. Делается это слева в углу между вертикальной и горизонтальной линейками).
  6. нажать шифт+минус, вроде бы
  7. 1. нажимаем «Ч» перед местом откуда нужно подчеркнуть пустую строку.
    2. нажимаем TAB и, как описано выше, играем курсором табуляции, определяя где закончить подчеркивание.
  8. Просто нажмите SHIFT и знак тире «-«
    _________ 🙂

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

К счастью, в редакторе Word есть немало способов, как это можно реализовать. В данной статье мы рассмотрим 4 таких способа. Материал будет актуален для всех современных версий Microsoft Word, включая Word 2007, 2010, 2013 и 2016.

Подчеркивание пробелов и табуляции

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

Если такой способ вам подходит, то установите курсор там, где должно находится подчеркивание и вставьте несколько пробелов с помощью клавиш ПРОБЕЛ или TAB на клавиатуре.

После этого выделите пробелы мышкой и нажмите на кнопку с буквой «Ч» на панели инструментов Word. Также подчеркивание текста можно включить с помощью комбинации клавиш SHIFT-U.

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

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

Если этих стилей недостаточно, то можно выбрать «Другие подчеркивания».

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

Символ подчеркивания

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

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

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

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

После этого установите курсор внутрь таблицы и перейдите на вкладку «Конструктор». Здесь нужно нажать на стрелку, которая находится рядом с кнопкой «Границы», и в появившемся меню выбрать «Нет границы».

После этого еще раз нажимаем на стрелку рядом с кнопкой «Границы» и теперь выбираем пункт меню «Нижняя граница».

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

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

Последний способ сделать подчеркивания без текста – это вставка фигуры, которая называется «Линия». Для того чтобы воспользоваться этим способом нужно перейти на вкладку «Вставка», нажать на кнопку «Фигуры» и выбрать фигуру «Линия».

После этого ваш курсор превратится в крест, это означает что вы можете нарисовать фигуру. Для того чтобы линия получилась прямой зажмите клавишу SHIFT на клавиатуре и не отпуская ее нарисуйте горизонтальную линию.

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

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

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

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

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

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

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

a {
	position: relative;
	color: #00a650; 
	cursor: pointer;
	line-height: 1; 
	text-decoration: none; 

}
a:after {
	display: block;
	position: absolute;
	left: 0; 
	width: 0;
	height: 2px; 
	background-color: #00a650; 
	content: "";
	transition: width 0.3s ease-out; 
}

a:hover:after,
a:focus:after {
	width: 100%; 
}

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

достаточно изменить left:0 на right:0;

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

Делаем это из административной панели:

  1. Открываем настройки
  2. Выбираем шаблон
  3. Открываем Style.css
  4. В самый конец кода добавляем 
.bottom-bar .main-menu .mg-menu li .submenu li a {
	position: relative;
	color: #00a650; 
	cursor: pointer;
	line-height: 1; 
	text-decoration: none; 

}
.bottom-bar .main-menu .mg-menu li .submenu li a:after {
	display: block;
	position: absolute;
	left: 0; 
	width: 0;
	height: 2px; 
	background-color: #00a650; 
	content: "";
	transition: width 0.3s ease-out; 
}

.bottom-bar .main-menu .mg-menu li .submenu li a:focus:after,
.bottom-bar .main-menu .mg-menu li .submenu li a:hover:after{
	width: 100%; 
}

Вот вы и узнали как добится плавного подчеркивания ссылки при наведении на ссылку. Если у вас появятся какие-либо вопросы — пишите в комментариях.

Создайте свои интернет-магазин в два клика!

Стилизация ссылок — Изучение веб-разработки

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

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

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

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

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

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

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

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

<p><a href="https://mozilla.org">A link to the Mozilla homepage</a></p>

p {
  font-size: 2rem;
  text-align: center;
}

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

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

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

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

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

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

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

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

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

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

a {

}


a:link {

}

a:visited {

}

a:focus {

}

a:hover {

}

a:active {

}

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

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

body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: #265301;
}

a:visited {
  color: #437A16;
}

a:focus {
  border-bottom: 1px solid;
  background: #BAE498;
}

a:hover {
  border-bottom: 1px solid;
  background: #CDFEAA;
}

a:active {
  background: #265301;
  color: #CDFEAA;
}

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

<p>There are several browsers available, such as <a href="https://www.mozilla.org/en-US/firefox/">Mozilla
Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and
<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>.</p>

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

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

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

Активное изучение: Стилизуйте ссылки самостоятельно

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

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

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

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

<p>For more information on the weather, visit our <a href="weather.html">weather page</a>,
look at <a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipedia</a>, or check
out <a href="http://www.extremescience.com/weather.htm">weather on Extreme Science</a>.</p>

Далее, CSS:

body {
  width: 300px;
  margin: 0 auto;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:focus, a:hover {
  border-bottom: 1px solid;
}

a:active {
  color: red;
}

a[href*="http"] {
  background: url('external-link-52.png') no-repeat 100% 0;
  background-size: 16px 16px;
  padding-right: 19px;
}

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

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

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

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

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

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

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

Для начала HTML:

<ul>
  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
</ul>

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

body,html {
  margin: 0;
  font-family: sans-serif;
}

ul {
  padding: 0;
  width: 100%;
}

li {
  display: inline;
}

a {
  outline: none;
  text-decoration: none;
  display: inline-block;
  width: 19.5%;
  margin-right: 0.625%;
  text-align: center;
  line-height: 3;
  color: black;
}

li:last-child a {
  margin-right: 0;
}

a:link, a:visited, a:focus {
  background: yellow;
}

a:hover {
  background: orange;
}

a:active {
  background: red;
  color: white;
}

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

Давайте объясним, что тут происходит, фокусируясь на самых интересных частях:

  • Наше второе правило удаляет заданный по умолчанию padding у элемента <ul> и устанавливает его ширину так, чтобы охватить 100% внешнего контейнера (в этом случае <body>).
  • Элементы <li> по умолчанию в норме являются блочными (см. типы блоков CSS чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаём горизонтальный список ссылок, поэтому в третьем правиле задаём свойству display значение inline, что приводит к тому, что элементы списка располагаются в одной строке друг с другом — теперь они ведут себя как строчные элементы.
  • четвёртое правило — которое стилизует элемент <a> — самое сложное; давайте пройдёмся по нему шаг за шагом:
    • как в предыдущем примере, мы начинаем отключать настройки по умолчанию для text-decoration (en-US) и outline (en-US) — мы не хотим, чтоб они портили нам вид.
    • Далее мы устанавливаем display на inline-block — элементы <a> являются строчными по умолчанию и, поскольку мы не хотим чтобы они вываливались на свои собственные строки как если бы это получалось со значением block, мы хотим иметь возможность менять их размер. inline-block позволяет нам делать это.
    • Теперь только изменение размера! Мы хотим заполнить всю ширину элемента <ul>, оставить немного margin между каждой кнопкой (не без зазора с правого края) и мы имеем 5 кнопок, которые надо разместить и которые должны иметь одинаковый размер. Для того чтобы это сделать мы задаём width на 19.5%, а margin-right на 0.625%. Вы заметите что вся эта эта ширина составляет 100.625%, что может сделать так что последняя кнопка перекроет <ul> и выпадет вниз на следующую строку. Тем не менее, мы возвращаемся к 100%, используя следующее правило, которое выбирает только последний <a> в списке и удаляет его margin. Сделано!
    • Последние три объявления довольно просты и в основном просто для косметических целей. Мы центрируем текст внутри каждой ссылки, задаём line-height на 3 чтобы кнопки имели некую высоту (что также имеет преимущество в центрировании текста по вертикали) и задаём для текста чёрный цвет.

Обратите внимание: вы могли заметить что элементы списка в HTML все находятся на одной строке друг с другом — так сделано потому, что это сделано потому, что пробелы/разрывы строк между элементами встроенного блока создают пробелы на странице, точно также как пробелы между словами и такие пробелы могли бы нарушить расположение нашего горизонтального меню навигации. Вы можете найти больше информации об этой проблеме (и решения) на Fighting the space between inline block elements.

Мы надеемся эта статья снабдила вас всем что вам надо знать о ссылках — на данный момент! Последняя статья в нашем модуле стилизации текста детализирует как использовать пользовательские шрифты на вашем веб-сайте или как они больше известны веб-шрифты.

: элемент неартикулированной аннотации (подчеркивание) — HTML: язык разметки гипертекста

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

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

См. Раздел «Примечания по использованию» для получения дополнительной информации о том, когда целесообразно использовать , а когда нет.

Наряду с другими элементами чистого стиля, исходный элемент подчеркивания HTML ( ) объявлен устаревшим в HTML 4; однако был восстановлен в HTML 5 с новым семантическим значением: пометить текст как имеющий некоторую форму нетекстовой аннотации.

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

Сценарии использования

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

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

Другие элементы, которые следует учитывать при использовании

В большинстве случаев следует использовать элемент, отличный от , например:

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

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

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

Указывает на орфографическую ошибку

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

HTML 
  
 Этот абзац включает  предупреждение 
написанное слово.

В HTML мы видим использование с классом с написанием , который используется для обозначения неправильного написания слова «неправильно».

CSS 
  u.spelling {
  оформление текста: красное волнистое подчеркивание;
}

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

Результат

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

Избегайте

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

Несемантическое подчеркивание

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

HTML 
   Сегодняшнее специальное предложение 


Куриный суп с лапшой и морковью
CSS 
  .underline {
  текст-оформление: подчеркивание;
}
Результат
Представляем название книги

Названия книг должны быть представлены с использованием элемента вместо или даже .

HTML 
  
 Класс прочитал  Моби Дик  в первом семестре.
Результат со стилем по умолчанию

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

  cite {
  стиль шрифта: нормальный;
  текст-оформление: подчеркивание;
}
Результат с нестандартным стилем

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

HTML-тег — GeeksforGeeks

< html >

< head >

u Тег title >

< style >

body {

text-align: center;

}

.gfg {

font-size: 40px;

font-weight: жирный;

цвет: зеленый;

}

.geeks {

font-size: 25px;

font-weight: жирный;

}

p {

font-size: 20px;

}

диапазон {

текст-оформление: подчеркнутый;

}

стиль >

головка > 000 000

< div class = "gfg" > GeeksforGeeks div >

< <000 < geeks " > < u > Tag div >

< p > GeeksforGeeks: A < пролет >

портал для гиков p >

body >

html >

и

Пример

Полужирный текст

Чтобы выделить полужирный текст, используйте теги или :

   Здесь полужирный текст

или

   здесь полужирный текст

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

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

Курсив

Чтобы выделить текст курсивом, используйте теги или :

   Текст, выделенный курсивом

или

   Текст, выделенный курсивом

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

Например, если вы хотите выделить действие внутри предложения, это можно сделать, выделив его курсивом с помощью : «Не могли бы вы уже отправить редактирование?»

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

Подчеркнутый текст

В то время как сам элемент был объявлен устаревшим в HTMl 4, он был повторно введен с альтернативным семантическим значением в HTML 5 - для представления неартикулированной, нетекстовой аннотации. Вы можете использовать такую ​​визуализацию для обозначения текста с ошибками на странице или для обозначения собственного имени на китайском языке.

  
 Этот абзац содержит некоторый  неверный  текст.

подчеркиваний стиля в Интернете

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

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

Тонкая черная линия подчеркивания с пространством вокруг нижних элементов - через Marcin Wichary, ссылка Crafting подчеркивается на Medium

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

Голы

Что плохого в использовании text-decoration: underline ? Если мы говорим об идеальном сценарии, подчеркивание должно уметь делать следующее:

  • Позиционируется ниже базовой линии
  • Пропускные устройства
  • Изменить цвет, толщину и стиль
  • Повторить обернутый текст
  • Работа на любом фоне

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

Подходит

Итак, какими разными способами мы можем подчеркнуть текст в Интернете?

Вот те, о которых я могу вспомнить:

  • текст-оформление
  • край нижний
  • тень коробки
  • фоновое изображение
  • SVG фильтры
  • Underline.js (холст)
  • текст-украшение- *

Давайте пройдемся по списку один за другим и поговорим о хороших и плохих сторонах каждого подхода.

оформление текста

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

См. Демонстрацию.

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

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

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

Так выглядит border-bottom на встроенных элементах :

См. Демонстрацию.

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

См. Демонстрацию.

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

См. Демонстрацию.

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

Хорошо
  • Можно пропустить нижние элементы с использованием text-shadow
  • Можно изменить цвет, толщину и стиль
  • Может переходить и анимировать цвет и толщину
  • Обертывание по умолчанию, если это не встроенный блок
  • Работает на любом фоне, если не используется text-shadow
Плохо
  • Расположен далеко и трудно переставить
  • Множество несвязанных объектов в самый раз
  • Неровное выделение текста при использовании text-shadow
тень коробки

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

См. Подчеркивание пера 5: тень блока от Джона Д. Джеймсона (@johndjameson) на CodePen.

Вы можете использовать тот же трюк text-shadow для имитации промежутков между подчеркиванием и нижними элементами текста. Но если линия отличается по цвету от текста - или даже достаточно тонкая - она ​​на самом деле не конфликтует, как text-decoration .

Хорошо
  • Может располагаться ниже базовой линии
  • Может пропускать дескрипторы с использованием text-shadow
  • Может менять цвет и толщину
  • Обтекание строк
Плохо
  • Невозможно изменить стиль
  • Не работает ни на одном фоне
фоновое изображение

background-image ближе всего ко всему, что мы хотим, и с наименьшим количеством подводных камней.Идея состоит в том, что вы используете linear-gradient и background-position для создания изображения, которое повторяется горизонтально по строкам текста.

Вам потребуется display: inline; тоже такой подход.

См. Демонстрацию.

В этом подходе не обязательно использовать linear-gradient . Вы можете принести свое собственное фоновое изображение для некоторых интересных эффектов.

См. Демонстрацию.

Хорошо
  • Может располагаться ниже базовой линии
  • Может пропускать дескрипторы с использованием text-shadow
  • Может изменять цвет, толщину (позволяет половину пикселей) и стиль
  • Работает с пользовательскими изображениями
  • Обертывание по строкам
  • Работает на любом фоне, если не используется text-shadow
Плохо
  • Изображение может изменяться по-разному в зависимости от разрешения, браузера и уровня масштабирования
SVG фильтры

Вот подход, с которым я экспериментировал: фильтры SVG.Вы можете создать встроенный элемент SVG filter , который рисует линию, а затем расширяет текст, чтобы замаскировать части линии, которые мы хотим сделать прозрачными. Затем вы можете присвоить фильтру filter идентификатор id и ссылаться на него в CSS с помощью чего-то вроде filter: url (‘# svg-underline’) .

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

См. Демонстрацию.

Вот как это выглядит в Chrome и Firefox:

Поддержка браузера

в IE, Edge и Safari проблематична. Трудно проверить поддержку фильтра SVG в CSS. Вы можете использовать @supports с фильтром , но это проверяет только, работает ли ссылка , а не сам примененный фильтр. Мой подход заканчивается довольно грубым обнюхиванием браузера, так что удвойте и это.

Плюсы
  • Расположен ниже базовой линии
  • Пропускные устройства
  • Возможность изменения цвета, толщины и стиля
  • Работает на любом фоне
Минусы
  • Не переносит строки
  • Не работает в IE, Edge или Safari, но вы можете вернуться к text-decoration .Подчеркивания в Safari в любом случае выглядят хорошо.
Underline.js (холст)

Underline.js завораживает. Я думаю, это очень впечатляет, что Вэньдин Чжан смог сделать с JavaScript и с некоторым вниманием к деталям. Если вы раньше не видели техническую демонстрацию Underline.js, определенно перестаньте читать на минуту и ​​посмотрите ее. Есть захватывающий девятиминутный доклад о том, как это работает, но я дам вам короткую версию: он подчеркивает элементов .Это новый подход, который на удивление хорошо работает.

Несмотря на броское название, Underline.js - это техническая демонстрация только . Это означает, что вы не сможете вставить его в какие-либо проекты, не изменив сначала целую кучу.

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

text-decoration- * свойства

Помните часть «об этом позже»? Ну вот и мы.

text-decoration отлично работает сам по себе, но вы можете добавить несколько экспериментальных свойств, чтобы настроить его внешний вид:

  • цвет текстового оформления
  • текст-украшение-пропустить
  • стиль оформления текста

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

текст-украшение-цвет

text-decoration-color позволяет изменять цвет подчеркивания отдельно от цвета текста.Это свойство даже имеет лучшую, чем ожидалось, поддержку браузера - оно работает в Firefox и имеет префикс в Safari. Вот в чем загвоздка: если вы не очищаете нижние элементы, Safari помещает строку поверх текста . 🙃

Firefox:

Safari:

текст-украшение-пропустить

text-decoration-skip включает пропуск нижних элементов в подчеркнутом тексте.

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

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

стиль оформления текста

text-decoration-style предлагает те же типы линий, которые вы ожидаете от border-style , но добавляет также волнистых линий .

Вот различные значения, которые вы можете использовать:

  • штриховая
  • пунктирная
  • двойной
  • цельный
  • волнистый

Сейчас text-decoration-style работает только в Firefox, поэтому вот скриншот:

Ассортимент однотонных стилей подчеркивания

Знакомо?

Что не хватает?

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

Проведя небольшое исследование, я обнаружил эти два свойства:

  • ширина подчеркивания текста
  • текст-подчеркивание-позиция

Похоже, они были включены в более ранние черновики CSS, но так и не были реализованы из-за отсутствия интереса. Эй, не вини меня.

Еда на вынос

Так как лучше всего подчеркнуть текст?

Это зависит.

Для мелкого текста я рекомендую использовать text-decoration , а затем оптимистично применить text-decoration-skip поверх. В большинстве браузеров это выглядит несколько мягко, но подчеркивание всегда так выглядело, и люди, похоже, не возражают. К тому же всегда есть шанс, что если вы проявите достаточно терпения, все ваши подчеркивания позже будут выглядеть великолепно, и вам не придется ничего менять.

Для основного текста, вероятно, используйте подход background-image .Он работает, выглядит отлично, и для этого есть примеси Sass. Вы, вероятно, можете опустить text-shadow , если подчеркивание тонкое или отличается от цвета текста.

Для отдельных строк текста используйте border-bottom и любые другие свойства, которые вы хотите использовать.

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

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

См. Также сообщение Бенджамина Вудраффа «CSS Underlines Suck», которое по совпадению действует аналогичным образом.

Подчеркнутый текст HTML - Как использовать тег с примером кода

В этой статье мы узнаем о теге и о том, когда его целесообразно использовать в HTML 5.

В более старых версиях HTML этот тег использовался как способ подчеркивания текста. . Мы собираемся узнать о новом определении HTML 5 и способах подчеркивания текста с помощью CSS.

Что такое тег

?

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

Стиль по умолчанию для этого элемента - одинарное подчеркивание.

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

Как использовать тег

для слов с ошибками

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

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

Вы также можете использовать , если вы хотите пометить китайский текст как метку собственного имени. Согласно Википедии,

знак собственного имени (упрощенный китайский: 专 名号, zhuānmínghào; традиционный китайский: 專 名號) - это подчеркивание, используемое для обозначения имен собственных, таких как имена людей, мест, династий, организаций.

  
 Это пример знака собственного имени:  书名 号

Как использовать CSS для изменения стиля тега

Если хотите Чтобы выделить текст с ошибками, вы можете стилизовать тег с красной волнистой линией под ним.

  
 В этом предложении  mannny  орфографические  ошибки . 
  
  body {
  семейство шрифтов: Verdana, без засечек;
}
u.написание {
  оформление текста: красное волнистое подчеркивание;
}

Избегайте использования тега

для стилизации

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

   Этот текст был стилизован с помощью CSS.   
 .underline {
  текст-оформление: подчеркивание;
}

Не используйте тег

для названий книг

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

  
 Мне нравилось читать  Великого Гэтсби  в старшей школе. 
  
  cite {
  стиль шрифта: нормальный;
  текст-оформление: подчеркивание;
}

Заключение

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

Менее распространенным примером может быть использование тега в китайских знаках имени собственного.

Никогда не используйте тег для стилизации. Вместо этого вы должны использовать text-decoration: underline; в вашем CSS.

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

Оформление текста с помощью CSS

Оформление текста с помощью CSS

Web Review
Июнь 1998 г.

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

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

Станция декорирования

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

Первым исследуемым видом декора является подчеркивание .Как и следовало ожидать, при этом текст будет подчеркнут. Если последние три слова в предыдущем предложении подчеркнуты, поздравляю - ваш браузер поддерживает text-decoration ! (Ну, во всяком случае, это большая часть.) Подчеркивание исторически редко использовалось в Интернете, если вы не учитываете подчеркивание ссылок.

До CSS1 единственным способом добиться подчеркивания было использование тега подчеркивания ( ), который время от времени поддерживался основными веб-браузерами и постоянно попадает в спецификацию HTML и выходит за ее пределы.Начиная с HTML 4.0, тег подчеркивания устарел, что означает, что он полностью исключается из спецификации. Почему? Потому что CSS1 позволяет авторам подчеркивать все, что им нравится, без необходимости использования презентационных тегов.

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

 h5 {text-decoration: underline;}
Это еще один h5

И вот оно - подчеркнутые заголовки четвертого уровня!

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

 h5 {text-decoration: overlie;}
Это h5

Хорошо, возможно, это не самый распространенный типографский эффект, но он может быть несколько интересным. Вы можете использовать его аналогично горизонтальным правилам, как своего рода разрыв между разделами.Что еще интереснее, вы можете использовать его в сочетании с подчеркиванием, например:

 h5 {text-decoration: underline overlie;}
Это еще один h5

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

Говоря об этом, мы должны взглянуть на два других значения text-decoration ...

Моргай, и ты можешь нанести удар

Поклонники навигатора радуются: самый известный тег, изобретенный Netscape, вошел в спецификацию CSS1. Правильно, одно из значений text-decoration - blink . Он имеет тот же эффект, что и тег , то есть Internet Explorer не поддерживает это значение text-decoration .Согласно спецификации этого делать не требуется; хотя браузеры должны распознавать значение, им не нужно ничего моргать.

Следовательно, только версии Netscape Navigator с поддержкой CSS1 будут видеть следующий эффект:

 h5 {text-decoration: blink;}
Это может быть моргание h5

Прекрасно, не правда ли?

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

 h5 {text-decoration: line-through;}
Это подбитый h5

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

Использование украшений в дизайне страницы

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

 EM {text-decoration: underline;}

Приведенное выше правило придаст тегу дополнительный акцент .

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

 A {украшение текста: нет;}

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

Заключение

Как мы видели, text-decoration можно использовать, чтобы немного оживить ваш текст. Конечно, есть и другие способы изменить внешний вид текста, и я надеюсь обсудить их в следующих статьях (или трех).Однако в следующий раз я буду рассматривать цвета в стиле CSS1, так что присоединяйтесь ко мне тогда!

10 фрагментов CSS для создания потрясающих эффектов анимированного подчеркивания текста

Подчеркивание CSS по умолчанию отлично работает. Кто мог это ненавидеть?

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

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

Панель инструментов веб-дизайнера

Неограниченное количество скачиваний: более 1 000 000 веб-шаблонов, тем, плагинов, ресурсов дизайна и многое другое!

1. Чередование подчеркивания

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

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

Вы можете сделать все это самостоятельно с помощью небольшого количества CSS, добавив подчеркнутый блок в элемент HTML. Удивительно просто, учитывая, как мало кода вам нужно (около 60 строк CSS).

2. Объединение нескольких строк

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

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

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

3. Подчеркивание

Разработчик

Райан Морс (Ryan Morse) создал этот очень простой эффект скользящего подчеркивания, основанный исключительно на CSS. Это довольно элегантное решение, учитывая, что для него даже не требуется дополнительный элемент HTML.

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

4. Лучшее подчеркивание текста

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

В улучшенном подчеркивании текста Лукаса Хорака вы заметите, что полоса под текстом лучше вписывается в нисходящие элементы. При этом учитываются такие формы букв, как «g» и «p», где строки опускаются ниже обычной высоты строки.

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

5. Анимационные стили

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

Он может похвастаться четырьмя очень специфическими стилями подчеркивания, основанными на некоторых общих переходах CSS:

  • Справа налево
  • Слева направо
  • Анимация вовне
  • Анимация внутрь

Вы заметите, что это работает с обычными переходами CSS3, которые работают как при наведении курсора на ссылку, так и при перемещении курсора за пределы ссылки.

Определенно несколько классных эффектов, и все они довольно легко переносятся в свои собственные проекты.

6. Дополнительные стили анимации

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

Они идут немного более экстремально с помощью стилей подчеркивания, подталкивающих тени CSS3 для эффектов свечения. Вы, вероятно, можете использовать это как шаблон для создания классного дизайна светового меча из «Звездных войн», если у вас есть время (или вы просто любите «Звездные войны»).

7. Просто захожу

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

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

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

8. Расширение анимации

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

Обратите внимание, что функция cubic-bezier () используется для создания уникальной анимации при наведении курсора.

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

9. Пользовательские подчеркивания CSS

Вот еще один стиль, который действительно может работать на любом веб-сайте.Разработчик Тристан Уилсон создал эти простые подчеркивания, которые обрамляют линию на несколько пикселей ниже текста.

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

Если вы хотите, чтобы ваши подчеркивания действительно выделялись среди всего стада, этот набор - отличное место для начала.

10. Установка между спусковыми приспособлениями

Ранее я упоминал о настройке стилей подчеркивания, чтобы они соответствовали убранным шрифтам.Эта ручка Джонатана Нила именно это и делает, и в ней не используются ничего, кроме HTML5 и CSS3.

Весь эффект зависит от пары свойств CSS3: box-shadow и text-shadow , если быть точным.

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

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

11. Пользовательские градиенты

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *