Работа с текстом в CSS

Каждый, кто сталкивается с CSS, должен понимать, как работают теги и свойства для работы с текстом. На первый взгляд кажется, что это очень просто, но стоит углубиться в вопросы font-weight, и у новичков может возникнуть особенно много вопросов. Рассмотрим детальнее форматирование текста css, и на что нужно обратить внимание.

Основные свойства CSS

CSS  – незаменимый инструмент для оформления страниц, написанных на HTML. Он позволяет разграничить содержание веб-страницы от элементов ее оформления. В каскадных таблицах стилей достаточно много свойств, но действительно значимых не так уж и много. Их всех объединяет простой синтаксис в виде показателей *свойство: значение”, которые располагаются внутри фигурных скобок нужного селектора. Вот примеры основных свойств, которые используются каждый день для работы с текстом CSS:

1. font-size. Используется для изменения размера шрифта. Высота букв может задаваться константами, пунктами, пикселями, процентами и другими соотношениями.
2. color. Определяет цвет текста. Его можно установить, написав после двоеточия зарезервированное или шестнадцатеричное название цвета, RGB значение.
3. background-color. Заливает нужный участок текста цветом, словно он выделен маркером. Варианты значений для background-color аналогичны со свойством color.
4. font-style. Этим свойство задается стиль шрифта в зависимости от выбранного значения, который может принимать значение обычного, курсивного или наклонного (и отличающегося от курсивного) написания.
5. font-weight. С этим свойством можно не волноваться, как изменить жирность шрифта в CSS. Значение можно задать двумя способами. Первый – буквенное, чаще всего используется обычное (нормал) и полужирное (болд). Второй способ – числовой, 100-900, чем цифра выше, тем более жирное начертание.
6. font-family. Определяет список шрифтов, которые будут использоваться при стилизации текста. Могут использоваться как названия шрифтов, так и названия групп шрифтов.

Довольно часто стили текста CSS называют тегами, используя привычное название из HTML. Хоть это по сути разные термины с отличным друг от друга синтаксисом, но для простоты понимания на это зачастую не обращают внимания. 

CSS – теги для текста

Для форматирования текста существует много различных тегов CSS. Расстояние между буквами определяется свойством letter-spacing. Значение можно задавать в пикселях, дюймах, пунктах и других вариантах. Допускается даже отрицательное значение, но предварительно нужно убедиться, что текст получается читабельным.

Также полезным будет text-align. Этот тег выравнивает текст в зависимости от указанного значения:

• left;
• center;
• right;
• justify.

Последний отвечает за выравнивание по ширине строки. При этом тег line-height нужен для того, чтобы задать высоту нашей строчки, а padding и margin – для формирования отступов вокруг элемента.

Хотите знать больше про CSS? Как работать с каскадными таблицами, чтобы у веб-сайтов и приложений получался удобный и красивый дизайн? На эти и другие вопросы вы сможете получить ответы в Компьютерной школе Hillel.

По материалам: https://itwiki.dev/ru