Подчеркивание текста в css: Подчеркивание в CSS (красивые эффекты с примерами кода)

Содержание

text-decoration-skip-ink ⚡️ HTML и CSS с примерами кода

Свойство text-decoration-skip-ink определяет способ рисования надстрочных и нижних подчеркиваний при прохождении над верхними и нижними элементами глифов.

Текст
  • hanging-punctuation
  • hyphens
  • letter-spacing
  • line-break
  • overflow-wrap
  • paint-order
  • tab-size
  • text-align
  • text-align-last
  • text-indent
  • text-justify
  • text-size-adjust
  • text-transform
  • white-space
  • word-break
  • word-spacing
  • letter-spacing
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-style
  • text-decoration-thickness
  • text-decoration-skip
  • text-decoration-skip-ink
  • text-emphasis
  • text-emphasis-color
  • text-emphasis-position
  • text-emphasis-style
  • text-indent
  • text-rendering
  • text-shadow
  • text-underline-position
  • text-transform
  • white-space
  • word-spacing

Синтаксис

/* Single keyword */
text-decoration-skip-ink: none;
text-decoration-skip-ink: auto;
text-decoration-skip-ink: all;
/* Global keywords */
text-decoration-skip: inherit;
text-decoration-skip: initial;
text-decoration-skip: unset;

Значения

none
Подчеркивания и надчеркивания рисуются по всей длине текстового содержимого, включая части, которые пересекают нижние и верхние элементы глифов.
auto
Браузер может прерывать подчеркивание и наложение, чтобы они не касались глифа и не приближались к нему. То есть они прерываются там, где в противном случае они пересекали бы глиф.
all
Браузер должен прерывать подчеркивание и подчеркивание, чтобы они не касались глифа и не приближались к нему. Это может быть полезно с некоторыми китайскими, японскими или корейскими (CJK) шрифтами, где автоматическое поведение может не создавать прерываний.

Определение

Начальное значениеauto
Применяется ковсем элементам
Наследуетсяда
Вычисленное значениекак определено
Тип анимациидискретный

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

Примеры

Пример 1

Пример 2

CSSHTMLРезультат

p {
  font-size: 1. 5em;
  text-decoration: underline blue;
  text-decoration-skip-ink: auto; /* this is the default anyway */
}
.no-skip-ink {
  text-decoration-skip-ink: none;
}
.skip-ink-all {
  text-decoration-skip-ink: all;
}
<p>You should go on a quest for a cup of coffee.</p>
<p>Or maybe you'd prefer some tea?</p>
<p>
  この文は、 text-decoration-skip-ink: auto
  の使用例を示しています。
</p>
<p>
  この文は、 text-decoration-skip-ink: all
  の使用例を示しています。
</p>

См. также

  • Элемент a — текст ссылки
  • Элемент uподчеркнутый текст

Ссылки

  • Свойство text-decoration-skip-ink MDN (рус.)
  • CSS Text Decoration Module Level 4 Спецификация (eng.)

Устанавливаем пунктирное подчеркивание ссылок. | Vaden Pro

Вы здесь

Главная → Блог → CSS → Как сделать пунктирное подчеркивание ссылкам?

Дата:15. 01.16 в 10:51

Раздел: 

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

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

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

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

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

HTML

<p><a  href="#">Ссылка 1</a></p>

CSS

.underline {
    text-decoration: none; 
    border-bottom: 1px dashed #444; 
	color:#444;
   }

Что видим в браузере?

Для справки

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

В каких браузерах работает?

4.0+1.0+4.0+ 1.0+1.0+1.0+1.0+

Оценок: 3 (средняя 5 из 5)

Оценка: 

Ключевые слова: 

CSS приемы

Понравилась статья? Расскажите о ней друзьям:

Еще интересное

Подчеркивание текста CSS | Как использовать свойство положения подчеркивания текста

В этой статье мы узнаем о подчеркивании текста в CSS. Каскадная таблица стилей предназначена для презентации. Чем лучше мы используем стиль, тем более совершенной будет презентация. Сказав это, нужно знать, что существует множество деталей, о которых нужно позаботиться при стилизации с помощью CSS. В качестве простого примера возьмем подчеркивание текста. Теперь простое подчеркивание текста можно выполнить с помощью свойства text-decoration. Но чтобы исправить детализацию, мы должны вникнуть в ее тонкости и исправить свойства позиционирования и смещения. Именно об этом мы и поговорим в этой статье. text-underline-position и text-underline-offset — это улучшенные функции для добавления к подчеркиванию, предоставляемому свойством text-decoration: underline.

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

