CSS свойство за украса на текст: -

Подчертаването може да се използва за подчертаване на важен текст. Елементът U и свойството CSS text-decoration са двете най-използвани техники за подчертаване на текст в уеб страници.

И двете са лесни за използване, но елементът U предлага семантична стойност на значението. Друг може да се покаже при поискване, което улеснява промяната на състоянието на подчертаване чрез просто добавяне на CSS класове към текста.

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

Атрибутът text-decoration предлага алтернативен начин за подчертаване на текст. Текстът с хипервръзка може също да се използва за замяна на подчертавания с надчертания.

Надчертаването е обратното на подчертаването. В горната част на текста се добавя ред.

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

Свойствата на CSS декорация на текст са фантастични за текст, но могат да бъдат ограничени по отношение на дизайна и не са приложими за типове нетекстово съдържание. Подчертаванията също могат да бъдат създадени с CSS атрибути за граници.

Атрибутът text-decoration е най-основният начин за подчертаване на текст. Най-същественият недостатък на декорирането на текст е, че не може да се конфигурира.

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

Съдържанието е подчертано с помощта на атрибута text-decoration-line. Overline, underline и line-through са трите опции за този атрибут. В CSS атрибутът underline се използва за подчертаване на текста. Подчертаването се изчертава под вградения текст с тази стойност.

През последващите текстови елементи се изчертават текстови декорации. Това означава, че когато даден елемент дефинира декорация на текст, декорацията не може да бъде премахната от дъщерен елемент.

Няма начертана линия и всички съществуващи декорации са изтрити.

подчертаване: през основната линия на текста се начертава линия от 1px.

Линеен проход: в „средната“ точка на текста вмъква линия от 1 пиксел през него.

Подчертаване: добавя 1px линия директно над „горната“ точка на текста в текста.

Наследяване: наследява украсата на родителя.

Декорирането на текста се определя чрез свойството text-decoration, което е съкратена характеристика за:

• text-decoration-line (задължително)
• текст-декорация-цвят
• text-decoration-style
• текст-декорация-дебелина

overline, underline, underline-overline, line-through попада под text-decoration-line.

Плътни, пунктирани, прекъснати, вълнообразни, двойни попадат в текст-декорация-стил.

Цвят в десетична стойност, шестнадесетична стойност или наследяване се намира в text-decoration-color.

Свойството border-bottom е алтернатива на украсата на текст. Можем също да използваме border-bottom, за да осигурим подложка.

Синтаксис: -

 text-decoration: text-decoration-line | text-decoration-color | text-decoration-style | text-decoration-thickness  

Нека сега да потърсим пример и да разберем използването на свойството за украса на текст.

Текст-декорация: подчертаване надчертаване

Пример: -

 h1 { text-decoration: underline overline dotted purple; } h3 { text-decoration: underline wavy cyan 10px;} <h2>This is an example of text decoration property color using underline overline. </h2> <h3>This is an example of text decoration property color using line-through. </h3>  

Изход: