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

Leave a Comment / Css / By /

Содержание

Оформление текста — Учебник CSS — Schoolsw3.com

schoolsw3.com

САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

❮ Назад Далее ❯

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

В этой главе вы узнаете о следующих свойствах:

  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-decoration-thickness
  • text-decoration

Добавить декоративную строку к тексту

Свойство text-decoration-line используется для добавления декоративной строки к тексту.

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

Пример

h2 {
  text-decoration-line: overline;
}

h3 {
  text-decoration-line: line-through;
}

h4 {
  text-decoration-line: underline;
}

p {
  text-decoration-line: overline underline;
}

Попробуйте сами »

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

Указать цвет для декоративной линии

Свойство text-decoration-color используется для установки цвета линии оформления.

Пример

h2 {

  text-decoration-line: overline;
  text-decoration-color: red;
}

h3 {
  text-decoration-line: line-through;
  text-decoration-color: blue;
}

h4 {
  text-decoration-line: underline;
  text-decoration-color: green;
}

p {
  text-decoration-line: overline underline;
  text-decoration-color: purple;
}

Попробуйте сами »

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

Свойство text-decoration-style используется для установки стиля линии оформления.

Пример

h2 {
  text-decoration-line: underline;
  text-decoration-style: solid;
}

h3 {
  text-decoration-line: underline;
  text-decoration-style: double;
}

