Articles
Введение в CSS
Свойства CSS, связанные с текстом

Свойства CSS, связанные с текстом

Эта статья объясняет свойства CSS, связанные с текстом.

Вы можете узнать о том, как использовать и писать свойства text-align, text-decoration и text-transform.

YouTube Video

Создание HTML для предварительного просмотра

css-text.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>Text-Related CSS Properties</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-text.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>Text-Related CSS Properties</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Typography (Text-Related)</h2>
20        </header>
21        <article>
22            <h3>text-align</h3>
23            <section>
24                <header><h4>text-align: left</h4></header>
25                <section class="sample-view">
26                    <p class="text-align-left">This is left-aligned text.</p>
27                </section>
28                <header><h4>text-align: center</h4></header>
29                <section class="sample-view">
30                    <p class="text-align-center">This is center-aligned text.</p>
31                </section>
32                <header><h4>text-align: right</h4></header>
33                <section class="sample-view">
34                    <p class="text-align-right">This is right-aligned text.</p>
35                </section>
36                <header><h4>text-align: justify</h4></header>
37                <section class="sample-view">
38                    <p class="text-align-justify">This is justified text, meaning it will be spaced so that the left and right edges are aligned evenly.</p>
39                </section>
40            </section>
41        </article>
42        <article>
43            <h3>text-decoration</h3>
44            <section>
45                <header><h4>text-decoration: underline</h4></header>
46                <section class="sample-view">
47                    <p class="text-decoration-underline">This text has an underline.</p>
48                </section>
49                <header><h4>text-decoration: overline</h4></header>
50                <section class="sample-view">
51                    <p class="text-decoration-overline">This text has an overline.</p>
52                </section>
53                <header><h4>text-decoration: line-through</h4></header>
54                <section class="sample-view">
55                    <p class="text-decoration-line-through">This text has a line-through.</p>
56                </section>
57                <header><h4>text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; text-decoration-thickness: 2px;</h4></header>
58                <section class="sample-view">
59                    <p class="text-decoration-custom-underline">This text has a custom underline (color and style).</p>
60                </section>
61            </section>
62        </article>
63        <article>
64            <h3>text-transform</h3>
65            <section>
66                <header><h4>text-transform: none</h4></header>
67                <section class="sample-view">
68                    <p class="text-transform-none">This is no transformation applied.</p>
69                </section>
70                <header><h4>text-transform: capitalize</h4></header>
71                <section class="sample-view">
72                    <p class="text-transform-capitalize">this is a sentence in lowercase but will be capitalized.</p>
73                </section>
74                <header><h4>text-transform: uppercase</h4></header>
75                <section class="sample-view">
76                    <p class="text-transform-uppercase">This text will be transformed to uppercase.</p>
77                </section>
78                <header><h4>text-transform: lowercase</h4></header>
79                <section class="sample-view">
80                    <p class="text-transform-lowercase">THIS TEXT WILL BE TRANSFORMED TO LOWERCASE.</p>
81                </section>
82            </section>
83        </article>
84    </main>
85</body>
86</html>

Типография (связанное с текстом)

Свойство text-align 

 1/* Text align examples */
 2.text-align-left {
 3    text-align: left; /* Align text to the left */
 4}
 5
 6.text-align-center {
 7    text-align: center; /* Center align text */
 8}
 9
10.text-align-right {
11    text-align: right; /* Align text to the right */
12}
13
14.text-align-justify {
15    text-align: justify; /* Justify text (aligns text to both left and right edges) */
16}

text-align - это свойство CSS, используемое для указания горизонтального выравнивания текста и встроенных элементов. Обычно оно используется для выравнивания текста параграфов или заголовков по левому краю, правому краю или центру. Оно играет важную роль в компоновке веб-страниц и форматировании текста.

Основные значения свойства text-align

left (выравнивание по левому краю) 
1p {
2    text-align: left;
3}
  • left выравнивает текст по левому краю (это метод выравнивания по умолчанию для многих языков).
