Как задать стиль текста в css

Аватар пользователя Кирилл Маркеев
Кирилл Маркеев
18 октября 2022

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

  • Размер;
  • Цвет;
  • Насыщенность;
  • Выравнивание.

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

Размер текста задается с помощью свойства font-size. В качестве единиц измерения размера мы можем использовать как абсолютные, например, пиксели (px), так и относительные, к которым относятся проценты (%), а также em и rem.

em показывает во сколько раз размер шрифта будет больше, чем у ближайшего вычисленного значения font-size (например, у ближайшего родительского элемента), а rem показывает во сколько раз размер шрифта будет больше, чем размер шрифта у корневого элемента, то есть у <html>.

Цвет текста

Для управления цветом используется свойство color. В качестве значения данное свойство принимает цвет в разных форматах цветового пространства, включая форматы HEX и RGB.

Насыщенность текста

С помощью насыщенности можно выделить нужный нам участок текста. Задать значение насыщенности можно с помощью свойства font-weight, которое принимает следующие значения:

  • normal - значение по умолчанию. Обычное начертание текста
  • bold - жирное начертание текста
  • bolder - сверхжирное начертание
  • lighter - сверхтонкое начертание
  • Числовые значения насыщенности от 100 до 900 с шагом 100.

Выравнивание текста

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

  • left - выравнивание по левому краю страницы. Это значение по умолчанию
  • right - выравнивание по краю страницы
  • center - выравнивание текста по центру
  • justify - выравнивание по ширине.

В качестве пример рассмотрим оформление текста для параграфа:

p {
  color: #333333;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

В этом примере мы задали для текста внутри параграфа неглубокий чёрный текст размером 18 пикселей с жирным начертанием, который мы выровняли по центру.

0 0

Есть что добавить? Зарегистрируйтесь

или войдите в аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Курсы по программированию в Хекслете

Программирование

Веб-разработка

Разработка, верстка и деплой сайтов и веб-приложений, трудоустройство для разработчиков

Frontend-разработка

Разработка внешнего интерфейса сайтов и веб-приложений и верстка

Создание сайтов

Разработка сайтов и веб-приложений на JS, Python, Java, PHP и Ruby on Rails

Backend-разработка

Разработка серверной части сайтов и веб-приложений

Тестирование

Ручное тестирование и автоматизированное тестирование на JS, Python, Java и PHP

Аналитика данных

Сбор, анализ и интерпретация данных на Python

Интенсивные курсы

Интенсивное обучение для продолжающих

DevOps

Автоматизация настройки локального окружения и серверов, развертывания и деплоя

Математика для программистов

Обучение разделам математики, которые будут полезны при изучении программирования

JavaScript

Разработка сайтов и веб-приложений и автоматизированное тестирование на JS

Тест-драйв

Python

Веб-разработка, автоматическое тестирование и аналитика данных на Python

Java

Веб-разработка и автоматическое тестирование на Java

PHP

Веб-разработка и автоматическое тестирование на PHP

Ruby

Разработка сайтов и веб-приложений на Ruby on Rails

Go

Курсы по веб-разработке на языке Go

Верстка

HTML

Современная верстка с помощью HTML и CSS

SQL

Проектирование базы данных, выполнение SQL-запросов и изучение реляционных СУБД

Git

Система управления версиями Git, регулярные выражения и основы командой строки

Бесплатные курсы

Бесплатные курсы по тестированию, дата-аналитике, верстке, программированию на Python, Java, PHP и JavaScript.

Базы данных

Фреймворки