Оформление текста в CSS

Положительное восприятие веб-сайта пользователем зависит не только от смыслового содержания текста, но и от его оформления.

Существует вероятность, что человек не станет читать даже очень грамотно и хорошо написанный, но не оформленный или плохо оформленный текст, поэтому следует уделить особое внимание вопросу удобочитаемости.

CSS предоставляет довольно обширные возможности, позволяющие кардинально изменить внешний вид вашего текста с помощью различных цветовых решений, размера строки и т.д.

Визуальное оформление текста в CSS

В CSS оформление текста осуществляется с помощью параметра text-decoration , который может принимать следующие значения:

• blink — мерцающий текст;
• none — значение по умолчанию, оформление отсутствует;
• overline — линия расположена над текстом;
• underline — подчеркнутый линией текст;
• line-through — текст, зачеркнутый линией;
• inherit — в данном случае text-decoration наследует значение родительского элемента.

Текст ссылки Текст ссылки Текст ссылки Текст ссылки Текст ссылки

В окне браузера данный пример будет выглядеть следующим образом:

Цвет текста в CSS

Изменить цвет текста, расположенного внутри HTML элементов можно с помощью CSS свойства color .

Способы задания могут быть следующими:

• При помощи названия цвета (например, red, green, blue, white);
• При помощи значения RGB (например, rgb(221,102,212));
• При помощи шестнадцатеричного цветового значения (например, #ff00aa).

    
Текст 1 Текст 2 Текст 2
 
Текст 2 Текст 2 Текст 2
 
Текст 3 Текст 3 Текст 3
  

Визуальное оформление, реализованное с помощью приведенного выше кода, выглядит следующим образом:

Размер текста в CSS

CSS свойство font-size позволяет задать размер текста.

Единицами измерения могут быть:

• Пиксели (например, 14px);
• Пункты (например, 20pt);
• Проценты (например, 50%);
• Ключевые слова small, large и т.п.

  p p.big 
Текстовая строка размером 14 пикселей.
 

Визуальное представление приведенного выше кода выглядит следующим образом:

Отступ текста в CSS
Изначальная концепция HTML не предполагала отступы, выделяя абзацы лишь вертикальным расстоянием, а множество пробелов перед строкой браузер преобразует в один.
Однако в CSS данная проблема решается с помощью свойства text-indent .
   
Текст без отступа.
 
Текст с отступом слева 110 пикселей
 
 
Визуальное отображение кода:
 
 
Жирный и наклонный текст в CSS
 
С помощью атрибута CSS font-weight определяется жирность шрифта.
 
Данный атрибут может принимать следующие значения:
 
 
normal — обычный;
 
lighter — более светлый;
 
bold — жирный;
 
от 100 до 900, где 100 — самый тонкий шрифт, а 900 — самый толстый.
 
 
    
текст текст текст текст
 
текст текст текст текст
 
текст текст текст текст
  
 
В браузере данный код выглядит следующим образом:
 
 
Тень текста в CSS
 
CSS свойство text-shadow позволяет задать тексту тень. Данное свойство содержит в себе целый перечень эффектов: цвет, смещение вправо, смещение вниз, радиус пятна тени.
 
В том случае, если цвет тени не задан, используется цвет текста.
 
    
Текст с тенью
 
 
Представленный выше код в браузере выглядит следующим образом:
 
 
Выравнивание текста в CSS
 
Выравнивание текста по горизонтали задаётся свойством text-align , которое может принимать следующие значения:
 
 
left — выравнивание по левому краю;
 
right — выравнивание по правому краю;
 
center — выравнивание по центру;
 
justify — выравнивание по всей ширине.
 
 
С помощью свойства vertical-align выполняется выравнивание текста по вертикали.
 
Данное свойство может принимать следующие значения:
 
 
baseline — выравнивание линии элемента по базовой линии родительского элемента;
 
middle — выравнивание средней элементной точки по базовой линии родительского элемента;
 
text-top — выравнивание верхней части элемента по верху шрифта родительского элемента;
 
top — выравнивание верха элемента по верхней части самого высокого элемента строки;
 
sub, super — отображение элемента в виде нижнего и верхнего индексов соответственно.
 
 
   
 
Текст 1
 
Текст 2
 
Текст 3
 
 
 
 
Таким образом, возможности CSS позволяют произвести практически любые манипуляции с оформлением текста на веб-сайте для улучшения его восприятия пользователями.
 
Желаем удачи в изучении веб-дизайна!
 
Источник
 
Как оформить текст: 11 главных CSS-свойств
 
У любого текстового элемента есть свои стили по умолчанию. Заголовки крупные и жирные, текст в абзацах нормального размера и начертания, а ссылки обычно синие и подчёркнутые снизу.
 
Каждый из этих элементов можно стилизовать по-своему, например, поменять размер, начертание или цвет. Давайте посмотрим, как это сделать.
 
💡 Для каждого стиля мы подготовили пример в CodePen — попробуйте поменять значения и посмотрите, как изменится текст.
 
Сменить шрифт
 
Чтобы изменить шрифт элемента, используйте CSS-свойство font-family :
 
Первым указывается шрифт, который вы хотите добавить. После него через запятую идут альтернативные шрифты. Например, если на компьютере у посетителя сайта не установлен шрифт Roboto, браузер использует шрифт Arial.
 
Изменить цвет и размер текста
 
Цвет текста задаётся с помощью свойства color . Оно принимает значения в различных форматах: можно написать название цвета ( red , blue ), шестнадцатеричное значение ( #ff0000 , #00f ) или функцию rgb() , чтобы задать цвет с помощью трёх чисел.
 
Размер текста меняется свойством font-size . Оно принимает значения в пикселях ( px ), процентах ( % ) и других единицах измерения.
 
Добавить жирность
 
Свойство font-weight задаёт жирность текста. Оно принимает два вида значений.
 
Численные: от 100 до 900 . Например, 400 — обычный шрифт, а 700 — полужирный.
 
Ключевые слова: normal — обычный шрифт, bold — полужирный, bolder — жирнее, чем текущий, lighter — менее жирный шрифт по сравнению с текущим.
 
See the Pen Untitled by Feizerr on CodePen.
 
Сделать текст курсивным
 
Для этого есть свойство font-style . По умолчанию у него стоит значение normal , то есть текст обычный, без курсива. Чтобы поменять начертание, используйте:
 
Оба значения создают похожий эффект — текст выглядит курсивным, но есть и разница. Если очень упростить, то italic и oblique немного отличаются в начертании. А ещё не у всех шрифтов есть специальная курсивная версия. В таких случаях oblique делает текст похожим на курсив.
 
See the Pen Как сделать курсивный текст by Feizerr on CodePen.
 
Преобразовать текст
 
Свойство text-transform меняет регистр текста. Оно принимает значения:
 
 
none — без изменений, значение по умолчанию;
 
uppercase — все буквы становятся прописными;
 
lowercase — все буквы становятся строчными;
 
capitalize — первая буква каждого слова находится в верхнем регистре.
 
 
See the Pen Как изменить text-decoration by Feizerr on CodePen.
 
Добавить подчёркивание
 
Свойство text-decoration добавляет тексту декоративные эффекты:
 
 
overline создаёт линию над текстом,
 
line-through делает текст зачёркнутым,
 
underline добавляет подчёркивание.
 
 
По умолчанию у свойства стоит значение none — без оформления.
 
See the Pen Как добавить подчёркивание by Feizerr on CodePen.
 
Создать тень
 
Свойство text-shadow добавляет тексту тень. Оно принимает значение в таком формате:
 
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) /*смещение по горизонтали, смещение по вертикали, радиус размытия, цвет тени */ 
 
See the Pen Как добавить тень тексту by Feizerr on CodePen.
 
Выровнять текст
 
Свойство text-align выравнивает текст по горизонтали. Оно принимает значения:
 
 
left — влево;
 
right — вправо;
 
center — по центру;
 
justify — выравнивание по ширине.
 
 
See the Pen Как выровнять текст by Feizerr on CodePen.
 
Изменить высоту строки и межбуквенное расстояние
 
Свойство line-height устанавливает высоту строки, указывая множитель относительно размера шрифта. Свойство letter-spacing управляет расстоянием между символами.
 
See the Pen Как изменить высоту строки by Feizerr on CodePen.
 
Нюансы
 
 
У некоторых шрифтов нет жирного и курсивного варианта.
 
Свойство text-shadow делает текст эффектным, но слишком насыщенные тени могут усложнить чтение текста или создать плохой контраст.
 
Слишком большое или маленькое значение line-height и letter-spacing может нарушить интервалы между буквами и строками.
 
При изменении размера шрифта ( font-size ) следует учитывать, что очень мелкий и крупный текст может плохо отображаться или стать нечитабельным.
 
 
Рекомендации
 
Тестируйте вёрстку. Проверяйте, как шрифты отображаются на разных устройствах и браузерах. Некоторые шрифты могут отображаться по-разному на разных платформах.
 
Используйте стили осторожно. Смена регистра, курсив и жирный текст помогают выделить важный контент, расставляют акценты в тексте. Используйте их умеренно, потому что крупные фрагменты текста, написанного капсом или курсивом, лишь отвлекают пользователя. Акценты теряются, и текст выглядит неаккуратно.
 
Помните о доступности. Используйте подходящие значения font-weight — слишком мелкий или крупный текст плохо читается. Подбирайте контрастные цвета для текстов.
 
Используйте несколько шрифтов. Некоторые шрифты могут быть недоступны, поэтому важно указывать альтернативные варианты.
 
Соблюдайте авторское право. У каждого шрифта есть лицензия, которая описывает, в каких случаях можно использовать шрифт, а в каких нельзя. Например, какие-то варианты нельзя использовать в коммерческих проектах, а какие-то предназначены только для веба или печати. Поэтому нужно внимательно читать лицензию перед загрузкой понравившегося шрифта — вдруг он не подходит под ваши цели.
 
Материалы по теме
 
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
 
Источник