text-decoration-line в CSS


Содержание

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

css -свойство text-decoration-line (от англ. text decoration line – декоративная линия текста) используется для установки типа декоративной линии текста. При этом разрешается добавлять к одному и тому же фрагменту текста сразу несколько линий, перечисляя значения через пробел.

Характеристики

  • Значение по умолчанию: none .
  • Применяется: ко всем элементам .
  • Наследуется: нет .
  • Анимируется: нет .
  • JavaScript: object.style.textDecorationLine=»value» .

Синтаксис

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

text-decoration

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

12.0+ 3.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

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

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

Самый часто используемый декор для текста — это подчёркивание. Подчёркнутый текст задаётся значением underline :

Если вам, наоборот, нужно убрать подчёркивание, например убрать подчеркивание ссылки, заданное по умолчанию, то нужно воспользоваться значением none :

Часто требуется не просто убрать подчёркивание ссылки в обычном состоянии, а сделать так, чтобы ссылки были подчёркнуты при наведении на них курсора мыши. Чтобы сделать подчёркивание ссылки при наведении, надо воспользоваться псевдо-классом :hover:

К сожалению цвет линий подчёркивания, надчёркивания и перечёркивания, установленных свойством text-decoration , будет совпадать с цветом текста, для которого эти линии используются. Чтобы иметь возможность изменять цвет, толщину и стиль подчёркивания или надчёркивания надо воспользоваться CSS свойствами border-top (создаёт линии над элементом) и border-bottom (создаёт линию под элементом).

Примечание: чтобы добавить к тексту подчёркивание или перечёркивание не обязательно использовать CSS, этих же эффектов можно добиться с помощью HTML тегов: (подчёркнутый текст) и (зачёркнутый текст).

CSS text-decoration-line

The CSS text-decoration-line property specifies what line decorations, if any, are added to an element.

The text-decoration-line property can be used in conjunction with the text-decoration-style and text-decoration-color properties to determine the type of line decoration (i.e. underline, overline, line-through, blink).

Syntax

Possible Values

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information

Example Code

Basic CSS

Here’s an example of a basic declaration. A declaration consists of the property and its value.

So it could be used like this:

Working Example within an HTML Document

CSS Specifications

  • The text-decoration-line property is defined in CSS Text Decoration Module Level 3 (W3C Candidate Recommendation 1 August 2013).

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn’t support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don’t need to. It also removes old, unnecessary prefixes from your CSS.

Илон Маск рекомендует:  Что такое код setvoiceaccent

You can also use Autoprefixer with preprocessors such as Less and Sass.

The CSS Text-Decoration Property

Contents

Using text decorations in CSS

The CSS text-decoration property specifies visual decorative lines for text:

This property is actually a shorthand for four subproperties:

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

As with all shorthands, you need to list the values without naming the subproperties:

text-decoration: color line style thickness;

You don’t need to define all the values for the shorthand to work – it will work with even a single value:

In the following sections, we will explain each subproperty individually.

Modifying the CSS text decoration line

Using the CSS text-decoration-line property allows you to specify what kind of line the text decoration is going to use:

The syntax for this property is simple:

You may combine different possible values in one statement as well.

Value Description
none The default value. No text decoration line is displayed
underline Makes CSS underline text
overline Makes CSS overline text
line-through Makes CSS draw a line across text
blink A deprecated value. Made the text blink in CSS

Coloring the decoration line

The CSS text-decoration-color allows you to set the color for CSS underlines, overlines, and line-throughs:

The syntax for this property is almost the same as the ones discussed above:

Tip: to get the value for the exact color tone you need, use the Pickeristic color picker.

Theory is great, but we recommend digging deeper!
Learn Web Design: The Ultimate Gu >LearnToProgram

Styling CSS text decorations

The CSS text-decoration-style allows you to define how to display the text decoration line:

The syntax for this property is as follows:

All the available values are listed in the table below.

Value Description
solid The default value. Displays as a single straight line
double Display a double line
dotted Display a dotted line
dashed Display a dashed line
wavy Display a wavy line

Defining line thickness

The last CSS text decoration subproperty is called text-decoration-thickness . It sets the width of the decoration line:

You can define the thickness in either length units or keywords:

  • auto is the default value which makes the browser choose the line thickness
  • from-font chooses the thickness according to the font-size

Note: CSS text-decoration-thickness is an experimental property, so be aware of lower browser support.

Свойство text-decoration, подчёркивание и другие эффекты

Дополнительное оформление текста можно задать с помощью свойства text-decoration . Вот его значения:

  1. underline — подчёркивание;
  2. line-through — зачёркивание;
  3. overline — надчёркивание;
  4. none — убирает вышеперечисленные эффекты.

К тексту можно одновременно применить несколько эффектов, если перечислить значения через пробел:

Свойство text-decoration — составное, а это значит, что его можно разложить на следующие свойства:

  • text-decoration-line — вид линии: зачёркивание, подчёркивание или надчёркивание;
  • text-decoration-style — стиль линии, может принимать значения:
    • solid — сплошная линия;
    • double — двойная линия;
    • dotted — точечная линия;
    • dashed — пунктирная линия;
    • wavy — волнистая линия.
  • text-decoration-color — цвет линии.
  • index.html Сплит-режим
  • style.css Сплит-режим

День одиннадцатый. Без фанатизма

Понял, что кормил кота слишком много. Чтобы кот мог ходить по снегу и не проваливаться, решил убрать этот пункт из списка дел.

Оформление текста в CSS

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

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

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

Визуальное оформление текста в CSS

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

  • blink — мерцающий текст;
  • none — значение по умолчанию, оформление отсутствует;
  • overline — линия расположена над текстом;
  • underline — подчеркнутый линией текст;
  • line-through — текст, зачеркнутый линией;
  • inherit — в данном случае text-decoration наследует значение родительского элемента.

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

Цвет текста в CSS

Изменить цвет текста, расположенного внутри HTML элементов можно с помощью CSS свойства color .

