Подчеркивание документа или текста всегда считается простым. Но если мы рассмотрим случай с веб-сайтами, насколько это просто? Большинство из нас сказали бы «да», но создание горизонтальной линии, включающей некоторые нестандартные конструкции, делает эту простую задачу утомительной. Начнем путешествие по оформлению текста с помощью CSS следующим образом:
- Что такое оформление текста?
- Типы оформления текста в CSS
- Оформление текста с помощью CSS: код
- Пропустить оформление текста
Что такое оформление текста?
Устанавливает внешний вид декоративных линий на тексте. Это сокращенное свойство для:
- текст-украшение-строка
- текст-украшение-цвет
- стиль оформления текста
Он указывается как одно или несколько значений, разделенных пробелами, представляющих длинное число text-украшения свойства.
Синтаксис:
оформление текста: || ||
Куда,
текст-украшение-строка: Он используется для установки типа используемого украшения, напримерподчеркивание, подчеркивание и сквозное подчеркивание.
текст-украшение-цвет:Используется для задания цвета украшения.
стиль оформления текста: Он используется для установки стиля линии, напримерсплошной, волнистый, пунктирный, штриховой, двойной
получить размер массива javascript
Типы оформления текста в CSS
- Надпись:
#decoration {text-decoration: overline} 
- Линия, проходящая через:
#decoration {text-decoration: line-through}- Подчеркнуть:
#decoration {text-decoration: underline}- Комбинация:
#decoration {text-decoration: underline-through 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». Если у вас есть вопросы по этой теме, оставьте комментарий ниже, и мы свяжемся с вами.
Ознакомьтесь с нашими который включает в себя живое обучение под руководством инструктора и опыт реальных проектов. Это обучение поможет вам овладеть навыками работы с серверными и интерфейсными веб-технологиями. Он включает обучение веб-разработке, jQuery, Angular, NodeJS, ExpressJS и MongoDB.
базовая структура Java-программы
Есть вопрос к нам? Пожалуйста, отметьте это в разделе комментариев блога «Украшение текста с помощью CSS», и мы свяжемся с вами.