Text decoration underline: text-decoration-style | htmlbook.ru — Независимое театральное объединение "Зрительские симпатии"

Содержание

CSS/Свойство text-decoration

Синтаксис

CSS 1

CSS 2‒2.2

CSS 3

text-decoration: none | [ underline || overline || line-through || blink ] | inherit

Описание

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

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

Примечание

В CSS 3 можно устанавливать дополнительно цвет и тип линии.

JavaScript

[объект].style.textDecoration="[значение]";

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

Chrome

Поддерж.

^[1]

Firefox

Поддерж.^[1]

Opera

Поддерж.^[1]

Maxthon

Поддерж.^[1]

IExplorer

Поддерж.^[1]

Safari

Поддерж.^[1]

iOS

Поддерж.^[1]

Android

Поддерж.^[1]

[1] ‒ поддерживает синтаксис CSS 2-2.2.

Спецификация

CSS	Раздел
1	5.4.3 ‘text-decoration’	Перевод
2	16.3.1 Underlining, overlining, striking, and blinking: the ‘text-decoration’ property
2.1	16.3.1 Underlining, overlining, striking, and blinking: the ‘text-decoration’ property
2.2	16. 3.1 Underlining, overlining, striking, and blinking: the ‘text-decoration’ property
3	2.4. Text Decoration Shorthand: the ‘text-decoration’ property

Значения

none: Указывает на отсутствие элементов декора.
underline: Подчёркивает текст.
text-decoration: underline;
overline: Устанавливает линию над текстом.
text-decoration: overline;
line-through: Перечёркивает текст.
text-decoration: line-through;
blink: Создаёт мигающий текст. (Данное свойство не поддерживается большинством современных браузеров. )
inherit: Указывает, что элемент должен унаследовать параметры родительского элемента.

Начальное значение: «none».

Пример использования

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Свойство text-decoration</title>
</head>
<body>
<h2>Элементы декора</h2>
Подчёркнутый текст.

Надчёркнутый текст.
Перечёркнутый текст.
Мигающий текст.
</body>
</html>

Свойство text-decoration

Увеличение отступа от линии подчеркивания в css

Вопрос задан 10 лет 9 месяцев назад

Изменён 9 месяцев назад

Просмотрен 44k раз

<span>
    <a href="#" >TEXT</a>
</span>
span a  {
    text-decoration: underline;
}

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

С text-decoration: underline; такого не получится сделать. Нужно поставить text-decoration: none; и border-bottom: 1px #цвет_ссылки solid;. Вот хороший совет по теме.

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

прочитав следующий коммент про display:inline-block; помог сделать ширину заголовка, как бы по содержимому, остается только отцентрировать.

Дальше поигравшись и inline-block отставил в сторону, и применил table. Вот что получилось.

display: table;//ширина по тексту в заголовке
border-bottom: 1px solid #8edfce;//само подчеркивание
line-height: 36px;//высота строки, ну и соответственно отступ от подчеркивания

Я сам задался этим вопросом, но нашел такой вариант

.nav_link:hover {
    padding-bottom: 8px;
    border-bottom: 1.2px solid #4d4d4d;
    text-transform: capitalize;
}

Мне нужно было после наведения на ссылку, чтобы появлялось подчеркивание с высотой от строки 8px и шириной в слово.

text-decoration: underline; не давал такой возможности, а нижняя граница вуаля))

Я справился с данной задачей следующим образом:

p {
   border-bottom: 1px solid black;
   height: 20px;
  }

Значение height будет определять на каком расстоянии от текста будет подчеркивание. При необходимости также нужно прописать «text-decoration: none», чтобы не получилось две линии подчеркивания.

для текста, но не блока использую: text-underline-offset

 p {
  font-family: $main-font;
  font-size: 20px;
  font-weight: 600;
  line-height: 22px;
  color: $accent-color;
  text-decoration: underline;
  text-underline-offset: 10px;
}

На мой взгляд лучше использовать display:inline-block

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

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

стиль оформления текста | Могу ли я использовать.

.. Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

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

— CR

Глобальное использование
0% + 96,16% «=» 96,16%

Метод определения типа, стиля и цвета линий в свойстве text-decoration. Их можно определить как сокращение (например, text-decoration: line-through dashed blue ) или как отдельные свойства (например, text-decoration-color: blue )

Chrome

4–25: не поддерживается
26–56: отключено15 по умолчанию9
57 — 110: Частичная поддержка
111: Частичная поддержка
02% — Partial support»> 112 — 114: Частичная поддержка

Edge

