Стили текста в html: Стили текста | Основы верстки контента

04.05.2023 Facebook Twitter LinkedIn Google+ Разное

Стили текста | Основы верстки контента

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

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

  • Цвет текста;
  • Расположение текста;
  • Отступы от текста;
  • Размер текста.

Цвет текста

Каждый текст на странице имеет свой цвет. Будь то заголовки или кричащий баннер, который рассказывает о скидке. Любой текст имеет цвет. В CSS используется свойство color, чтобы управлять им. С его помощью можно установить любой цвет для разных участков текста.

В качестве значения свойство принимает цвет в разных моделях цветового пространства. Распространенной является модель RGB. Она указывает, сколько красного, зеленого и синего используется в цвете. На первых порах вы можете использовать онлайн-сервисы, которые укажут выбранный цвет в этой модели. Одним из таких сервисов является HTML Colors Codes.

Первое, что настраивают разработчики во время верстки макета — цвет основного текста страницы. Так как свойство color является наследуемым, то его можно устанавливать для тега <html> или <body>. С помощью каскадности этот цвет будет применяться ко всему тексту, если не указано иного значения. Выберем неглубокий черный цвет, который записывается в модели RGB как #333333.

Интересно: в макетах редко встречается максимально черный цвет, который записывается как #000000. Дело в том, что такой цвет не встречается в природе и человеческому глазу непривычен

body {
  color: #333;
}

Установка цвета текста — непростая задача. Помимо решения дизайнерской задачи и согласования текста с остальными цветовыми решениями, необходимо не забывать про доступность текста. Какой бы цвет ни был выбран, его прочтение должно быть комфортным для пользователя. Для этого текст должен быть контрастным относительно фона, на котором он лежит. Светло-серый текст на белом фоне будет трудно прочитать. Поэтому на белом фоне используют черный или близкий к черному цвет для основного текста.

Контраст в меньшей степени относится к заголовкам и небольшим выделениям внутри текста. Они выделяются на общем фоне по другим характеристикам: насыщенность, размер, границы, самостоятельный фон. Такой текст тоже должен обладать достаточным контрастом, при этом он может иметь значения ниже, чем основной текст.

Для проверки контраста текста можно использовать веб-инспектор Chrome DevTools. Выбрав любой цвет на панели Styles браузер автоматически выведет коэффициент контраста текста. Он обозначен как Contrast ratio. Если контраст находится в рамках допустимого, то будет отмечен зеленой галочкой. В противном случае будет показан красный круг.

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

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

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

  • left — выравнивание текста по левому краю. Это значение устанавливается по умолчанию.
  • center
    — выравнивание текста по центру.
  • right — выравнивание текста по правому краю.
  • justify — выравнивание текста по ширине. Данное значение выравнивает текст так, чтобы поместить слова строго от начала блока до его конца. При этом возможны изменения размеров пробелов между словами.

Важно: использование значения justify является плохой практикой. Данный прием используется в оформлении книг, где есть возможность отредактировать текст так, чтобы выравнивание по ширине не создавало больших пробелов между словами. В условиях веб-страницы такое почти невозможно.

Свойство text-align также является наследуемым. Если установить его для какого-либо блока, то весь текст внутри него будет выровнен в соответствии со значением свойства.

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

Используя CSS можно гибко настраивать насыщенность шрифта. Насыщенность используется для выделения важного участка текста и придает ему «вес» относительно соседних элементов. Для управления насыщенностью в CSS используется правило

font-weight. Оно принимает следующие значения:

  • Значения от 100 до 900 с шагом 100
  • lighter — сверхтонкое начертание. Делает текст менее насыщенным, чем текущее значение
  • normal — значение по умолчанию. Соответствует числовому значению 400
  • bold — жирное начертание текста. Соответствует числовому значению 700
  • bolder — сверхжирное начертание. Делает текст насыщеннее, чем текущее значение