h4 {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

p. ex1 {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

p.ex2 {
  text-decoration-line: underline;
  text-decoration-style: wavy;

}

p.ex3 {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

Попробуйте сами »

Указать толщину для декоративной линии

Свойство text-decoration-thickness используется для установки толщины декоративной линии.

Пример

h2 {
  text-decoration-line: underline;
  text-decoration-thickness: auto;
}

h3 {
  text-decoration-line: underline;
  text-decoration-thickness: 5px;
}

h4 {
  text-decoration-line: underline;
  text-decoration-thickness: 25%;
}

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: double;
  text-decoration-thickness: 5px;
}

Попробуйте сами »

Сокращенное свойство

Свойство text-decoration — это сокращенное свойство для:

  • text-decoration-line (требуемый)
  • text-decoration-color (необязательный)
  • text-decoration-style
    (необязательный)
  • text-decoration-thickness (необязательный)

Пример

h2 {
  text-decoration: underline;
}

h3 {
  text-decoration: underline red;
}

h4 {
  text-decoration: underline red double;
}

p {
  text-decoration: underline red double 5px;
}

Попробуйте сами »

Небольшой совет

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

Пример

a {
  text-decoration: none;
}

Попробуйте сами »

Все свойства CSS оформления текста

СвойствоОписание
text-decoration		Задает все свойства оформления текста в одном объявлении
text-decoration-colorЗадает цвет текстового оформления
text-decoration-lineОпределяет тип используемого оформления текста (подчеркивание, верхняя строка и т.д.)
text-decoration-styleЗадает стиль оформления текста (сплошной, пунктирный и т.д.)
text-decoration-thicknessЗадает толщину линии оформления текста

❮ Назад Далее ❯

ВЫБОР ЦВЕТА
ТОП Учебники
HTML Учебник
CSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3. CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник
ТОП Справочники
HTML Справочник
CSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник
ТОП Примеры
HTML Примеры
CSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3.CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры

Форум | О SchoolsW3

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.

CSS-свойство text-underline-position определяет,какое из них задается с помощью значения text-decoration.

Свойство CSS text-underline-position указывает положение подчеркивания, которое задается с помощью значения underline свойства text-decoration .

Try it

Syntax

/ * Одно ключевое слово * /
text-underline-position: auto;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;
/ * Несколько ключевых слов * /
text-underline-position: under left;
text-underline-position: right under;
/ * Глобальные значения * /
text-underline-position: inherit;
text-underline-position: initial;
text-underline-position: revert;
text-underline-position: revert-layer;
text-underline-position: unset;

Values

auto

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

from-font

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

under

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

left

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

right

В вертикальных режимах письма это ключевое слово заставляет строку располагаться с

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

auto-pos Non-standard Experimental

Синоним auto , который следует использовать вместо.

above Non-standard

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

below Non-standard

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

Formal definition

Initial valueauto
Applies toall elements
Inheritedyes
Computed valueas specified
Animation typediscrete

Formal syntax

text-underline-position =   auto                           |  [ under || [ left | right ] ]

Examples

простой пример

Давайте рассмотрим несколько простых примеров абзацев:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nullam consectetur ac turpis vel laoreet. Nullam volutpat pharetra lorem, sit
amet feugiat tortor volutpat quis. Nam eget sodales quam. Aliquam accumsan
tellus ac erat posuere.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam consectetur ac turpis vel laoreet. Nullam volutpat pharetra lorem, sit
amet feugiat tortor volutpat quis. Nam eget sodales quam. Aliquam accumsan
tellus ac erat posuere.</p>

Наш CSS выглядит следующим образом:

p {
  font-size: 1.5rem;
  text-transform: capitalize;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.horizontal {
  text-underline-position: under;
}
.vertical {
  writing-mode: vertical-rl;
  text-underline-position: left;
}

В этом примере мы устанавливаем оба абзаца с толстым подчеркиванием. В горизонтальном тексте мы используем text-underline-position: under; чтобы поставить подчеркивание под всеми нижними нижними элементами.

В тексте с установленным вертикальным writing-mode мы можем затем использовать значения left или right , чтобы подчеркивание появлялось слева или справа от текста по мере необходимости.

Живой пример выглядит следующим образом:

Глобальная установка позиции text-underline-position

Поскольку свойство text-underline-position наследует, а не сбрасывает свойство сокращения

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

:root {
  text-underline-position: under;
}

Specifications

Specification
Модуль оформления текста CSS, уровень 3
# text-underline-position-property

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox для AndroidOpera AndroidSafari на IOSSamsung Internet
text-underline-position

33

12

74

6

20

12. 1

9

4.4.3

33

No

20

No

2.0

above_below

No

12-79

74

6

No

No

No

No

No

No

No

No

auto-pos

No

12-79

No

6

No

No

No

No

No

No

No

No

from-font

87

87

74

No

No

No

87

87

No

No

No

14.0

left_right

71

79

74

No

58

No

71

71

No

50

No

10. 0

under

33

79

74

No

20

12.1

4.4.3

33

No

20

No

2.0

See also

  • Свойство text-decoration является сокращением для установки большинства свойств текстового оформления, в том числе text-decoration-line , text-decoration-color и text-decoration-style . Тем не менее, он не устанавливает text-underline-position .

CSS

  • Пример использования «полной ширины» (японская катакана половинной ширины)

    Японская катакана половинной ширины использовалась для представления 8-битных кодов символов.

  • text-underline-offset

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

  • <time>

    Тип данных CSS <time> представляет значение, выраженное в секундах или миллисекундах.

  • <time-percentage>

    Тип данных CSS <time-percentage> представляет собой значение, которое может быть или или Обратитесь к документации за подробностями <time> и <percentage> отдельных

  • 1
  • …
  • 797
  • 798
  • 799
  • 800
  • 801
  • …
  • 857
  • Next

Как подчеркивать текст в CSS

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

💡

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

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

Начнем!

  • Как подчеркивать другой текст в CSS
  • Как убрать подчеркивание из элементов
  • Подчеркивание в CSS Распространенные ошибки и решения
  • Часто задаваемые вопросы

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

    Как подчеркивать другой текст в CSS

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

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

    Все элементов ‘p’ в вашем HTML-документе теперь будут подчеркнуты.

    💡

    Чтобы использовать этот стиль форматирования для других элементов, просто замените «p» на имя элемента.

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

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

    Достаточно просто, правда? ✔️

    Вот другие общих стилей , которые вы обычно найдете подчеркнутыми:

    Подчеркнуть все ссылки в документе 
     a {
оформление текста: подчеркивание;
}
    Подчеркнуть определенный элемент с классом 
     . underline {
оформление текста: подчеркивание;
}
    Подчеркните определенный элемент с помощью «специального» идентификатора 
     #special {
оформление текста: подчеркивание;
}
    Использовать двойное подчеркивание 
     p {
нижняя граница: 1 пиксель сплошной красный;
ширина нижней границы: 2px;
}

    Как удалить подчеркивание из элементов

    Удалить подчеркивание из текста или ссылки также очень просто. Просто установите для свойства text-decoration значение «none» 

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

    Подчеркивание в CSS Распространенные ошибки и решения

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

    Ошибка специфичности : убедитесь, что ваш селектор CSS имеет более высокую специфичность, чем любые другие конфликтующие стили.

    Конфликты родительского и дочернего элементов : Если вы используете text-decoration: подчеркните на родительском элементе, это может быть переопределено text-decoration : нет 9Правило 0026 для дочернего элемента.

    Несовместимый браузер : Некоторые старые браузеры несовместимы со свойством оформления текста.

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

    Часто задаваемые вопросы

    Могу ли я подчеркнуть только определенную часть текста?
    Да, вам просто нужно поместить эту часть текста в отдельный элемент HTML и применить стиль подчеркивания.

     
    Это текст, и эта часть должна быть подчеркнута.
    
 
     .подчеркнуть {
  оформление текста: подчеркивание;
}

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

     украшение текста: надчеркивание;


    Можно ли изменить цвет подчеркивания?
    Да, вы можете использовать свойство border-bottom для изменения цвета.

     р {
  нижняя граница: 1 пиксель сплошной красный;
}


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

     нижняя граница: сплошная толстая;


    Надеемся, эта статья была вам полезна!

    Хотите узнать больше? Посмотрите этот курс CSS🙌

    Ссылка скопирована!

    Какое свойство используется для подчеркивания, зачеркивания и зачеркивания текста с помощью CSS?

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

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

    • Последнее обновление: 20 июн, 2022

  • Читать
  • Обсудить

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

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

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

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

    Синтаксис: 

     оформление текста: строка оформления текста | стиль оформления текста
    | цвет оформления текста | толщина оформления текста | начальная | наследовать;

    Значения свойств:

    • text-decoration-line: это свойство используется для указания вида оформления текста, например подчеркивания, надчеркивания и т. д.
    • text-decoration-color: это свойство используется для указания цвет для оформления текста.
    • text-decoration-style: это свойство используется для указания стиля оформления текста, например, пунктирного, волнистого и т. д.
    • text-decoration-thickness: Это свойство используется для указания толщины декорированной линии.

    Свойство text-decoration имеет другое значение свойства для оформления текста, т. е. подчеркивание , надчеркивание и сквозное .

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

    HTML

    < html >

       

    < head >

         < title >

             text-decoration Свойство

         title > 2 2 2221 10222 < стиль >

             h3 {

                         text-decoration;

    }

    B {

    9 23;

             }

               

             p {

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

             }

         style >

    head >

       

    < body >

         < центр >

             < h3 >Welcome To GeeksforGeeks h3 > 

             < b > Text-decoration Property b >

             < p >

                         , 2 над линией 9022, 2 через ,

  • 03

                 применяется к тексту.

             p >

         center >

    body >

    html >

    • Вывод:

     

    Пример 2: В этом примере описывается свойство Text-decoration.

    HTML

    < html >

       

    < head >

         < title >text-decoration Property title >

         < стиль >

             h2 {

                 цвет: 902;

    }

    UL LI {

    9 2223;

             }

               

             #example1 {

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

    }

    #Пример 2 {

    9 9 22222222223 210151 9 9 222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222.

             }

               

             9023 {пример0223

                 text-decoration: обводка синего цвета;

             }

         style >

    head >

       

    < body >

         < h2 >Гики для гиков h2 >

         < h3 >text-decoration Property h3 >

         < ul >

             < LI ID = "Пример1" >

    Подключение Wavy Green

    9 0223 li >

             < li id = "example2" >

                 line-through red

             LI >

    < LI ID = 111222 " = 1".

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

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