Главная » Языки программирования

A css dotted underline

Содержание
  1. text-decoration-style
  2. Краткая информация
  3. Синтаксис
  4. Значения
  5. Песочница
  6. Пример
  7. Объектная модель
  8. Примечание
  9. Спецификация
  10. Браузеры
  11. См. также
  12. Рецепты
  13. Справочник CSS
  14. text — decoration — style
  15. Пример
  16. Как пишется
  17. text-decoration-style
  18. Try it
  19. Syntax
  20. Values
  21. Formal definition
  22. Formal syntax
  23. Examples
  24. Setting a wavy underline
  25. CSS
  26. HTML
  27. Results
  28. Specifications
  29. Browser compatibility
  30. See also
  31. Found a content problem with this page?
  32. MDN
  33. Support
  34. Our communities
  35. Developers
  36. CSS text-decoration-style Property
  37. Browser Support
  38. CSS Syntax
  39. Property Values

text-decoration-style

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

Краткая информация

Синтаксис

text-decoration-style: solid | double | dotted | dashed | wavy

Синтаксис

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

Значения

solid Одинарная линия. double Двойная линия. dotted Точечная линия. dashed Пунктирная линия. wavy Волнистая линия.

Песочница

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

Пример

Объектная модель

Объект.style.textDecorationStyle

Примечание

Firefox до версии 36 поддерживает свойство -moz-text-decoration-style .

Safari поддерживает свойство -webkit-text-decoration-style .

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

См. также

Рецепты

Справочник CSS

  • !important
  • ::after
  • ::backdrop
  • ::before
  • ::first-letter
  • ::first-line
  • ::placeholder
  • ::selection
  • :active
  • :blank
  • :checked
  • :default
  • :disabled
  • :empty
  • :enabled
  • :first-child
  • :first-of-type
  • :focus
  • :focus-within
  • :fullscreen
  • :hover
  • :in-range
  • :indeterminate
  • :invalid
  • :lang
  • :last-child
  • :last-of-type
  • :link
  • :not
  • :nth-child
  • :nth-last-child
  • :nth-last-of-type
  • :nth-of-type
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :placeholder-shown
  • :read-only
  • :read-write
  • :required
  • :root
  • :target
  • :valid
  • :visited
  • @charset
  • @document
  • @font-face
  • @import
  • @keyframes
  • @media
  • @page
  • @supports
  • @viewport
  • accent-color
  • align-content
  • align-items
  • align-self
  • all
  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • aspect-ratio
  • backdrop-filter
  • backface-visibility
  • background
  • background-attachment
  • background-blend-mode
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-position-x
  • background-position-y
  • background-repeat
  • background-size
  • block-size
  • border
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-image
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-spacing
  • border-style
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • bottom
  • box-decoration-break
  • box-shadow
  • box-sizing
  • caption-side
  • caret-color
  • clear
  • clip
  • color
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • columns
  • content
  • counter-increment
  • counter-reset
  • cursor
  • direction
  • display
  • empty-cells
  • filter
  • flex
  • flex-basis
  • flex-direction
  • flex-flow
  • flex-grow
  • flex-shrink
  • flex-wrap
  • float
  • font
  • font-family
  • font-kerning
  • font-size
  • font-stretch
  • font-style
  • font-variant
  • font-weight
  • height
  • hyphens
  • image-rendering
  • justify-content
  • left
  • letter-spacing
  • line-clamp
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • marks
  • max-height
  • max-width
  • min-height
  • min-width
  • mix-blend-mode
  • object-fit
  • opacity
  • order
  • orphans
  • outline
  • outline-color
  • outline-offset
  • outline-style
  • outline-width
  • overflow
  • overflow-x
  • overflow-y
  • padding
  • padding-block
  • padding-block-end
  • padding-block-start
  • padding-bottom
  • padding-inline
  • padding-inline-end
  • padding-inline-start
  • padding-left
  • padding-right
  • padding-top
  • page-break-after
  • page-break-before
  • page-break-inside
  • perspective
  • perspective-origin
  • place-content
  • pointer-events
  • position
  • quotes
  • resize
  • right
  • scroll-behavior
  • tab-size
  • table-layout
  • text-align
  • text-align-last
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-skip-ink
  • text-decoration-style
  • text-emphasis
  • text-emphasis-color
  • text-emphasis-position
  • text-emphasis-style
  • text-fill-color
  • text-indent
  • text-orientation
  • text-overflow
  • text-shadow
  • text-stroke
  • text-stroke-color
  • text-stroke-width
  • text-transform
  • top
  • transform
  • transform-origin
  • transform-style
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • unicode-bidi
  • user-select
  • vertical-align
  • visibility
  • white-space
  • widows
  • width
  • word-break
  • word-spacing
  • word-wrap
  • writing-mode
  • z-index
  • zoom

