12. Text-transform в CSS
Данная статья написана командой Alash Academy.
Это одна из статей из нашего Самоучителя по HTML&CSS.
Надеемся, что данная статья Вам будет полезна. Приятного прочтения!
Привет! В этой статье мы продолжим говорить об изменениях шрифтов с помощью CSS, а именно поговорим о том, как работает свойство text-transform.
12.1. За что отвечает text-transform
Можно заметить, что часто заголовки пишутся прописными буквами. А в английском языке в названиях (например, книг, сериалов и пр.) первые буквы всех слов прописные:
General Electric
Game of Thrones
Microsoft Office
Или, например, у Вас может возникнуть необходимость отобразить часть текста прописными буквами, а часть большими буквами.
Для примера возьмем параграф из Википедии:
Слово компьютер является производным от английских слов to compute, computer, которые переводятся как «вычислять», «вычислитель» (английское слово, в свою очередь, происходит от латинского computāre — «вычислять»). ПЕРВОНАЧАЛЬНО В АНГЛИЙСКОМ ЯЗЫКЕ ЭТО СЛОВО ОЗНАЧАЛО ЧЕЛОВЕКА, ПРОИЗВОДЯЩЕГО АРИФМЕТИЧЕСКИЕ ВЫЧИСЛЕНИЯ С ПРИВЛЕЧЕНИЕМ ИЛИ БЕЗ ПРИВЛЕЧЕНИЯ МЕХАНИЧЕСКИХ УСТРОЙСТВ. В дальнейшем его значение было перенесено на сами машины, однако современные компьютеры выполняют множество задач, не связанных напрямую с математикой.
Именно для того, чтобы поменять регистр текста (из прописных в заглавные, из заглавных в прописные) и используется свойство text-transform.
12.1.1. У text-transform есть 5 значений:
text-tranform: capitalize (Первая Буква Каждого Слова Будет Большой)
text-tranform: lowercase (все буквы будут маленькими)
text-transform: uppercase (ВСЕ БУКВЫ БУДУТ БОЛЬШИМИ)
text-transform: none (отменяет предыдущие форматирование)
text-tranform: inherit (наследует форматирование родителя)
Рассмотрим как это работает на практике. Представим, что у нас есть следующая HTML-страница:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>My Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>A paragraph with some TEXT</p>
</body>
</html>
Как видите, стили у нас подключены отдельным файлом style.css
Итак, пока никаких CSS-стилей мы не задали, текст в теге <p> будет выглядеть так:
ПРИМЕР 1
Чтоб сделать весь текст в теге <p> заглавными буквами, напишите в файле style.css следующее:
p {
text-transform: uppercase;
}
Получим:
ПРИМЕР 2
Чтоб сделать все буквы прописными, напишите следующее:
p {
text-transform: lowercase;
}
Получим:
ПРИМЕР 3
Чтобы сделать все первые буквы заглавными, напишите:
p {
text-transform: capitalize;
}
Получим:
Обратите внимание: слово, написанное полностью заглавными буквами, не изменилось.
ПРИМЕР 4
Теперь протестируем text-transorm: none.
Но в таком виде его тестировать не интересно. Давайте представим, что у нас еще есть h1:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>My Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Heading</h1>
<p>A paragraph with some TEXT</p>
</body>
</html>
Поменяем и файл со стилями. Давайте зададим text-transform: uppercase **для всего **body:
body {
text-transform: uppercase;
}
В итоге получим:
Но что если мы не хотим, чтобы текст параграфа** <p>** не менялся? Пишем:
body {
text-transform: uppercase;
}
p {
text-transform: none;
}
Получаем:
ПРИМЕР 5
А теперь представим, что у нас есть несколько параграфов:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>A paragraph with some TEXT</p>
<p>A paragraph with some TEXT</p>
<p>A paragraph with some TEXT</p>
</body>
</html>
Допустим, для родительского тега body у нас задан один стиль, а для самих параграфов - другой:
body {
text-transform: uppercase;
}
p {
text-transform: none;
}
В итоге сейчас это выглядит так:
Но что если мы хотим, чтобы один из параграфов имел стиль родителя? Например, мы хотим его выделить таким образом?
Давайте сделаем следующее - допишем ему text-transform: inherit:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>A paragraph with some TEXT</p>
<p style="text-transform: inherit;">A paragraph with some TEXT</p>
<p>A paragraph with some TEXT</p>
</body>
</html>
Получим:
ИТОГО:
Хотите, чтобы текст отображался ЗАГЛАВНЫМИ БУКВАМИ - используйте:
text-transform: uppercase;
Хотите, чтобы текст отображался прописными буквами - используйте:
text-transform: lowercase;
Хотите, чтобы Каждое Слово Было С Большой Буквы (чаще применяется в английском) - используйте:
text-transform: capitalize;
Хотите отменить предыдущий стиль text-transform (заданный вами или кем-то другим) - используйте:
text-transform: none;
Хотите взять такой же text-transform как и у родительского элемента - используйте:
text-transform: inherit;
Надеемся, данная статья была Вам полезна! Читайте дальше наши статьи или приходите учиться к нам на курсы по Front-End. Детальнее о наших курсах у нас на сайте здесь.