Способы задания могут быть следующими:

  • При помощи названия цвета (например, red, green, blue, white);
  • При помощи значения RGB (например, rgb(221,102,212));
  • При помощи шестнадцатеричного цветового значения (например, #ff00aa).


Визуальное оформление, реализованное с помощью приведенного выше кода, выглядит следующим образом:

Размер текста в CSS

CSS свойство font-size позволяет задать размер текста.

Единицами измерения могут быть:

  • Пиксели (например, 14px);
  • Пункты (например, 20pt);
  • Проценты (например, 50%);
  • Ключевые слова small, large и т.п.

Визуальное представление приведенного выше кода выглядит следующим образом:

Отступ текста в CSS

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

Однако в CSS данная проблема решается с помощью свойства text-indent .

Визуальное отображение кода:

Жирный и наклонный текст в CSS

С помощью атрибута CSS font-weight определяется жирность шрифта.

Илон Маск рекомендует:  vertical-align в CSS

Данный атрибут может принимать следующие значения:

  • normal — обычный;
  • lighter — более светлый;
  • bold — жирный;
  • от 100 до 900, где 100 — самый тонкий шрифт, а 900 — самый толстый.

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

Тень текста в CSS

CSS свойство text-shadow позволяет задать тексту тень. Данное свойство содержит в себе целый перечень эффектов: цвет, смещение вправо, смещение вниз, радиус пятна тени.

В том случае, если цвет тени не задан, используется цвет текста.

Представленный выше код в браузере выглядит следующим образом:

Выравнивание текста в CSS

Выравнивание текста по горизонтали задаётся свойством text-align , которое может принимать следующие значения:

  • left — выравнивание по левому краю;
  • right — выравнивание по правому краю;
  • center — выравнивание по центру;
  • justify — выравнивание по всей ширине.

С помощью свойства vertical-align выполняется выравнивание текста по вертикали.

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

  • baseline — выравнивание линии элемента по базовой линии родительского элемента;
  • middle — выравнивание средней элементной точки по базовой линии родительского элемента;
  • text-top — выравнивание верхней части элемента по верху шрифта родительского элемента;
  • top — выравнивание верха элемента по верхней части самого высокого элемента строки;
  • sub, super — отображение элемента в виде нижнего и верхнего индексов соответственно.

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

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

Свойство CSS text-decoration отвечает за оформление текста в плане подчеркиваний. Можно сделать нижнее, верхнее подчеркивание. Также можно зачеркнуть текст или применить все подчеркивания сразу.

Синтаксис CSS text-decoration

  • none — текст без оформления
  • underline — нижнее подчеркивание
  • overline — верхнее подчеркивание
  • line-through — зачеркивание текста
  • blink — мерцающий текст (рекомендуется не применять это значение)

Можно указать несколько значений. Например

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

Для изменения стиля подчеркивания есть специальное свойство text-decoration-style :

  • solid — сплошное подчеркивание
  • double — двойная линия
  • dotted — пунктирная линия
  • dashed — штриховая линия
  • wavy — волнистая линия

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

color может принимать значения в виде RGB, названия цвета (см. коды и названия html цветов для сайта)

К сожалению, свойство text-decoration-style и text-decoration-color не поддерживается почти всеми браузерами (идет уже 2020 год).

Подчеркивание ссылок и текста через CSS, свойство text-decoration

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

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

Раньше, помнится, поддержка данной опции в стилях была очень слабая, многие браузеры вообще ее не воспринимали. Сейчас ситуация улучшилась, хотя вы все еще рискуете получить неожиданный результат на старых версиях или в IE. Вероятно, совсем скоро наступит время, когда мы сможем задавать однозначное и корректное подчеркивание HTML ссылок / текстов без применения border-bottom. Хотя в одном из примеров прошлой статьи (онлайн журнале Wired) именно оно используется при реализации тренда:

Но вернемся к нашему уроку по верстке и более традиционному методу.

Опиця text-decoration для подчеркивание текста в CSS

Ранее она принимала одно из базовых значений:

  • line-through — перечеркнутый текст;
  • underline — нижнее подчеркивание;
  • overline — линия сверху;
  • none — без оформления (отмена всех эффектов);
  • inherit — наследуется.

Однако в новой редакции стилей предлагаются несколько иные свойства:

  • text-decoration-color — задание цвета;
  • text-decoration-style — стиль подчеркивания текста / ссылок;
  • text-decoration-line — тип линии (из 5-ти вариантов выше);

Для свойства text-decoration вы можете использовать сразу несколько значений параметров, перечисляя их в одной строке. Рассмотрим их по отдельности…

text-decoration-color — CSS цвет подчеркивания ссылки

Эта опция максимально простая и здесь, в принципе, нечего особо объяснять.
В качестве значение вводите код веб-цвета.

text-decoration-line — расположение линии оформления текста

Позволяет сделать разное подчеркивание в HTML нижнее (underline), верхнее (overline), перечеркнутый текст (line-through) и т.п. Совместим эту фишку с предыдущей и получится:

Во второй строке показано как все записывается в один ряд с text-decoration.

text-decoration-style — стиль подчеркивания текста

Опция задает внешний вид декоративной линии для оформления текста / ссылки. В новых рекомендациях CSS были добавлены значения wavy и double, теперь их всего 5:

text-underline-position — позиционирование CSS подчеркивания

С помощь этого свойства можно управлять позицией линии относительно глифа шрифта.
Всего доступны 4 варианта:

  • auto — располагается максимально близко базовой линии текста;
  • under — под самой нижней границей шрифта;
  • left и right — слева/справа для записей, отображаемых вертикально.

Вот наглядное отличие нижнего подчеркивания текста с помощью under и auto:

Разница, думаю, вполне очевидна.

text-decoration-skip — убираем подчеркивание для элементов

С помощью опции можно отменить (пропустить) декорирование некоторых элементов в HTML строке. Чтобы лучше понять допустимые значения spaces, objects, box-decoration, edges, ink продублирую картинку из прошлой заметки:

Илон Маск рекомендует:  Что такое код mysql_list_dbs

То есть, например, с помощью ink вы можете сделать нижнее подчеркивание в CSS, которое бы не пересекалось с символами шрифта. Значение objects позволяет пропускать инлайновые элементы (inline-block) — вставляете span, и сплошная линия прервется в соответствующем месте:

Параметры box-decoration, spaces, edges намного хуже поддерживаются браузерами, поэтому их результат иногда отличается от ожидаемого. Вот состояние по совместимости/поддержке text-decoration на момент написания статьи:

Дополнительные фишки для подчеркивания ссылок

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

Как убрать подчеркивание ссылки

Если ссылка декоративно выделена с помощью линии, то вам нужно найти CSS стиль, в котором прописывается свойство text-decoration и заменить его значение на «none»:

Тут важно правильно определить где именно в задается оформление вашему элементу. У него могут быть сторонние классы и другие дополнительные конструкции (не только тег a). Смотрите как мы реализовали это в примере ниже — абзац с классом «nounder».

Как сделать подчеркивание ссылки при наведении

В CSS для этих целей содержится так называемый псевдокласс hover — по теме есть большая детальная статья о создании hover эффекта в кнопках / картинках и не только (советуем глянуть). Если говорить вкратце, то вам просто нужно прописать обработку события:

Оба примера ниже позволяют понять логику работы при наведении: или вы изначально указываете в CSS подчеркивание ссылок, а потом убираете его в hover, либо наоборот.

Если будут еще какие-то вопросы по теме, задавайте их в комментариях. Постараемся рассмотреть позже или подсказать в ответах. Главное в этом деле практика — попробуйте добавить разные свойства для опции text-decoration непосредственно в примерах или создайте свой тестовый файл. Надеемся по теме подчеркивания текста и ссылок в CSS / HTML все стало ясно.

CSS | text-decoration-line Property

The text-decoration-line property is used to sets various kind of text-decoration. The text-decoration may include many values such as underline, overline, line-through, etc. It can be possible to combine more than one text-decoration property. For Example- underline and overline values to display lines both under and over the text.

Syntax:

Property Values:

none: It is the default value and used to specify no line for the text to decorate text.

Тонкое управление свойством text-decoration

Дата публикации: 2015-06-15

От автора: Скорее всего, вы уже знакомы с данным свойством. Например, большинство браузеров, по умолчанию, задают с помощью данного свойства подчеркивание у ссылок (text-decoration: underline;), которое мы можем отменить вот так: text-decoration: none;.

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

Для данного свойства можно задать несколько значений

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Посмотрите описание данной возможности в Альманахе. Если быть точнее, то в данном случае происходит добавление нескольких значений для дополнительного свойства text-decoration-line.

Вы можете управлять цветом данного свойства

По умолчанию для данного свойства задается цвет, указанный для текста (в свойстве color). Но вы можете изменить это:

Посмотрите описание данной возможности в Альманахе.

Примечание: Браузерный «движок» Gecko отображает подчеркивание под нижним выносным элементом букв (подстрочным элементом литеры), а WebKit/Blink – над:

Слева показан пример в браузере Chrome, справа – в Firefox.

Обычно цветные подчеркивания реализуются с помощью свойства border, а не text-decoration. Для каждой из границ элемента может быть указан индивидуальный цвет, толщина, и позиционируются границы значительно лучше.

Но есть вещи, которые нельзя сделать с помощью границ, например…

Вы можете менять стиль данного свойства

Вы просто не сможете сделать также с помощью границ!

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Посмотрите описание данной возможности в Альманахе.

А можно сделать и еще лучше

Есть определенное желание сделать подчеркивание текста лучше. Например, пропускать подчеркивание нижних выносных элементов у букв для улучшения читабельности подчеркнутого текста:

Такая возможность будет доступна благодаря свойству text-decoration-skip, хотя она пока не реализована ни в одном из браузеров. А пока мы можем указать для подчеркивания более мягкий и менее контрастный цвет. Здесь можно применить rgba():

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

Примечание: Похоже, что в Safari/iOS пропуск нижних выносных элементов у букв задан по умолчанию.

Если вы хотите отменить данное поведение, воспользуйтесь следующей записью: -webkit-text-decoration-skip: none;.

Тестирование

Из-за разной степени браузерной поддержки, некоторые (или все) демо-примеры могут не сработать в вашем браузере.

Так что да! Даже такие простые вещи, которые мы воспринимаем, как должное, могут со временем меняться в CSS царстве.

Автор: Chris Coyier

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL