Style text css: Fundamental text and font styling — Learn web development

Начало работы с текстом, цветом и стилем шрифта

Главная/Блог/Учебники и руководства/Основы CSS: Начало работы с текстом, цветом и стилем шрифта

26 августа 2021 г. — 5 мин чтения CSS (каскадные таблицы стилей) — это популярный язык таблиц стилей, используемый для описания документов, написанных на языках разметки, таких как HTML. Мы можем использовать файлы CSS и код CSS для управления стилем, форматированием, макетом и представлением наших веб-страниц. В этом уроке по CSS мы рассмотрим некоторые основы CSS, такие как стиль шрифта, текст и цвет. Давайте начнем!

Мы рассмотрим :

• Текст CSS
• Цвет CSS
• Стиль шрифта CSS
• Подведение итогов и следующие шаги

Текст CSS

Текст CSS включает множество различных свойств для форматирования и стилизации нашего текста. Давайте рассмотрим некоторые полезные свойства текста CSS:

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

Свойство text-decoration позволяет нам добавлять или удалять декоративные элементы из нашего текста. Например, если мы хотим удалить подчеркивание из ссылки, мы можем использовать украшение текста: нет;

значение:

Существуют и другие значения, которые мы можем использовать для украшения нашего текста с помощью CSS, например:

• Зачеркнутый : украшение текста: сквозной;

• Overline : text-decoration: overline;

• Подчеркивание : оформление текста: подчеркивание;

Давайте посмотрим, как они будут выглядеть в HTML-документе:

Преобразование текста CSS

Свойство text-transform позволяет нам изменять буквы в верхнем или нижнем регистре. Мы также можем использовать это свойство, чтобы превратить весь текст в прописные или строчные буквы, или мы можем сделать заглавной первую букву каждого слова в документе.

CSS Text Align

Свойство text-align позволяет установить горизонтальное выравнивание текста. Давайте посмотрим, как выровнять текст по левому краю, по правому краю и по центру:

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

Расстояние между текстом в CSS

Свойства интервала в тексте CSS позволяют нам управлять отступом, интервалом между буквами, расстоянием между словами, пробелами и высотой строки.

text-indent :

letter-spacing :

CSS Text Shadow

text-shadow Свойство позволяет нам добавлять тени к тексту:

Цвет CSS

CSS Свойство Text Color позволяет нам манипулировать такими вещами, как цвет текста и цвет фона, используя цвет и фоновый цвет . В следующем примере мы изменим цвет текста на синий и белый, а цвет фона на серый и черный.

Цветовые значения CSS

Мы можем использовать цветовые коды и значения CSS для управления цветами различных аспектов нашей веб-страницы. Мы также можем использовать значения RGB, значения RGBA, значения HEX, значения HSL и значения HSLA для указания цвета.

Значения RGB

Значения цвета RGB используют rgb() свойство. Свойство RGB принимает три значения. Каждое значение может быть представлено в виде процента или числа от 0 до 255. Первое число представляет красное значение, второе число представляет зеленое значение, а последнее число представляет синее значение. Не каждый браузер поддерживает RGB, поэтому обязательно проверьте его перед использованием.

Значение RGB для красного цвета равно rgb(255,0,0) .

Значения RGBA

Цветовые значения RGBA являются расширением значений RGB, определяющих непрозрачность цвета. Это свойство принимает четыре значения. Первые три значения совпадают со значениями в RGB. Четвертое значение называется альфа-параметр . Это число находится в диапазоне от 0,0 до 1,0.

HEX-значения

Шестнадцатеричные значения цвета представляют собой шестизначное представление цвета.

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

Шестнадцатеричное значение для красного цвета: #FF0000 .

Имена цветов HTML

Существует 140 названий цветов HTML, которые представлены в виде шестнадцатеричных значений. Мы можем использовать эти значения для указания различных цветов на наших веб-страницах.

Значения HSL

Цветовые значения HSL используют оттенок, насыщенность и яркость для определения цвета. Значение оттенка — это степень на цветовом круге, которая может находиться в диапазоне от 0 до 360. Значение насыщенности — это процент, который может находиться в диапазоне от 0 до 100 процентов. Значение яркости — это процент, который может находиться в диапазоне от 0 до 100 процентов.