1. Положение подчеркивания текста: Это свойство определяет положение подчеркивания относительно текста.

Синтаксис для этого:

 положение подчеркивания текста: авто| под | слева| правильно| выше 

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

2. Text-underline-offset:  Это не подсвойство свойства text-decoration. Это свойство устанавливает расстояние смещения подчеркивания относительно его исходного положения. Расстояние смещения здесь означает расстояние от определенного пути.

Синтаксис для этого может быть:

 text-underline-offset: длина 

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

Пример реализации в CSS Text Underline

Ниже приведены примеры реализации для одного и того же:

Пример № 1

Демонстрация положения контура текста со значениями выше и ниже и наблюдение за различиями.

  • В этом примере мы проверим text-underline-position с двумя значениями, то есть выше и ниже. Мы можем наблюдать тонкую разницу между двумя значениями свойства в соответствующем выводе.
  • Во-первых, мы создадим файл CSS, так как мы используем внешний CSS.
  • Мы создадим класс, в котором будем использовать сокращенное свойство text-decoration для оформления подчеркивания. Далее мы будем использовать text-underline-position и определим его отдельно. Мы можем добавить другие функции по своему усмотрению. Код класса CSS должен выглядеть так:
  • .

Код:

 .class1{
оформление текста: подчеркивание двойное зелёное;
позиция подчеркивания текста: под;
семейство шрифтов: «Franklin Gothic Medium», «Arial Narrow», Arial, без засечек;
} 
  • Подобно предыдущему, мы определим еще один класс CSS и сохраним позицию подчеркивания текста, как указано выше. Код должен быть похож на приведенный ниже:

Код:

 . class2{
text-decoration: подчеркивание двойное фиолетовое;
text-underline-position: выше;
семейство шрифтов: 'Segoe UI', Tahoma, Geneva, Verdana, без засечек;
} 
  • Окончательный код CSS должен быть примерно таким:

Код:

 .класс1{
text-decoration: подчеркивание двойное зелёное;
text-underline-position: под;
семейство шрифтов: 'Franklin Gothic Medium', 'Arial Narrow', Arial, без засечек;
}
.класс2{
text-decoration: подчеркивание двойное фиолетовое;
text-underline-position: выше;
семейство шрифтов: 'Segoe UI', Tahoma, Geneva, Verdana, без засечек;
} 
  • Далее мы создадим HTML-страницу. Кроме того, обязательно вызовите внешний файл CSS на странице. Поскольку мы определили классы CSS, мы можем использовать их с любым элементом HTML для применения стиля к этому конкретному элементу. В этом примере мы будем использовать его с элементом заголовка, то есть

    . Окончательный HTML-код должен выглядеть примерно так:

Код:

 
<голова>
Свойство оформления текста
 css">

<тело>
Тестирование позиции подчеркивания текста: под
Проверка положения подчеркивания текста: выше

Вывод:

  • Мы можем ясно видеть, что, сделав положение как нижнее или верхнее, мы можем получить два разных стиля подчеркивания текстового содержимого.
Пример #2

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

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

Код:

 .class1{
режим письма: вертикальный-lr;
положение: абсолютное;
padding-right: 100 пикселей;
text-decoration: подчеркивание двойное зелёное;
позиция подчеркивания текста: слева;
семейство шрифтов: 'Franklin Gothic Medium', 'Arial Narrow', Arial, без засечек;
} 
  • Второй класс должен иметь подчеркивание справа от вертикально выровненного текста. Код должен быть похож на следующий:

Код:

 .class2{
режим письма: вертикальный-lr;
отступ слева: 100 пикселей;
text-decoration: подчеркивание волнистым фиолетовым;
text-underline-position: справа;
семейство шрифтов: 'Segoe UI', Tahoma, Geneva, Verdana, без засечек;
} 
  • Окончательный файл CSS должен выглядеть примерно так:

Код:

 .class1{
режим письма: вертикальный-lr;
положение: абсолютное;
padding-right: 100 пикселей;
text-decoration: подчеркивание двойное зелёное;
позиция подчеркивания текста: слева;
семейство шрифтов: 'Franklin Gothic Medium', 'Arial Narrow', Arial, без засечек;
}
.
класс2{ режим письма: вертикальный-lr; отступ слева: 100 пикселей; text-decoration: подчеркивание волнистым фиолетовым; text-underline-position: справа; семейство шрифтов: 'Segoe UI', Tahoma, Geneva, Verdana, без засечек; }
  • Конечная HTML-страница должна вызывать внешний CSS и включать оба класса при стилизации элементов. Код HTML-страницы должен выглядеть следующим образом:
  • .

Код:

 
<голова>
Свойство оформления текста


<тело>
Проверка положения подчеркивания текста: слева
Проверка положения подчеркивания текста: выше

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

Вывод:

Пример #3

Использование позиции подчеркивания текста во встроенном стиле CSS

  • некоторые тексты. Окончательный HTML-код должен выглядеть так:
  • .

Код:

 
<голова>
свойство text-decoration

<тело>
ЭТО ВСТРОЕННЫЙ CSS ДЛЯ ПОДЧЕРКИВАНИЯ ТЕКСТА

 
  • Сохраните файл и откройте его в браузере. Конечный результат должен выглядеть так:

Выход:

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

Рекомендуемые статьи

Это руководство по подчеркиванию текста в CSS. Здесь мы обсуждаем синтаксис и примеры для реализации в CSS Text Underline с правильными кодами и выводами. Вы также можете ознакомиться с другими нашими статьями по теме, чтобы узнать больше –

  1. Встроенный стиль CSS
  2. Свойства шрифта CSS
  3. Генератор треугольников CSS
  4. Прокладка CSS

underline-offset — CSS: каскадные таблицы стилей

Свойство CSS text-underline-offset задает расстояние смещения линии оформления подчеркивания текста (применяется с использованием text-decoration ) от исходного положения.

text-underline-offset не является частью text-decoration сокращенно. В то время как элемент может иметь несколько строк text-decoration , text-underline-offset влияет только на подчеркивание, а не другие возможные варианты оформления строки, такие как overline или line-through .

Синтаксис

 /* Одно ключевое слово */
смещение подчеркивания текста: авто;
/* длина */
смещение подчеркивания текста: 0,1 em;
смещение подчеркивания текста: 3 пикселя;
/* процент */
смещение подчеркивания текста: 20%;
/* Глобальные значения */
смещение текста-подчеркивания: наследовать;
смещение подчеркивания текста: начальное;
смещение подчеркивания текста: не установлено;
 

Свойство text-underline-offset указывается как одно значение из списка ниже.

Значения

авто
Браузер выбирает подходящее смещение для подчеркивания.
<длина>
Указывает смещение подчеркивания как , переопределяя предложение файла шрифта и значение по умолчанию браузера. Рекомендуется использовать единицы em , чтобы смещение масштабировалось вместе с размером шрифта.
<процент>
Указывает смещение подчеркивания как <процент> из 1 em в шрифте элемента. Процент наследуется как относительное значение и, следовательно, масштабируется при изменении шрифта. Для данного применения этого свойства смещение является постоянным для всего поля, к которому применяется подчеркивание, даже если есть дочерние элементы с разными размерами шрифта или выравниванием по вертикали.

Формальное определение

Начальное значение авто
Применяется ко всем элементам. Это также относится к ::first-letter и ::first-line .
Inherited yes
Percentages refer to the font size of the element itself
Computed value as specified
Animation type by computed value type

Формальный синтаксис

 авто | <длина> | <процент> 

Примеры

 

Вот текст со смещенным волнистым красным подчеркиванием!


В этом тексте есть строки как сверху, так и снизу. Смещен только нижний.

 р {
  оформление текста: подчеркивание волнистым красным цветом;
  смещение подчеркивания текста: 1em;
}
.twolines {
  цвет оформления текста: фиолетовый;
  text-decoration-line: подчеркивание над чертой;
} 

Технические характеристики

Спецификация Статус Комментарий
Модуль оформления текста CSS, уровень 4
Определение ‘text-underline-offset’ в этой спецификации.
Рабочий проект Исходное определение.

Совместимость с браузером

Таблица совместимости на этой странице создана на основе структурированных данных. Если вы хотите внести свой вклад в данные, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос на включение.

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari на iOS Samsung Internet
text-underline-offset Chrome Нет поддержки Край Нет поддержки Firefox Полная поддержка 70
Полная поддержка 70
Полная поддержка 69

Отключено

Отключено Начиная с версии 69: эта функция отсутствует в версии layout.
Оставить комментарий

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

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

© 2019 Штирлиц Сеть печатных салонов в Перми

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