Источник

text — decoration — style

Свойство text — decoration — style управляет стилем декоративной линии для текста (подчёркивание, перечёркивание и другие).

Если стиля всё мало, то можно заодно их и разукрасить с помощью text — decoration — color 🌈

Пример

Скопировать ссылку «Пример» Скопировано

 .subject  text-decoration-style: solid;> .participle  text-decoration-style: dotted; text-decoration-color: #F498AD;> .predicate  text-decoration-style: double;> .subject  text-decoration-style: solid; > .participle  text-decoration-style: dotted; text-decoration-color: #F498AD; > .predicate  text-decoration-style: double; >

Как пишется

Скопировать ссылку «Как пишется» Скопировано

  • solid — сплошная линия (значение по умолчанию);
  • double — двойная сплошная линия;
  • dotted — пунктирная линия точками;
  • dashed — пунктирная линия чёрточками;
  • wavy — волнистая линия.

С помощью свойства text — decoration — style можно сделать текстовые линии красивее и информативнее. Например, подчеркнуть слово с орфографической ошибкой:

 span  text-decoration-line: underline; text-decoration-color: red; text-decoration-style: wavy;> span  text-decoration-line: underline; text-decoration-color: red; text-decoration-style: wavy; >

Или сделать необычную ссылку:

 a  color: #ffffff; text-decoration-color: orange; text-decoration-style: dotted;> a  color: #ffffff; text-decoration-color: orange; text-decoration-style: dotted; >

Добавить декоративную линию и навести красоту можно с помощью псевдоэлементов : : first — line для первой строки текста или : : first — letter для первой буквы в нём.

 .dotted::first-line  text-decoration-line: underline; text-decoration-style: dashed;> .double::first-letter  text-decoration-line: underline; text-decoration-style: double;> .dotted::first-line  text-decoration-line: underline; text-decoration-style: dashed; > .double::first-letter  text-decoration-line: underline; text-decoration-style: double; >

Стилизуются и другие линии, кроме назначенных свойством text — decoration — line . Например, созданные внутри HTML-разметки с помощью тегов вроде или .

 u  text-decoration-style: wavy;> u  text-decoration-style: wavy; >

Источник

text-decoration-style

The text-decoration-style CSS property sets the style of the lines specified by text-decoration-line . The style applies to all lines that are set with text-decoration-line .

Try it

If the specified decoration has a specific semantic meaning, like a line-through line meaning that some text has been deleted, authors are encouraged to denote this meaning using an HTML tag, like or . As browsers can disable styling in some cases, the semantic meaning won’t disappear in such a situation.

When setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead.

Syntax

/* Keyword values */ text-decoration-style: solid; text-decoration-style: double; text-decoration-style: dotted; text-decoration-style: dashed; text-decoration-style: wavy; /* Global values */ text-decoration-style: inherit; text-decoration-style: initial; text-decoration-style: revert; text-decoration-style: revert-layer; text-decoration-style: unset;

Values

Draws no line. Use text-decoration-line : none instead.

Formal definition

Formal syntax

text-decoration-style =
solid |
double |
dotted |
dashed |
wavy

Examples

Setting a wavy underline

The following creates a red wavy underline:

CSS

.wavy  text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; >

HTML

p class="wavy">This text has a wavy red line beneath it.p>

Results

Specifications

Browser compatibility

BCD tables only load in the browser

See also

  • When setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead.
  • text-decoration-line
  • text-decoration-color
  • text-decoration-thickness
  • text-underline-offset

Found a content problem with this page?

This page was last modified on May 19, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

CSS text-decoration-style Property

The text-decoration-style property sets the style of the text decoration (like solid, wavy, dotted, dashed, double).

Tip: Also look at the text-decoration property, which is a short-hand property for text-decoration-line, text-decoration-style, text-decoration-color, and text-decoration-thickness.

Default value: solid
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.textDecorationStyle=»wavy» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -moz- specify the first version that worked with a prefix.

CSS Syntax

Property Values

Value Description Play it
solid Default value. The line will display as a single line Demo ❯
double The line will display as a double line Demo ❯
dotted The line will display as a dotted line Demo ❯
dashed The line will display as a dashed line Demo ❯
wavy The line will display as a wavy line Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Источник

Читайте также:  Datetime php текущее время
Оцените статью
© 2024 Программирование