Underline style css: text-decoration-color — CSS: Cascading Style Sheets

Как установить промежуток между текстом и подчеркиванием с помощью CSS?

Улучшить статью

Сохранить статью

• Последнее обновление: 11 июн, 2021

Улучшить статью

Сохранить статью

Введение: CSS используется, чтобы сделать веб-сайт визуально более привлекательным и читабельным. Его можно использовать для форматирования текста на веб-сайте различными способами, такими как цвет, размер шрифта, семейство шрифтов и т. д. В этой статье мы увидим, как в случае подчеркнутого текста увеличить разрыв между текстом и подчеркнуть.
Подход: Трюк, который мы собираемся использовать для достижения этого, используя свойства border-bottom-style и padding-bottom . Вместо использования встроенного текстового оформления : подчеркивание; мы собираемся создать собственное подчеркивание, используя свойство border-bottom-style, а затем мы можем добавить padding-bottom, чтобы отодвинуть его на столько, сколько захотим.

 .class_name {
    padding-bottom: значение;
    нижняя граница: сплошная;
} 

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

html

Output:  
 

Next

Как увеличить изображение при наведении мыши с помощью CSS?

Статьи по теме

Что нового

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

Основные украшения текста CSS: Объяснение подчеркивания CSS

Содержание

• 1. Использование оформления текста в CSS
• 2. Изменение линии оформления текста CSS
• 3. Цвет линии оформления
• 4. Стиль0 CSS0 украшения
• 5. Определение толщины линии
• 6. Поддержка браузера

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

CSS text-decoration свойство задает визуальные

Пример

 h2 {
text-decoration: подчеркивание, надчеркивание, пунктирная красная точка;
}
h3 {
text-decoration: подчеркивание, надчеркивание, волнистый синий;
}
 

Попробуйте вживую. Узнайте на Udacity

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

• text-decoration-color
• строка оформления текста
• стиль оформления текста
• толщина оформления текста

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

text-decoration: толщина линии цвета;

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

Пример

 h2 {
    оформление текста: надчеркивание;
}

h3 {
    оформление текста: сквозное;
}

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

h5 {
    оформление текста: подчеркивание над чертой;
} 

Попробуйте Live Learn на Udacity

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

Изменение линии оформления текста CSS

Использование свойства CSS text-decoration-line позволяет указать тип строки, которую будет использовать оформление текста:

Пример

 p {
    строка оформления текста: надчеркивание;
}
p.lines-везде {
    text-decoration-line: надчеркивание, подчеркивание, перечеркивание;
} 

Попробуйте вживую. Узнайте на Udacity

Синтаксис этого свойства прост:

text-decoration-line: value;

Вы также можете комбинировать различные возможные значения в одном выражении.

Значение	Описание
нет	Значение по умолчанию. Строка оформления текста не отображается
подчеркивание	Заставляет CSS подчеркивать текст
сверху	Делает CSS над текстом
проходной	Заставляет CSS рисовать линию по тексту
мигает	Устаревшее значение. Текст мигает в CSS

Окрашивание декоративной линии

CSS text-decoration-color позволяет установить цвет для подчеркивания, надчеркивания и сквозной линии CSS:

Пример

 р {
    оформление текста: надчеркивание;
    цвет оформления текста: зеленый;
} 

Попробуйте вживую Узнайте на Udacity

Синтаксис этого свойства почти такой же, как рассмотренные выше:

Вы можете определить цвет, используя имя, значение RGB, RGBA, HEX, HSL или HSLA.

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

PROS

• Упрощенный дизайн (нет ненужной информации)
• Высококачественные курсы (даже бесплатные)
• Разнообразие функций
9009

Основные функции

• Nanodegree программы
.
• Платные сертификаты об окончании

ЭКСКЛЮЗИВ: СКИДКА 75%

Pros

• Удобная навигация
• Никаких технических проблем
• , по-видимому, заботится о своих пользователях

Основные функции

• Огромное разнообразие курсов
• 30-дневная политика возврата
• Бесплатные сертификаты по завершению

As 12,99 долл.

• Отличный пользовательский опыт
• Предлагает качественный контент
• Очень прозрачные цены

Основные характеристики

• Бесплатные сертификаты об окончании
• Сосредоточено на навыках работы с данными
• Гибкий график обучения

75% СКИДКА

Стилизация оформления текста CSS

Стиль CSS text-decoration-style 9003

 а {
    оформление текста: надчеркивание;
    стиль оформления текста: пунктир;
}