right (выравнивание по правому краю) 
1p {
2    text-align: right;
3}
  • right выравнивает текст по правому краю. Это особенно эффективно для языков, которые пишутся справа налево, таких как арабский и иврит.
center (выравнивание по центру) 
1p {
2    text-align: center;
3}
  • center выравнивает текст по центру. Часто используется для заголовков и титульных надписей.
justify (выравнивание по ширине) 
1p {
2    text-align: justify;
3}
  • justify выравнивает левый и правый края строк равномерно, создавая аккуратный вид. Используется в макетах, таких как газеты и журналы.
start (выравнивание по началу) 
1p {
2    text-align: start;
3}
  • start выравнивает текст в зависимости от начальной позиции. Для языков, пишущихся слева направо, это работает так же, как выравнивание по левому краю.
end (выравнивание по концу) 
1p {
2    text-align: end;
3}
  • end выравнивает текст по конечной позиции. Для языков, пишущихся слева направо, это работает так же, как выравнивание по правому краю.

Использование и примеры свойства text-align

Заголовок с использованием выравнивания по центру
  • Выравнивание по центру часто используется для заголовков веб-страниц и документов. Это выглядит привлекательно и создает визуально сбалансированный дизайн.
Выравнивание абзацев по левому или правому краю
  • Абзацы текста обычно выравниваются по левому краю по умолчанию, но для определенных дизайнов может использоваться выравнивание по правому краю или по центру.
Равномерное выравнивание текста
  • При выравнивании с использованием justify каждая строка текста ровно выравнивается по левому и правому краям. Это полезно для макетов в стиле газет или журналов.

Резюме

  • text-align — это CSS-свойство, используемое для горизонтального выравнивания текста или встроенных элементов.
  • Оно поддерживает различные варианты макета, такие как выравнивание по левому краю, по правому краю, по центру и по ширине.
  • Выбор подходящего выравнивания в зависимости от макета и целей дизайна — ключ к достижению читабельного и красивого дизайна.

Давайте эффективно использовать выравнивание текста как часть вашего дизайна с помощью свойства text-align.

Свойство text-decoration 

 1/* Text decoration examples */
 2.text-decoration-underline {
 3    text-decoration: underline;
 4}
 5
 6.text-decoration-overline {
 7    text-decoration: overline;
 8}
 9
10.text-decoration-line-through {
11    text-decoration: line-through;
12}
13
14.text-decoration-custom-underline {
15    text-decoration: underline;
16    text-decoration-color: red;
17    text-decoration-style: wavy;
18    text-decoration-thickness: 2px;
19}

text-decoration — это CSS-свойство, используемое для добавления подчеркиваний, линий над текстом, зачеркнутого текста или пользовательских линий к тексту. Используя это свойство, вы можете сделать оформление текста более декоративным или визуально акцентированным.

Объяснение:

  • Класс text-decoration-underline добавляет подчеркивание к тексту.
  • Класс text-decoration-overline добавляет линию над текстом.
  • Класс text-decoration-line-through добавляет зачеркивание к тексту.
  • Класс text-decoration-custom-underline является примером пользовательской настройки цвета, стиля и толщины подчеркивания.

Ключевые значения text-decoration

none 
1p {
2    text-decoration: none;
3}
  • Указание значения none удалит любое оформление текста. Используется, например, чтобы убрать подчеркивание у ссылок.
underline 
1p {
2    text-decoration: underline;
3}
  • Указание значения underline добавит подчеркивание под текстом. Может использоваться для ссылок или для выделения определенных частей текста.
overline 
1p {
2    text-decoration: overline;
3}
  • Указание значения overline добавит линию над текстом. Применяется для изменения внешнего вида или для особого оформления.
line-through 
1p {
2    text-decoration: line-through;
3}
  • Указание значения line-through добавит перечеркивание текста. Применяется для указания исправлений.
blink（点滅）
  • blink – это значение, которое заставляет текст мигать, но оно фактически не используется, так как больше не поддерживается большинством браузеров.

Расширенные настройки text-decoration

text-decoration позволяет настроить следующие параметры:

text-decoration-color 
1p {
2    text-decoration: underline;
3    text-decoration-color: red;
4}
  • Свойство text-decoration-color позволяет указать цвет подчеркивания или перечеркивания. По умолчанию цвет совпадает с цветом текста, но вы можете добавить визуальный акцент, выбрав другой цвет.
text-decoration-style 
 1p.dshed {
 2    text-decoration: underline;
 3    text-decoration-style: solid;
 4}
 5p.double {
 6    text-decoration: underline;
 7    text-decoration-style: double;
 8}
 9p.dotted {
10    text-decoration: underline;
11    text-decoration-style: dotted;
12}
13p.dashed {
14    text-decoration: underline;
15    text-decoration-style: dashed;
16}
17p.wavy {
18    text-decoration: underline;
19    text-decoration-style: wavy;
20}
  • Свойство text-decoration-style позволяет указать стиль декоративных линий. Доступные значения включают в себя следующие:.
    • solid (По умолчанию, сплошная линия)
    • double (двойная линия)
    • dotted (пунктирная линия)
    • dashed (штриховая линия)
    • wavy (Волнистая линия)
**text-decoration-thickness 
1p {
2    text-decoration: underline;
3    text-decoration-thickness: 2px;
4}
  • Свойство text-decoration-thickness позволяет указать толщину декоративных линий. Вы можете настроить это, используя единицы измерения, например, 2px или 0.1em.

Итог:

  • text-decoration — это свойство для добавления декоративных линий к тексту, таких как подчеркивания или перечеркивания.
  • С помощью text-decoration-color, text-decoration-style и text-decoration-thickness возможна более точная настройка.
  • Часто используется для выделения ссылок, важного текста или в качестве элемента дизайна.

Используя text-decoration, вы можете добавить тонкие акценты или выделение текста.

text-transform свойство 

 1/* Text transform examples */
 2.text-transform-none {
 3    text-transform: none;
 4}
 5
 6.text-transform-capitalize {
 7    text-transform: capitalize;
 8}
 9
10.text-transform-uppercase {
11    text-transform: uppercase;
12}
13
14.text-transform-lowercase {
15    text-transform: lowercase;
16}

text-transform — это CSS-свойство для преобразования регистра текста. Это свойство позволяет управлять форматом отображения текста, указанного в HTML, автоматически изменяя регистр введенного пользователем или существующего текста.

Объяснение:

  • Класс text-transform-none отображает текст без изменений относительно оригинала.
  • Класс text-transform-capitalize преобразует первую букву каждого слова в заглавную.
  • Класс text-transform-uppercase преобразует весь текст в заглавные буквы.
  • Класс text-transform-lowercase преобразует весь текст в строчные буквы.

Основные значения свойства text-transform

none 
1p {
2    text-transform: none;
3}
  • Указание none оставляет текст без изменений.
capitalize 
1/* "this is a sentence" -> "This Is A Sentence" */
2p {
3    text-transform: capitalize;
4}
  • Указание capitalize преобразует первую букву каждого слова в заглавную. Границы слов определяются пробелами или знаками препинания.
uppercase 
1/* "hello world" -> "HELLO WORLD" */
2p {
3    text-transform: uppercase;
4}
  • Указание uppercase преобразует весь текст в заглавные буквы.
lowercase 
1/* "HELLO WORLD" -> "hello world" */
2p {
3    text-transform: lowercase;
4}
  • Указание lowercase преобразует весь текст в строчные буквы.
full-width
  • Указание full-width преобразует текст в широкий формат символов. Это обычно используется как специальный стиль для работы с кандзи или катаканой, но мало какие браузеры это поддерживают.

Итог:

  • text-transform — это удобное CSS-свойство для изменения регистра текста.
  • Оно часто используется для создания визуальной согласованности в заголовках, меню навигации и текстах форм.
  • Это полезно, когда вы хотите отображать текст в определенном стиле вне зависимости от пользовательского ввода.

Используя это свойство, вы можете легко манипулировать текстом, сохраняя визуальную согласованность.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Свойства CSS, связанные со шрифтамиСвойства CSS, связанные с интервалом текста