Для многих шрифтов доступны только значения normal и bold. Это связано с тем, сколько создатели шрифта включат различных начертаний.

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

Управлять размером текста можно с помощью свойства font-size. Текст с большим размером шрифта первым бросается в глаза, поэтому заголовки, помимо выравнивания по центру, имеют больший размер шрифта.

Сравните заголовки, которые создаются с помощью тегов <h2></h2> и <h3></h3>. Основное их визуальное отличие — размер текста. Помимо встроенных стилей, мы можем самостоятельно устанавливать размер шрифта. Для этого можно использовать единицы измерения пиксели px. В следующих уроках вы узнаете и о других единицах измерения и как с их помощью можно адаптировать контент.

.small-text {
  font-size: 12px;
}
. normal-text {
  font-size: 16px;
}
.big-text {
  font-size: 30px;
}

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов

Электронная почта *

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

Наши выпускники работают в компаниях:

Свойства текста | htmlbook.ru

С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется тег <font>, задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.

Свойства шрифта

Изменение начертания шрифта и его размера происходит через свойства CSS, которые описаны в табл. 1.

Табл. 1. Атрибуты CSS для управления шрифтами
СвойствоЗначениеОписаниеПример
font-familyимя шрифтаЗадает список шрифтовP {font-family: Arial, serif}
font-style		normal
italic
oblique		Нормальный шрифт
Курсив
Наклонный шрифт		P {font-style: italic}
font-variantnormal
small-caps		Капитель (особые прописные буквы)P {font-variant: small-caps}
font-weightnormal
lighter
bold
bolder
100–900		Нормальная жирность
Светлое начертание
Полужирный
Жирный
100 — светлый шрифт,
900 — самый жирный		P {font-weight: bold}
font-size normal
pt
px
%		 нормальный размер
пункты
пикселы
проценты		 font-size: normal
font-size: 12pt
font-size: 12px
font-size: 120%

В примере 1 показано использование параметров при работе со шрифтами.

Пример 1. Задание свойств шрифта с помощью CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Шрифт</title>
  <style type="text/css"> 
   h2 { 
    font-family: Arial, Helvetica, Verdana, sans-serif; /* Гарнитура шрифта */ 
    font-size: 150%; /* Размер текста */ 
    font-weight: lighter; /* Светлое начертание */ 
   }
  </style>
 </head>
 <body>
   <h2>Заголовок</h2>
  <p>Обычный текст</p>
 </body> 
</html>

Ниже приведен результат данного примера (рис. 1).

Рис. 1. Вид текста после применения стилей

В табл. 2 приведены некоторые стилевые параметры для работы с текстом и результат их применения.

Табл. 2. Результат использования различных параметров шрифтов
ПримерПримерПримерПримерПример
font-family: Verdana, sans-serif; font-size: 120%; font-weight: light font-size: large; font-weight: boldfont-family: Arial, sans-serif; font-size: x-small; font-weight: boldfont-variant: small-capsfont-style: italic; font-weight: bold

Свойства текста

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

Табл. 3. Свойства CSS для управления видом текста
СвойствоЗначениеОписаниеПример
line-heightnormal
множитель
значение
%		Интерлиньяж (межстрочный интервал)line-height: normal
line-height: 1.5
line-height: 12px
line-height: 120%
text-decorationnone
underline
overline
line-through
blink		Убрать все оформление
Подчеркивание
Линия над текстом
Перечеркивание
Мигание текста		text-decoration: none
text-transformnone
capitalize
uppercase
lowercase		Убрать все эффекты
Начинать С Прописных
ВСЕ ПРОПИСНЫЕ
все строчные		text-transform: capitalize
text-alignleft
right
center
justify		Выравнивание текстаtext-align: justify
text-indentзначение
%		Отступ первой строкиtext-indent: 15px;
text-indent: 10%

Ниже, в табл. 4 приведены некоторые параметры текста и результат их применения.