12 — 18: Не поддерживается
79 — 110: частичная поддержка
444115
79 — 110: частичная поддержка
44444115

79 — 110: ПАРТИЧЕСКАЯ СОВЕТНА

Safari

3.1 — 7: не поддерживается
7.1: Частичная поддержка
8 — 12: частичная поддержка
12,1 — 16,2: частичная поддержка
62% — Partial support»> 16,3: частичная поддержка

16.4 -TP. Firefox

2 — 5: Not supported
6 — 35: Partial support
36 — 110: Partial support
111: Partial support
112 — 113: Partial support

Opera

9 — 34: не поддерживается
35 — 43: Отключено по умолчанию
44 — 94: Частичная поддержка
95: Частичная поддержка

IE

14% — Not supported»> 5.5 — 10: Не поддерживает

5.5 — 10: Не поддерживает

5.5 — 10: Не поддерживает

5.5 — 10: Не поддерживает

Chrome для Android

111: Частичная поддержка

Safari на iOS

3,2 — 7,1: не поддерживается
8 — 16.2: частичная поддержка
16.3: Partial

Samsung Internet

4 — 6.4: Not supported
7.2 — 19.0: Partial support
20: Partial support

Opera Mini

all: Not supported

Opera Mobile

10 — 12.1: Не поддерживается
73: Частичная поддержка

Браузер UC для Android

13.4: Частичная поддержка

Браузер Android

2.4 — 4. Не поддерживается0015
111: Supported

Firefox for Android

110: Partial support

QQ Browser

12% — Partial support»> 13.1: Partial support

Baidu Browser

13.18: Partial support

KaiOS Browser

2.5: Частичная поддержка
3: Частичная поддержка

Все браузеры поддерживают версию CSS2 text-decoration , которая соответствует только text-decoration-line значений ( подчеркивание и т. д.)

Ресурсы:: Ошибка реализации Firefox; MDN Web Docs — text-decoration-color; MDN Web Docs — text-decoration-line; MDN Web Docs — text-decoration-line; MDN Web Docs — text-decoration-line decor-skip; Веб-документы MDN — text-decoration-style

@downwindcss/text-decoration — npm

ПРИМЕЧАНИЕ : Устарело для Tailwind CSS версии 3. x.
, потому что TW теперь предоставляет эти функции из коробки.

Цвет оформления текста — https://tailwindcss.com/docs/text-decoration-color

Стиль оформления текста — https://tailwindcss.com/docs/text-decoration-style
Толщина оформления текста — https://tailwindcss.com/docs/text-decoration-thickness
Смещение подчеркивания текста — https://tailwindcss.com/docs/text-underline-offset

Плагин Tailwind CSS для утилиты оформления текста.

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

Установка

 npm install @downwindcss/text-decoration
# для пользователей пряжи
пряжа добавить @downwindcss/text-decoration

Конфигурация

Добавьте подключаемый модуль в tailwind. config.js в разделе «Плагины».

 // tailwind.config.js
модуль.экспорт = {
  плагины: [require('@downwindcss/text-decoration')],
};

TL;DR

Пример : https://play.tailwindcss.com/fm4Vucj6IG

Вот все доступные утилиты

Имя утилиты	Определение CSS
украшение текста	Н/Д: необходимо для оформления текста
текст-украшение-подчеркивание	строка оформления текста: подчеркивание
текст-украшение-перечеркнутый	текстовая декоративная строка: надчеркивание
оформление текста через строку	строка оформления текста: сквозная строка
текст-украшение-сплошной	text-decoration-style: сплошной
текст-украшение-двойной	стиль оформления текста: двойной
текст-украшение-точечный	text-decoration-style: точка
текст-украшение-штрих	text-decoration-style: пунктир
текст-украшение-волнистый	text-decoration-style: волнистый
украшение текста-1	толщина оформления текста: 1px;
текст-украшение-2	толщина оформления текста: 2 пикселя;
украшение текста-4	толщина оформления текста: 4 пикселя;
текст-украшение-8	толщина оформления текста: 8px;
текст-украшение-$цвет	`$color` : Все CSS Tailwind и ваши пользовательские цвета

Коммунальные услуги

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

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

Сам по себе он не применяет никакого стиля, подобно тому, как встроенная утилита Transform не применяет никаких преобразований.

  Заголовок

text-decoration-line

Утилиты для нанесения линий.
MDN: декоративная строка

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

АВТОРСКАЯ ИНФОРМАЦИЯ: Скриншоты в строке оформления от Mozilla Contributrors под лицензией CC-BY-SA 2.5

подчеркнуть.

Я бы предпочел быть <диапазон> счастлив, чем прав любой день.

надчеркнуть.

Я бы предпочел быть <диапазон> счастлив, чем прав любой день.

Линия, проходящая через.

Я бы предпочел быть <диапазон> счастлив, чем прав любой день.

ПРИМЕЧАНИЕ : это не украшение-линия-линия-сквозь , несмотря на то, что примененный CSS равен украшение-линия: сквозная линия;

подчеркивание + надчеркивание + зачеркивание

Я бы предпочел быть <промежуток > счастлив, чем прав любой день.

text-decoration-color

Доступны все цвета CSS Tailwind И ваши расширенные цвета.

Вы можете расширить цвета декора, расширив textDecorationPlugin.colors .

Расширить цвета в tailwind.config.js

 const colors = require('tailwindcss/colors')
модуль.экспорт = {
  тема: {
    продлевать: {
      textDecorationPlugin: {
        цвета: {
          первичный: «помидор»,
          вторичный: «золото»,
        },
      }, },
  },
  варианты: {},
  плагины: [textDecorationPlugin],
}

И используйте их в HTML-разметке.

 
    Заголовок

Если вы расширите цветов , для плагина будут доступны расширенные цвета.

 const colors = require('tailwindcss/colors')
модуль.экспорт = {
  тема: {
    продлевать: {
      цвета: {
        'голубой': colors.lightBlue,
      },
      textDecorationPlugin: {
        цвета: {
          первичный: «помидор»,
        },
      },
    },
  },
  варианты: {},
  плагины: [textDecorationPlugin],
}

И используйте их в HTML-разметке.

 
    Заголовок

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

Вы можете использовать следующие стили оформления текста.

СС	Прикладной стиль
текст-украшение-сплошной	text-decoration-style: сплошной
текст-украшение-двойной	стиль оформления текста: двойной
текст-украшение-точечный	text-decoration-style: точка
текст-украшение-штрих	text-decoration-style: пунктир
текст-украшение-волнистый	text-decoration-style: волнистый

text-decoration-thickness

Когда вы наберете decoration-{thickness: number} , будет применена text-decoration-thickness.

Например, украшение-2 будет применяться 2px толщина

 
    Заголовок

Доступные значения:

CSS	Прикладной стиль
украшение текста-1	толщина оформления текста: 1 пиксель;
текст-украшение-2	толщина оформления текста: 2 пикселя;
украшение текста-4	толщина оформления текста: 4 пикселя;
текст-украшение-8	толщина оформления текста: 8px;

Вы можете увеличить толщину, обновив конфигурацию, textDecorationPlugin. thicknesses свойство.

 модуль.экспорт = {
  тема: {
    продлевать: {
      textDecorationPlugin: {
        толщины: {
          «0,2 бэр»: «0,2 бэр»,
        },
      },
    },
  },
  варианты: {},
  плагины: [textDecorationPlugin],
}

И использовать как украшение-0.2rem .

Очистка Deocration

Использовать украшение-нет .

Duplicate Utilities

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

подчеркивание: оформление текста: подчеркивание;
линейный: text-decoration: линейный;
без подчеркивания: оформление текста: нет;

Ресурс

Источник: downwindcss/text-decoration
NPM: https://www.npmjs.com/package/@downwindcss/text-decoration

Контекст

На основе сообщения об идее в обсуждении Tailwind CSS, https://github.

CSS/Свойство text-decoration

Синтаксис

Описание

Примечание

JavaScript

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

Спецификация

Значения

Пример использования

Увеличение отступа от линии подчеркивания в css

Зарегистрируйтесь или войдите

Отправить без регистрации

Отправить без регистрации

стиль оформления текста | Могу ли я использовать.

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

Глобальное использование

Chrome

Edge

Safari

Opera

IE

Chrome для Android

Safari на iOS

Samsung Internet

Opera Mini

Opera Mobile

Браузер UC для Android

Браузер Android

Firefox for Android

QQ Browser

Baidu Browser

KaiOS Browser

@downwindcss/text-decoration — npm

Установка

Конфигурация

TL;DR

Коммунальные услуги

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

Заголовок

text-decoration-line

подчеркнуть.

надчеркнуть.

Линия, проходящая через.

подчеркивание + надчеркивание + зачеркивание

text-decoration-color

Заголовок

Заголовок

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

text-decoration-thickness

Заголовок

Очистка Deocration

Duplicate Utilities

Ресурс

Контекст

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