Перевод на русский язык (ru)
Здравствуйте, будущие веб-разработчики! Сегодня мы погружаемся в чудесный мир свойств текста CSS. Как ваш добрый соседский компьютерный учитель, я с радостью провожу вас по этому пути. Помните, как обучение езде на велосипеде, овладение CSS требует практики, но я обещаю, что это будет весело!
CSS Текст - Цвет текста
Давайте начнем с чего-то красочного! В CSS мы можем легко изменить цвет текста, используя свойство color. Это как иметь магическую кисть для ваших слов!
p {
color: blue;
}Эта простая строка сделает весь ваш текст в абзацах синим. Но подождите, есть еще! Вы можете использовать 이름 цвета, HEX-коды или значения RGB:
h1 {
color: #FF5733; /* HEX-код для ярко-оранжевого */
}
span {
color: rgb(50, 205, 50); /* Значение RGB для limemerald */
}CSS Текст - Выравнивание текста
Следующий пункт, давайте поговорим о выравнивании текста. Это как arranging книги на полке - вы можете поставить их слева, справа или по центру.
.left-align {
text-align: left;
}
.right-align {
text-align: right;
}
.center-align {
text-align: center;
}
.justify-align {
text-align: justify;
}Значение justify особенно интересно. Оно равномерно распределяет текст по строке, как газеты располагают свои колонки.
CSS Текст - Вертикальное выравнивание
Вертикальное выравнивание немного сложнее, но не волнуйтесь! Оноаще всего используется с inline или table-cell элементами.
img {
vertical-align: middle;
}
td {
vertical-align: top;
}Это свойство может принимать значения, такие как top, middle, bottom, sub, super, и даже конкретные длины!
CSS Текст - Направление
В нашем глобальном селении нам часто приходится работать с языками, которые читаются справа налево. Здесь на помощь приходит свойство direction:
.arabic-text {
direction: rtl; /* Справа налево */
}
.english-text {
direction: ltr; /* Слева направо */
}CSS Текст - Декоративные элементы текста
Хотите добавить немного стиля вашему тексту? Текстовые декорации - ваш друг! Это как добавить ювелирные изделы к вашим словам.
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
.no-decoration {
text-decoration: none;
}Совет профессионала: Используйте text-decoration: none;, чтобы убрать стандартное подчеркивание у ссылок!
CSS Текст - Пропуск декоративных элементов
Это свойство определяет, какие части текста должны быть пропущены при применении текстовых декораций.
p {
text-decoration: underline;
text-decoration-skip: spaces;
}Это подчеркнет текст, но пропустит пробелы, создав более опрятный вид.
CSS Текст - Пропуск декоративных элементов над "чернилами"
Это занятно! Оно решает, следует ли рисовать текстовые декорации поверх или под "чернилами" (то есть сам текст).
p {
text-decoration: underline;
text-decoration-skip-ink: auto;
}С значением auto браузер будет聪明的 пропустить下来了 букв, таких как 'g' или 'y'.
CSS Текст - Трансформация текста
Хотите кричать ВЕСЬМА БОЛЬШИМИ БУКВАМИ или шептать в нижнем регистре? Трансформация текста - это ваше PROPERTY!
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}Значение capitalize особенно мило - оно делает первую букву каждого слова заглавной.
CSS Текст - Подчеркивание текста
Текстовое подчеркивание позволяет добавлять знаки подчеркивания к вашему тексту. Это как добавить маленькие точки или圈子 над или под вашим текстом.
.emphasis {
text-emphasis: filled;
text-emphasis-position: over right;
}Это добавляет filled кружки сверху и справа от каждого символа.
CSS Текст - Отступ текста
Помните, когда ваш учитель просил вас сделать отступ первой строки каждого абзаца? CSS может сделать это автоматически!
p {
text-indent: 50px;
}Этот отступ первой строки каждого абзаца на 50 пикселей.
CSS Текст - Интерлиньяж
Интерлиньяж позволяет вам корректировать пространство между символами. Это как дать вашим буквам немного личного пространства!
h1 {
letter-spacing: 5px;
}Это добавляет 5 пикселей пространства между каждой буквой в вашем заголовке.
CSS Текст - Интервал между словами
Похоже на интерлиньяж, но для целых слов:
p {
word-spacing: 10px;
}Это добавляет 10 пикселей дополнительного пространства между каждым словом.
CSS Текст - Обработка пробелов
Свойство white-space определяет, как обрабатывать пробелы внутри элемента.
.nowrap {
white-space: nowrap;
}
.pre {
white-space: pre;
}
.pre-wrap {
white-space: pre-wrap;
}nowrap предотвращает перенос текста на следующую строку, pre сохраняет пробелы, как они написаны в HTML, и pre-wrap сохраняет пробелы, но позволяет перенос.
CSS Текст - Слияние пробелов
Это свойство является частью свойства white-space, о котором мы только что говорили. Оно определяет, как сжимаются пробелы.
CSS Текст - Тень текста
Хотите добавить глубину вашему тексту? Тень текста придет на помощь!
h1 {
text-shadow: 2px 2px 5px red;
}Это добавляет красную тень справа и внизу на 2 пикселя с размытием 5 пикселей.
CSS Текст - Разрыв строки
Свойство line-break specifies how to break lines within words.
p {
line-break: strict;
}This enforces stricter line-breaking rules.
CSS Text - Word Break
Similar to line-break, but for breaking words at the end of lines:
p {
word-break: break-all;
}This allows words to be broken at any character.
CSS Текст - Связанные свойства
Вот быстрый справочный стол с всеми свойствами, о которых мы говорили:
| Property | Description |
|---|---|
| color | Устанавливает цвет текста |
| text-align | Определяет горизонтальное выравнивание текста |
| vertical-align | Устанавливает вертикальное выравнивание inline или table-cell ящика |
| direction | Определяет направление текста/направление письма |
| text-decoration | Определяет декорацию, добавляемую к тексту |
| text-decoration-skip | Определяет, какие части элемента должны быть пропущены при применении текстовых декораций |
| text-decoration-skip-ink | Определяет, как надчеркивания и подчеркивания рисуются при проносе над знаками ascender и descender |
| text-transform | Управляет регистром текста |
| text-emphasis | Применяет знаки подчеркивания к тексту |
| text-indent | Определяет отступ первой строки в текстовом блоке |
| letter-spacing | Увеличивает или уменьшает пространство между символами в тексте |
| word-spacing | Увеличивает или уменьшает пробелы между словами |
| white-space | Определяет, как обрабатывать пробелы внутри элемента |
| text-shadow | Добавляет тень к тексту |
| line-break | Определяет, как и когда разрывать строки |
| word-break | Определяет правила разрыва слов в конце строк |
И вот и все! Теперь у вас есть знания, чтобы стилизовать ваш текст countless ways. Помните, ключ к овладению CSS - это практика. Так что вперед, экспериментируйте и создавайте красивые, читаемые веб-страницы. Счастливого кодирования!
Credits: Image by storyset