Значение HSL для красного цвета равно hsl(0, 100%, 50%) .

Значения HSLA

Значения HSLA являются расширением значений HSL, определяющих непрозрачность цвета. Подобно RGBA, HSLA принимает четыре значения, причем последнее значение представляет собой альфа-параметр, указывающий непрозрачность.

Продолжайте изучать CSS бесплатно.

Начните работу с CSS бесплатно с нашей 1-недельной образовательной неограниченной пробной версией. Текстовые схемы обучения Educative легко просматриваются и включают живую среду кодирования, что делает обучение быстрым и эффективным.

Стать разработчиком внешнего интерфейса

Стиль шрифта CSS

Свойство font-style позволяет нам устанавливать различные стили шрифта для нашего текста. Например, мы можем сделать стиль шрифта «обычным», а можем сделать его «курсивным». Давайте посмотрим:

Завершение и следующие шаги

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

Сегодня мы рассмотрели много важной информации о стилях CSS, но еще многое предстоит узнать. Ниже приведены некоторые рекомендуемые темы для рассмотрения:

• Селекторы CSS
• CSS с текстом HTML, тегами HTML и элементами HTML
• Фоновое изображение CSS

Чтобы приступить к изучению этих и других концепций, ознакомьтесь со схемой обучения Educative «Стать фронтенд-разработчиком». На этом пути практического обучения вы освоите HTML, CSS и JavaScript, что позволит вам создавать функциональные веб-сайты и веб-приложения. К концу вы получите ценный шаг в своем путешествии по веб-разработке.

Приятного обучения!

Продолжить чтение о CSS

• SASS для CSS: улучшите свои навыки работы с интерфейсом с помощью препроцессора CSS
• Учебное пособие по CSS Flexbox: как использовать свойства Flexbox
• Руководство по React Bootstrap: обновление приложений React с помощью CSS-фреймворка

НАПИСАН BYErin Schaffer

Стилизация всего текста с помощью одной строки CSS — Cheatsheet

Сокращенная запись шрифта позволяет вам установить почти все свойства, связанные со шрифтом, с помощью одной строки CSS.

В том числе:

• стиль шрифта
• вариант шрифта
• вес шрифта
9 0015 размер шрифта
• высота строки
• семейство шрифтов
• font-stretch — используется не так часто и не будет обсуждаться в этой статье. Если вы их опустите, вся строка будет проигнорирована. Все остальные свойства можно не указывать.

  Будьте осторожны.

  Если вы не укажете свойство, оно будет сброшено до значения по умолчанию. Даже если вы определили это свойство ранее. В том числе в родительский элемент.

  font-kerning и font-size-adjust также будут сброшены этим сокращением, даже если они не могут быть установлены им.

  Порядок свойств допускает некоторую гибкость, но есть несколько правил.

  Тип, вариант и вес

  стиль шрифта , вариант шрифта и вес шрифта должны предшествовать размер шрифта . Однако их индивидуальный порядок не имеет значения.

  Если вы не помните, что делают эти свойства, вот краткое напоминание:

  • в стиле Font -позволяет вам выбрать между обычными , ITALIC и косое стилей Font. Наклонный в основном такой же, как курсив, но использует те же глифы, что и обычный шрифт, только наклонный.
  • вариант шрифта — позволяет выбрать между обычным и малыми заглавными вариантами шрифта.
  • font-weight — позволяет выбрать толщину (толщину) шрифта. Либо используя ключевые слова, такие как обычный , жирный , светлее , жирнее , либо числовое значение от 100 до 900. семья всегда должна быть последней.

    Это может быть ключевое слово или имя шрифта. Если имя шрифта содержит пробелы, оно должно быть заключено в кавычки. Вы также можете указать дополнительные резервные шрифты, разделенные запятыми. Они будут использоваться (слева направо), если предпочитаемый шрифт недоступен.

    Несколько примеров того, как указать семейство шрифтов с запасным вариантом и без него.

    Размер шрифта и высота строки

    размер шрифта и высота строки находятся прямо посередине. После стиль шрифта , вариант шрифта и вес шрифта .