CSS Front-End

Text-transform в CSS

Данная статья написана командой Vertex Academy.
Это одна из статей из нашего Самоучителя по HTML&CSS.
Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

Привет! В этой статье мы продолжим говорить об изменениях шрифтов с помощью CSS, а именно поговорим о том, как работает свойство text-transform.

За что отвечает text-transform

Можно заметить, что часто заголовки пишутся прописными буквами. А в английском языке в названиях (например, книг, сериалов и пр.) первые буквы всех слов прописные:

General Electric
Game of Thrones
Microsoft Office

Или, например, у Вас может возникнуть необходимость отобразить часть текста прописными буквами, а часть большими буквами.

Для примера возьмем параграф из Википедии:

Слово компьютер является производным от английских слов to compute, computer, которые переводятся как «вычислять», «вычислитель» (английское слово, в свою очередь, происходит от латинского computāre — «вычислять»). ПЕРВОНАЧАЛЬНО В АНГЛИЙСКОМ ЯЗЫКЕ ЭТО СЛОВО ОЗНАЧАЛО ЧЕЛОВЕКА, ПРОИЗВОДЯЩЕГО АРИФМЕТИЧЕСКИЕ ВЫЧИСЛЕНИЯ С ПРИВЛЕЧЕНИЕМ ИЛИ БЕЗ ПРИВЛЕЧЕНИЯ МЕХАНИЧЕСКИХ УСТРОЙСТВ. В дальнейшем его значение было перенесено на сами машины, однако современные компьютеры выполняют множество задач, не связанных напрямую с математикой.

Именно для того, чтобы поменять регистр текста (из прописных в заглавные, из заглавных в прописные) и используется свойство text-transform.

У 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>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

A paragraph with some TEXT

</body>

</html>

Как видите, стили у нас подключены отдельным файлом style.css

Итак, пока никаких CSS-стилей мы не задали, текст в теге будет выглядеть так:

ПРИМЕР 1

Чтоб сделать весь текст в теге заглавными буквами, напишите в файле style.css следующее:

p {
    text-transform: uppercase;
}

p {

text-transform: uppercase;

}

Получим:

ПРИМЕР 2

Чтоб сделать все буквы прописными, напишите следующее:

p {
    text-transform: lowercase;
}

p {

text-transform: lowercase;

}

Получим:

ПРИМЕР 3

Чтобы сделать все первые буквы заглавными, напишите:

p {
    text-transform: capitalize;
}

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>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Heading</h1>

A paragraph with some TEXT

</body>

</html>

Поменяем и файл со стилями. Давайте зададим text-transform: uppercase для всего body:

body {
    text-transform: uppercase;
}

body {

text-transform: uppercase;

}

В итоге получим:

Но что если мы не хотим, чтобы текст параграфа  не менялся? Пишем:

body {
    text-transform: uppercase;
}

p {
    text-transform: none;
}

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>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

A paragraph with some TEXT

</body>

</html>

Допустим, для родительского тега body у нас задан один стиль, а для самих параграфов - другой:

body {
    text-transform: uppercase;
}

p {
    text-transform: none;
}

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>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

A paragraph with some TEXT

A paragraph with some TEXT

A paragraph with some TEXT

</body>

</html>

Получим:

ИТОГО:

Хотите, чтобы текст отображался ЗАГЛАВНЫМИ БУКВАМИ - используйте:

text-transform: uppercase;

1	text-transform: uppercase;

Хотите, чтобы текст отображался прописными буквами - используйте:

text-transform: lowercase;

1	text-transform: lowercase;

Хотите, чтобы Каждое Слово Было С Большой Буквы (чаще применяется в английском) - используйте:

text-transform: capitalize;

1	text-transform: capitalize;

Хотите отменить предыдущий стиль text-transform (заданный вами или кем-то другим) - используйте:

text-transform: none;

1	text-transform: none;

Хотите взять такой же text-transform как и у родительского элемента - используйте:

text-transform: inherit;

1	text-transform: inherit;

Надеемся, данная статья была Вам полезна! Читайте дальше наши статьи или приходите учиться к нам на курсы по Front-End. Детальнее о наших курсах у нас на сайте здесь.