Табл. 4. Результат использования различных параметров текста
Пример: и это все о немПример: текст по центруПример: Это не ссылка, а просто текстПример: отступ первой строкиПример: полуторный межстрочный интервал
text-transform: capitalize text-align:centertext-decoration: underlinetext-indent: 20pxline-height: 1.5

текст

CSS по теме

  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • text-align
  • text-decoration
  • text-transform

стилей HTML

❮ Назад Далее ❯

Атрибут HTML style используется для добавления к элементу стилей, таких как цвет, шрифт, размер и т. д.

Пример

Я красный

Я синий

Я большой

Попробуйте сами » атрибут.

Атрибут стиля HTML имеет следующий синтаксис:

< тэг style=" свойство : значение ; ">

Свойство является свойством CSS. Значение является значением CSS.

Далее в этом руководстве вы узнаете больше о CSS.

Цвет фона

Свойство CSS background-color определяет цвет фона для элемента HTML.

Пример

Установить цвет фона страницы на голубой:

Это заголовок


Это абзац.

Попробуйте сами »

Пример

Установить цвет фона для два разных элемента:

Это заголовок


Это абзац.

Попробуйте сами »

Цвет текста

CSS color свойство определяет цвет текста для элемент HTML:

Пример

Это заголовок


Это абзац.

Попробуйте сами »

Шрифты

Шрифт CSS - свойство семейства определяет используемый шрифт для элемента HTML:

Пример

Это заголовок


Это абзац.

Попробуйте сами »

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

Свойство CSS font-size определяет размер текста для элемент HTML:

Пример

Это заголовок


Это абзац.

Попробуйте сами »

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

Свойство CSS text-align определяет горизонтальное выравнивание текста для HTML element:

Пример

Заголовок по центру


Абзац по центру.

Попробуйте сами »

Резюме главы

  • Используйте атрибут стиля для стилизации элементов HTML
  • Используйте background-color для цвета фона
  • Использовать цвет для цветов текста
  • Использовать семейство шрифтов для текстовых шрифтов
  • Используйте размер шрифта для размеров текста
  • Используйте text-align для выравнивания текста

HTML-упражнения

Проверьте себя с помощью упражнений

Упражнение:

Используйте правильный атрибут HTML и CSS, чтобы установить цвет абзаца на «синий».

Это абзац.

Начать упражнение

❮ Предыдущий Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры 9018
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

4 | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Текст CSS

❮ Предыдущий Далее ❯

CSS имеет множество свойств для форматирования текста.

Стиль этого текста определяется некоторыми свойствами форматирования текста. Заголовок использует свойства text-align, text-transform и color. Абзац имеет отступ, выравнивание и указанное расстояние между символами. Подчеркивание удалено из этого цветного Ссылка «Попробуйте сами».

Попробуйте сами »

Цвет текста

Свойство color используется для установки цвета текста. Цвет определяется:

  • название цвета - например, "красный"
  • шестнадцатеричное значение, например "#ff0000"
  • значение RGB - например, "rgb(255,0,0)"

Полный список возможных значений цветов см. в разделе Значения цветов CSS.

Цвет текста по умолчанию для страницы определяется в селекторе основного текста.

Пример

body {
  цвет: синий;
}

h2 {
  цвет: зеленый;
}

Попробуйте сами »

Цвет текста и цвет фона

В этом примере мы определяем как свойство background-color , так и свойство color :

Пример

body {
  background-color: светло-серый;
  цвет: синий;
}

h2 {
  background-color: black;
  цвет: белый;
}

div {
 цвет фона: синий;
  цвет: белый;
}

Попробуйте сами »

Важно: Высокая контрастность очень важна для людей с проблемы со зрением. Поэтому всегда следите за тем, чтобы контраст между цветом текста и фоновым цветом (или фоновым изображением) — это хорошо!

Свойство цвета текста CSS

Свойство Описание
цвет Задает цвет текста

❮ Предыдущий Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

8 9003 900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.
Comments
Leave Comment