7.1 Свойство text-decoration
CSS предоставляет различные свойства для стилизации и декорирования текста на веб-страницах. Свойства text-decoration, text-transform и text-shadow позволяют добавлять подчеркивание, изменять регистр текста и создавать тени, что помогает сделать текст более выразительным и привлекательным.
Свойство text-decoration управляет декоративными эффектами текста, такими как подчеркивание, надчеркивание и зачеркивание. Оно также позволяет установить цвет и стиль линий, используемых для декорирования текста.
Значения:
none: убирает все текстовые декорацииunderline: подчеркивает текстoverline: добавляет линию над текстомline-through: добавляет линию через текст (зачеркивание)blink: текст мигает (поддерживается не всеми браузерами)text-decoration-color: устанавливает цвет линии декорацииtext-decoration-style: устанавливает стиль линии (solid, double, dotted, dashed, wavy)text-decoration-thickness: устанавливает толщину линии декорации
Пример использования:
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
.custom-decoration {
text-decoration: underline wavy red;
}
<body>
<p class="underline">Этот текст подчеркнут.</p>
<p class="overline">Этот текст надчеркнут.</p>
<p class="line-through">Этот текст зачеркнут.</p>
<p class="custom-decoration">Этот текст подчеркнут волнистой красной линией.</p>
</body>
7.2 Свойство text-transform
Свойство text-transform управляет преобразованием текста, изменяя регистр букв. Это полезно для автоматического изменения текста в заголовки, строчные буквы и т. д.
Значения:
none: без преобразований (значение по умолчанию)capitalize: первая буква каждого слова становится заглавнойuppercase: все буквы становятся заглавнымиlowercase: все буквы становятся строчнымиfull-width: преобразует текст в полный (двойной) размер (поддерживается не всеми браузерами)
Пример использования:
.capitalize {
text-transform: capitalize;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
<body>
<p class="capitalize">этот текст будет с заглавной буквы для каждого слова.</p>
<p class="uppercase">этот текст будет полностью заглавными буквами.</p>
<p class="lowercase">ЭТОТ ТЕКСТ БУДЕТ ПОЛНОСТЬЮ СТРОЧНЫМИ БУКВАМИ.</p>
</body>
7.3 Свойство text-shadow
Свойство text-shadow добавляет тень к тексту, что позволяет создать визуальные эффекты и улучшить читаемость текста на веб-странице.
Значения:
<offset-x>: смещение тени по оси X (горизонтально)<offset-y>: смещение тени по оси Y (вертикально)<blur-radius>: радиус размытия тени (необязательно)<color>: цвет тени (необязательно)
Пример использования:
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.multiple-shadows {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);
}
<body>
<p class="text-shadow">Этот текст с тенью.</p>
<p class="multiple-shadows">Этот текст с множественными тенями.</p>
</body>
Объяснение кода:
text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);: добавляет тень с горизонтальным смещением 2px, вертикальным смещением 3px, радиусом размытия 4px и полупрозрачным черным цветомtext-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);: добавляет две тени с разными параметрами, создавая более сложный визуальный эффект
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