Подчертаването на документ или текст винаги се счита за лесно. Но ако разгледаме случая с уебсайтовете, лесно ли е все още? Повечето от нас биха казали „да“, но правенето на хоризонтална линия, включително някои персонализирани дизайни, прави тази проста задача уморителна. Нека започнем Пътешествието с декорация на текст с помощта на CSS по следния начин:
- Какво е декорация на текст?
- Видове текстови декорации в CSS
- Декорация на текст с помощта на CSS: Код
- Декорация на текст Прескачане
Какво е декорация на текст?
Той задава външния вид на декоративните линии върху текста. Това е стенографско свойство за:
- текст-декорация-ред
- текст-декорация-цвят
- стил на декорация на текст
Той е посочен като една или повече стойности, разделени с интервал, представляващи дългата text-декоративни свойства.
Синтаксис:
декорация на текст: || ||
Където,
текст-декорация-ред: Използва се за задаване на вида на използваната декорация катоподчертаване, надграждане и пресичане.
текст-декорация-цвят:Използва се за задаване на цвета на декорацията.
стил на декорация на текст: Използва се за задаване на стила на линията катоплътно, вълнообразно, пунктирано, пунктирано, двойно
Видове текстови декорации в CSS
- Overline:
#decoration {text-decoration: overline} 
- Преминаване по линия:
#decoration {text-decoration: line-through}- Подчертаване:
#decoration {text-decoration: underline}- Комбинация:
#decoration {text-decoration: подчертаване на линия през линия overline}Изход:
Декорация на текст с помощта на CSS: Код
Код:
CSS код:
#overline {text-decoration: wavy overline lime} #underover {text-decoration: dashed underline overline} #dotted {text-decoration: underline overline пунктирано червено} #wavy {text-decoration: line-through wavy}Изход:
Декорация на текст Прескачане
Свойство, известно като text-decoration-skip, също може да се използва там, където текстът е надчертан, подреден и подчертан. Помага при декорирането на текста. Той просто указва как се начертават надчертания и подчертаването, когато преминават през възходящи и низходящи.
#decoration {text-decoration-skip: ink}Стойностите, които могат да се използват при пропускане на декорация на текст, са:
обекти : (по подразбиране) редът прескача вградени обекти, като изображения или елементи с вграден блок.
нито един : линия пресича всичко.
пространства : реда за декорация пропуска интервали, символи за разделяне на думи и всякакви интервали, зададени с интервали между букви или интервали от думи.
мастило : декоративна линия прескача глифи, низходящи или възходящи.
как да сравня два низа
ръбове : декоративната линия започва леко след началния ръб на съдържанието и завършва малко преди крайния ръб на съдържанието.
кутия-декорация : линия за декорация прескача наследен поле, граница и подложка.
Тъй като това свойство не се поддържа от нито един браузър, все още няма демонстрация, но ето пример в изображението по-долу за това как може да изглежда всяка от стойностите, след като се изпълни text-decoration-skip.
С това стигаме до края на тази декорация на текст с помощта на CSS блог. Ако имате въпроси относно тази тема, моля, оставете коментар по-долу и ние ще се свържем с вас.
Вижте нашите което се предлага с обучение под ръководството на инструктори на живо и опит в реалния живот на проекти. Това обучение ви кара да владеете умения за работа с back-end и front-end уеб технологии. Включва обучение по уеб разработка, jQuery, Angular, NodeJS, ExpressJS и MongoDB.
Имате въпрос към нас? Моля, споменете го в раздела за коментари в блога „Декорация на текст с помощта на CSS“ и ние ще се свържем с вас.