Установка цвета для текста в CSS. Способы представления цветов
В первой части книги, в некоторых примерах мы уже демонстрировали, как установить цвет текста в CSS. Здесь нет ничего сложного: вам понадобится свойство color и значение того цвета, которым вы желаете окрасить текст.
В нашем примере значение #211C18 означает шестнадцатеричный код цвета. Если вы уже знакомы с шестнадцатеричной системой счисления, то можете пропустить чтение следующего абзаца. Также далее мы расскажем о других способах представления цветов в веб – с помощью цветовых моделей (RGB, HSL) и ключевых слов. Эта информация будет полезна новичкам и рекомендуется к прочтению.
Шестнадцатеричные цвета (hex)
Шестнадцатеричная система счисления (hexadecimal, hex) основывается на числе 16. Для записи шестнадцатеричного значения используется 16 символов: арабские цифры от 0 до 9 и первые буквы латинского алфавита (A, B, C, D, E, F). Цвет в шестнадцатеричном формате записывается в виде трех двузначных чисел от 00 до FF (перед ними обязательно ставится символ решетки #), что соответствует трем компонентам: Red, Green, Blue (цветовая модель RGB). Иными словами, запись цвета можно представить как #RRGGBB , где первая пара символов определяет уровень красного, вторая – уровень зеленого, третья – уровень синего цвета. Результирующий цвет является сочетанием этих трех цветов.
Сокращенная запись hex-цветов
Некоторые шестнадцатеричные значения цветов можно записать сокращенно. Для этого следует превратить запись вида #RRGGBB в #RGB . Это можно сделать в том случае, когда в hex-числе имеется три пары одинаковых символов.
Сокращенная форма записи встречается довольно часто, и для вашего ознакомления мы приведем несколько примеров сокращений. К слову, hex-значения цветов не чувствительны к регистру – вы можете использовать как прописные, так и строчные буквы, всё зависит от вашего желания и вкуса.
Примеры сокращенной записи hex-цветов:
| HEX-код | Сокращенная запись |
|---|---|
| #FFDD66 | #FD6 |
| #8833FF | #83F |
| #333333 | #333 |
| #cccccc | #ccc |
Цветовая модель RGB
Второй способ указания цвета в CSS – использовать десятичные значения RGB (Red, Blue, Green). Для этого необходимо записать после свойства color ключевое слово rgb , а затем в скобках и через запятую – три числа в диапазоне от 0 до 255, каждое из которых означает интенсивность красного, зеленого и синего цветов (r, g, b). Чем больше число, тем более интенсивен цвет. К примеру, чтобы получить ярко-зеленый цвет, нужно записать:
А вот желтовато-горчичный оттенок имеет такое значение:
color: rgb(94, 81, 3); /* ниже – тот же цвет, записанный в шестнадцатеричном виде: */ color: #5E5103;
Значение черного цвета записывается как (0, 0, 0) , а белого – (255, 255, 255) . Также допускается указывать эти значения в процентах. Так, число 255 соответствует 100%, следовательно, белый цвет можно задать следующим образом:
color: rgb(100%, 100%, 100%);
Где искать значения цветов
Возможно, у вас возник вопрос: откуда же брать все эти значения цветов? Существует множество графических редакторов и онлайн-сервисов, с помощью которых можно подбирать цвета и строить цветовые схемы. Одна из наиболее популярных программ, в которой можно выбрать подходящий цвет и получить его значение RGB, hex и не только – Adobe Photoshop. В качестве альтернативы есть специальные сайты, на которых можно легко подобрать не только цвет, но и целую цветовую схему. Отличный пример – сервис Adobe Color CC.
Цветовая модель RGBA
Задать цвет в формате RGBA можно почти так же, как и в RGB. Отличие RGBA от RGB заключается в наличии альфа-канала, который отвечает за прозрачность цвета. Задается прозрачность с помощью числа в диапазоне от 0 до 1, где 0 соответствует полной прозрачности, а 1 , наоборот, означает полную непрозрачность. Промежуточные значения вроде 0.5 позволяют задать полупрозрачный вид (допускается сокращенная запись, без нуля, но с точкой – .5 ). Например, чтобы сделать текст цветным и слегка прозрачным, нужно записать после свойства color ключевое слово rgba и значение цвета:
Минусом RGBA является то, что его не поддерживает браузер Internet Explorer версии 8 и ранее. Специально для IE8 можно применить следующее решение:
Первое свойство в примере предназначено для браузера IE8, который отобразит текст нужным цветом, но без прозрачности. А те браузеры, которые понимают RGBA, применят к элементу второе свойство, с прозрачностью.
Цветовые модели HSL (HSLA)
Задавать цвет в CSS можно также с помощью координат цветовой модели HSL (Hue, Saturation, Lightness – тон, насыщенность, светлота). Записывается это так:
Первое число в скобках означает тон (hue) и задается в градусах (диапазон чисел от 0 до 359). Вам будет легко понять, почему используются именно градусы, если вы вспомните, как выглядит цветовой круг:
Второе и третье числа в скобках означают насыщенность (saturation) и светлоту (lightness) соответственно. Их значения устанавливаются в процентах от 0 до 100. Чем ниже значение насыщенности, тем более приглушенным становится цвет. Значение saturation, равное нулю, приведет к серому цвету, при этом неважно, какое значение имеет hue. С помощью значения lightness (светлота) можно указать яркость цвета. Низкие значения приводят к темным оттенкам цвета, высокие – к светлым. Значение 100% для lightness означает белый цвет, 0% – черный.
Цветовая модель HSLA работает почти так же, как и HSL, но в ней, аналогично с RGBA, есть альфа-канал, с помощью которого можно задавать прозрачность цвета, указывая необходимое значение в диапазоне от 0 до 1:
HSL и HSLA поддерживаются всеми браузерами, кроме Internet Explorer версии 8 и ранее.
Стандартные цвета HTML
Еще один способ представления цветов в веб – это ключевые слова, при помощи которых можно указать цвет для элемента. Пример:
Существует 16 стандартных цветов, которые можно записать в значении свойства color :
| Ключевое слово цвета | HEX-код | RGB |
|---|---|---|
| red | #FF0000 | 255, 0, 0 |
| maroon | #800000 | 128, 0, 0 |
| yellow | #FFFF00 | 255, 255, 0 |
| olive | #808000 | 128, 128, 0 |
| lime | #00FF00 | 0, 255, 0 |
| green | #008000 | 0, 128, 0 |
| aqua | #00FFFF | 0, 255, 255 |
| teal | #008080 | 0, 128, 128 |
| blue | #0000FF | 0, 0, 255 |
| navy | #000080 | 0, 0, 128 |
| fuchsia | #FF00FF | 255, 0, 255 |
| purple | #800080 | 128, 0, 128 |
| white | #FFFFFF | 255, 255, 255 |
| silver | #C0C0C0 | 192, 192, 192 |
| gray | #808080 | 128, 128, 128 |
| black | #000000 | 0, 0, 0 |
Эти цвета поддерживают все браузеры. Кроме них есть еще порядка 130 дополнительных ключевых слов для различных оттенков цветов. Полную таблицу этих цветов можно увидеть в справочнике W3C.
Использование таких ключевых слов допустимо, но есть риск, что какое-нибудь слово не воспримется браузером. Поэтому рекомендуется вместо ключевых слов записывать шестнадцатеричный код цвета.
Итоги
В CSS цвет текста задается с помощью свойства color , а его значение можно записать несколькими способами – в шестнадцатеричном (hex) виде, в формате RGB или HSL либо указав ключевое слово. Во избежание неправильного отображения цвета, заданного при помощи ключевого слова, лучше указывать его hex-значение.
Также есть возможность задать элементу прозрачность с помощью альфа-канала (форматы RGBA и HSLA). При этом стоит учитывать, что браузер IE8 и его ранние версии не поддерживают форматы RGBA, HSL и HSLA.
Далее в книге вы узнаете, как задать размер шрифта CSS.
CSS-свойство color
CSS-свойство color позволяет задавать цвет текста и фона элемента на веб-странице.
⭐ Поддержка браузерами свойства color
Синтаксис
selector
selector — это селектор элемента, к которому нужно применить стили, color — название свойства, а value — значение цвета.
Наследование
Свойство color является наследуемым, что означает, что дочерние элементы наследуют цвет текста от своих родительских элементов, если оно не переопределено у них самих.
Значения свойства color
Значение может быть установлено для любого элемента HTML, включая текст, ссылки, заголовки и другие элементы. Оно может быть задано как внутри тега HTML, так и внутри файла CSS.
Подробно про цветовые форматы рассказали в статье.
Свойство color может принимать следующие значения.
Название цвета
Значение свойства color может быть задано названием цвета на английском языке, например, red — красный, blue — синий и так далее.
RGB — Red, Green, Blue
Модель цвета, основанная на комбинации красного, зелёного и синего цветов. Пример: rgb(255, 0, 0) , где первое число представляет значение красного цвета, второе число — зелёного цвета, а третье число — синего цвета. Каждое значение может быть в диапазоне от 0 до 255 .
RGBA — Red, Green, Blue, Alpha
Расширение RGB, которое, кроме трёх цветов, включает значение прозрачности. Пример: rgba(255, 0, 0, 0.5) , где первые три числа — значения RGB, а последнее число — значение прозрачности, которое может быть в диапазоне от 0 — полностью прозрачный до 1 — полностью непрозрачный.
HSL — Hue, Saturation, Lightness
Модель цвета, основанная на оттенке — hue, насыщенности — saturation и яркости — lightness цвета. Пример: hsl(0, 100%, 50%) , где первое число — значение оттенка в градусах, второе число — значение насыщенности в процентах, а третье число — значение яркости в процентах.
HSLA — Hue, Saturation, Lightness, Alpha
Расширение HSL, которое также включает в себя значение прозрачности. Пример: hsla(0, 100%, 50%, 0.5) , где первые три числа — значения HSL, а последнее число — значение прозрачности, которое может быть в диапазоне от 0 — полностью прозрачный до 1 — полностью непрозрачный.
HEX — Hexadecimal
Формат цвета, основанный на шестнадцатеричном коде цвета. Пример: #FF0000 , где первые две цифры обозначают значение красного цвета в шестнадцатеричном формате от 00 до FF , следующие две цифры обозначают значение зеленого цвета, а последние две цифры обозначают значение синего цвета.
В CSS также существует несколько специальных ключевых слов, которые можно использовать в качестве значения свойства color . Например, transparent означает полностью прозрачный цвет, а currentColor используется для определения текущего цвета элемента.
Примеры использования
Изменение цвета текста:
Этот текст будет с изменённым цветом. .text-color
Изменение цвета фона:
Этот блок будет с изменённым фоновым цветом. .background-color
Изменение цвета границы:
Этот блок будет с изменённым цветом границы. .border-color
Нюансы использования
Контраст. При выборе цвета текста для ссылок, желательно использовать контрастный цвет, который заметно отличается от цвета обычного текста.
Читаемость. При использовании различных стилей текста, например, жирный или курсив, необходимо убедиться, что цвет текста остаётся читаемым и насыщенным.
Восприятие. Цвет текста может влиять на эмоциональное восприятие контента, поэтому необходимо выбирать его в зависимости от цели и настроения страницы.
Материалы по теме
- CSS-свойство position
- CSS-свойство height
- Свойство vertical-align
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Новое в 2023 — text-wrap: balance
В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.
Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .
Вот пример заголовка c text-wrap: balance и без него.
На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.
- 13 ноября 2023
Знакомство с CSS
После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».
CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.
- 1 ноября 2023
Увеличение ссылки при наведении
Задача: плавно увеличить ссылку при наведении.
Решение:
a < display: inline-block; transition: transform 0.3s ease; >a:hover
Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.
Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.
- 13 октября 2023
WOFF больше не нужен
Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.
Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!
Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.
Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :
@font-face
Остался всего один формат. Просто, скажите?
Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?
- IE 11, 10, 9, 8, 7, …
- Chrome 4–35
- Edge 12 и 13
- Safari 3–9.1
- Firefox 2–38
- Opera 22 и ниже
- Android 4.4.4 KitKat и ниже (а это
- Safari на iOS 3.2–9.3
Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3
А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.
С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.
И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.
- 23 сентября 2023
Трясём пароль с помощью CSS
Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.
Вот что получится в итоге:
- 7 сентября 2023
Как сделать тёмную тему на сайте
Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .
HTML
Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.
CSS (styles.css):
Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.
body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text
JavaScript (script.js)
Этот код нужен, чтобы переключать тему при нажатии на кнопку:
document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>); При загрузке страницы по умолчанию будет установлена светлая тема. При нажатии на кнопку «Переключить тему» будет происходить переключение между светлой и темной темой.
- 29 августа 2023
4 способа центрировать текст в CSS
Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.
Метод 1: Flexbox
Flexbox — это один из самых простых и эффективных способов центрирования.
Заворачиваем текст в с классом center-both :
Центрированный текст
.center-both
Метод 2: CSS Grid
HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :
.center-both
Метод 3: позиционирование и Transform
Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А
внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:
.center-both < position: relative; >.center-both p
HTML остается таким же. Вот что получается:
Плохой метод: использование line-height
Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.
.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >Этот метод не подойдет для многострочного текста. Да и вообще мы очень не рекомендуем так делать, это прям совсем для любителей острых ощущений. Потому что вот:
Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.
- 28 августа 2023
Как скруглить рамку. CSS-свойство border-radius
CSS-свойство border-radius помогает скруглить углы элемента. Оно особенно полезно для стилизации кнопок, форм, карточек товаров и других элементов сайта.
- 28 июля 2023
CSS-свойство contain
Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.
Также свойство помогает повысить производительность страницы. Например, браузер понимает, когда при изменении свойств элемента нужно перерисовать страницу, а когда нет.
⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.
Синтаксис
.container
- 14 июля 2023
Как задать позицию и размер элемента. CSS-свойство inset
CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.
Синтаксис
.element
- 13 июля 2023
Изменение свойств текста
В CSS существует множество свойств, позволяющих настраивать текст страницы в самых широких пределах: задавать цвет текста, устанавливать отступы между буквами и словами, задавать стиль текста. Все это предоставляет в руки веб-дизайнера мощный инструмент настройки внешнего вида веб-страницы.
форматированный текст
Стиль этого текста изменен при помощи свойств форматирования текста. В заголовке используются свойства text-align, text-transform и color. У параграфа заданы отступы, выравнивание и расстояние между символами.
Цвет текста
Свойство color используется для определения цвета текста.
Цвет можно задать как
- имя цвета — например, «red»,
- HEX значение — например, «#ff0000»,
- RGB значение — например, «rgb(255,0,0)»,
- HSL значение — например, «hsl(0,100%,50%)»,
Цвет текста страницы по умолчанию определяется в селекторе body.
body < color: blue; >h1
Цвет текста и фона
В следующем примере мы определяем цвет текста при помощи свойства color и цвет фона при помощи свойства background-color :
body < background-color: lightgrey; color: blue; >h1 < background-color: black; color: white; >div
Важно! Высокий контраст очень важен для людей со слабым зрением. Поэтому всегда следите за тем, чтобы между цветом текста и фона (или фонового изображения) был хороший контраст!
Подробнее о цветах рассказывается в главе нашего учебника Как использовать цвета.
Изменение регистра букв текста
Свойство text-transform позволяет изменить регистр букв текста:
- text-transform: capitalize — переводит первые буквы всех слов в верхний регистр.
- text-transform: uppercase — переводит все буквы в верхний регистр.
- text-transform: lowercase — переводит все буквы в нижний регистр.
- text-transform: none — попробуйте сами это значение.
p.uppercase < text-transform: uppercase; >p.lowercase < text-transform: lowercase; >p.capitalize
Выравнивание и направление текста
К этому разделу относятся следующие свойства:
- text-align
- text-align-last
- direction
- unicode-bidi
- vertical-align
Выравнивание текста
Свойство text-align выравнивает текст внутри элемента по горизонтали.
Принимает значения left (выравнивание по левому краю), right (выравнивание по правому краю), center (выравнивание по центру) или justify (равномерное выравнивание по ширине).
В следующем примере текст выравнивается по центру, по левому краю и по правому краю. Выравнивание по левому краю устанавливается по умолчанию, если направление текста слева направо. Если направление текста справа налево, то по умолчанию устанавливается выравнивание по правому краю.
h1 < text-align: center; >h2 < text-align: left; >h3
Когда свойству text-align установлено значение justify, то строки растягиваются таким образом, чтобы их ширина была одинаковой (как в газетах и журналах):
Свойство text-align-last определяет выравнивание последней строки текста.
p.a < text-align-last: right; >p.b < text-align-last: center; >p.c
Направление текста
Свойства direction и unicode-bidi используются для изменения направления текста элемента:
Вертикальное выравнивание
Свойство vertical-align определяет вертикальное выравнивание элемента.
Определим вертикальное выравнивание изображения в тексте:
img.a < vertical-align: baseline; >img.b < vertical-align: text-top; >img.c < vertical-align: text-bottom; >img.d < vertical-align: sub; >img.e
Декоративное оформление текста
К свойствам декоративного оформления текста относятся
- text-decoration-line
- text-decoration-color
- text-decoration-style
- text-decoration-thickness
- text-decoration
Добавление декоративной линии
Для добавления декоративной линии к тексту используется свойство text-decoration-line . Оно может принимать следующие значения:
- overline — помещает горизонтальную линию над текстом
- line-through — помещает горизонтальную линию через текст, создавая эффект перечеркивания
- underline — помещает горизонтальную линию под текст, создавая эффект подчеркивания. Не стоит использовать, так как обычно пользователи предполагают, что подчеркнутый текст — ссылка.
Совет: Вы можете комбинировать несколько значений, например, одновременно можно использовать значения overline и underline для определения нижнего и верхнего подчеркивания текста.
h1 < text-decoration-line: overline; >h2 < text-decoration-line: line-through; >h3 < text-decoration-line: underline; >p
Примечание: Не рекомендуется подчеркивать текст, если это не ссылка, так как это может сбить с толку пользователя сайта.
Определение цвета декоративной линии
Чтобы определить цвет декоративной линии используется свойство text-decoration-color .
h1 < text-decoration-line: overline; text-decoration-color: red; >h2 < text-decoration-line: line-through; text-decoration-color: blue; >h3 < text-decoration-line: underline; text-decoration-color: green; >p
Определение стиля декоративной линии
Чтобы определить стиль декоративной линии используется свойство text-decoration-style .
h1 < text-decoration-line: underline; text-decoration-style: solid; >h2 < text-decoration-line: underline; text-decoration-style: double; >h3 < text-decoration-line: underline; text-decoration-style: dotted; >p.ex1 < text-decoration-line: underline; text-decoration-style: dashed; >p.ex2 < text-decoration-line: underline; text-decoration-style: wavy; >p.ex3
Определение толщины декоративной линии
Чтобы определить толщину декоративной линии используется свойство text-decoration-thickness .
h1 < text-decoration-line: underline; text-decoration-thickness: auto; >h2 < text-decoration-line: underline; text-decoration-thickness: 5px; >h3 < text-decoration-line: underline; text-decoration-thickness: 25%; >p
Короткая форма записи
Свойство text-decoration позволяет объединить следующие свойства:
- text-decoration-line (обязательно)
- text-decoration-color
- text-decoration-style
- text-decoration-thickness
h1 < text-decoration: underline; >h2 < text-decoration: underline red; >h3 < text-decoration: underline red double; >p
Совет: Все ссылки в HTML по умолчанию имеют подчеркивание. Иногда можно увидеть ссылки, у которых нет подчеркивания. Чтобы убрать подчеркивание у ссылки, используют свойство text-decoration: none; .
Разбивка текста
В этом разделе вы узнаете о следующих свойства, позволяющих форматировать текст:
- text-indent
- letter-spacing
- line-height
- word-spacing
- white-space
Текстовый отступ
Свойство text-indent используется, чтобы определить отступ первой строки текстового абзаца.
Значением может быть число в любых единицах измерения:
Расстояние между символами
Свойство letter-spacing используется, чтобы определить расстояние между символами в тексте.
Значением может быть число в любых единицах измерения, либо ключевое слово normal.
В следующем примере показано, как увеличить или уменьшить расстояние между символами:
h1 < letter-spacing: 5px; >h2
Высота строки
Свойство line-height используется, чтобы определить расстояние между строками, не влияя на размер шрифта. Значением может быть число (которое будет множителем размера шрифта. Например, «2» означает, что высота строки в два раза больше размера шрифта.), либо проценты, либо слово normal
p.small < line-height: 0.8; >p.big
Расстояние между словами
Свойство word-spacing используется, чтобы определить расстояние между словами в тексте.
Значением может быть число в любых единицах измерения, либо ключевое слово normal.
В следующем примере показано, как увеличить или уменьшить расстояние между словами:
p.one < word-spacing: 10px; >p.two
Пробельные символы
Свойство white-space определяет, как обрабатываются пробельные символы внутри элемента. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один.
- normal Значение по умолчанию. Последовательность пробельных символов сворачивается в один пробел, а переносы строк устанавливаются автоматически.
- nowrap Последовательность пробельных символов сворачивается в один пробел. Текст никогда не переносится на новую строку и выводится в одну линию. Перенос происходит только по тегу
. - pre Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Действует аналогично тегу .
- pre-line В тексте последовательность пробельных символов сворачивается в один пробел, текст автоматически переносится на следующую строку, если он не помещается в заданную область.
- pre-wrap В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку.
- inherit Значение наследуется от родительского элемента.
- initial Устанавливает значение по умолчанию.
Тень у текста
Свойство text-shadow добавляет к тексту тень.
При самом простом использовании определяется только горизонтальная (2px) и вертикальная (2px) тень:
Text shadow effect!
Можно добавить цвет:
Text shadow effect!
Также, можно добавить размытие:
Text shadow effect!
Еще примеры эффекта тени у текста
Text shadow effect!
Text shadow effect!
CSS свойства форматирования текста
| Свойство | Описание |
|---|---|
| color | Определяет цвет текста |
| letter-spacing | Устанавливает расстояние между символами в тексте |
| line-height | Устанавливает межстрочный интервал текста |
| text-align | Устанавливает горизонтальное выравнивание текста |
| text-align-last | Устанавливает выравнивание последней строки текста |
| text-decoration | Добавляет оформление текста в виде подчеркивания, перечеркивания, линии над текстом в одной декларации |
| text-decoration-color | Устанавливает цвет линии, которая добавляется через свойство text-decoration |
| text-decoration-line | Устанавливает тип оформления текста — подчеркивание, перечеркивание, линия над текстом |
| text-decoration-style | Устанавливает стиль декоративной линии оформления текста |
| text-intend | Устанавливает величину отступа первой строки текстового блока |
| text-transform | Управляет преобразованием текста элемента в заглавные или прописные символы |
| verical-align | Выравнивает элемент по вертикали относительно своего родителя или окружающего текста |
| white-space | Устанавливает, как отображать пробелы между словами |
| word-spacing | Устанавливает расстояние между словами |
| direction | Определяет направление текста |
| unicode-bidi | Вместе со свойством direction определяет, как должен располагаться текст используемого языка |
| text-shadow | Добавляет тень к тексту |
Как изменить цвет текста в css
В CSS за цвет текста отвечает свойство color . Оно может применяться к любому элементу и принимать цвет в одном из форматов:
- Шестнадцатеричная форма. Например, #0d6efd , #d63384 . Для подбора цвета и его значения используйте онлайн-сервисы, например HTML COLOR CODES
- Текстовое название: red , green , blue . Полный список находится на сайте W3C
- Формат RGB: rbg(255, 87, 51) . Первым значением указывается количество красного цвета, вторым значением количество синего и третьим значением количество зелёного
class="text-white">Я белый текст .text-white color: white; > Свойство наследуется, то есть если его указать на целый блок, то весь текст в нём будет указанного цвета
class="text-orange"> Я оранжевый текст И я оранжевый текст .text-orange color: rgb(255, 87, 51); >