Урок 10. Оформление текста. Что нужно знать о верстке текста

С разметкой текста уже познакомились в одной из статей курса. Из этой статьи знаем, какие основные теги используются для определения контента. Следующий этап заключается в знакомстве с правилами оформления текста через стили css. Помимо базовых тегов, абзацей, заколовкой, списков часто используется тег <span>. По сути этот тег не несет смысловой нагрузки, он строчный, является частью текста. Используется для того, чтобы стилистически выделить несколько слов или строк.
Например :

<span class="red-text">...</span>

Верстка текста, работа со шрифтами

Для задания размера шрифта, его стиля, жирности, вида используются следующие CSS свойства:

• font-size. Размер шрифта, принимает значения в абсолютных и относительных единицах. К абсолютным относятся пиксели (font-size : 14px;) и пункты (font-size : 15pt;). К относительным проценты (font-size : 70%;) и em. EM обычно примерно равен длине буквы М в шрифте данного вида.
• font-weight. Жирность шрифта, его начертание. Принимает как целочисленные значения (100,200,300..900), отражающие степень жирности, так и два стандартных normal и bold. Как правило, большая часть браузеров не различает степени жирности, отражает только два последних варианта начертания.
• font-style. Свойство необходимое для задания нормального начертания (normal) или курсива (italic).
• font-family. Используется для задания семейства шрифта или задания названия конкретно используемого шрифта, который объявлен в начеле или является стандартным. serif —  без засечек, sans-serif —  с засечками. В примере указаны сначала название шрифта, потом его альтернативные варианты через запятую. Если первый шрифт не будет найден, применятся следующие за ним:

  body { font-family: "PT Sans", "Arial", serif; }

Закажите у нас создание сайта под ключ!
Верстка текста, цвет, высота строки, подчеркивание

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

• color. Цвет текста, задается с помощью RGB-формата (color : rgb(255, 0, 0);), шестнадцатеричного кода, который можно посмотреть в фотошопе для любого цвета (color : #000;) и с помощью ключевых слов (color : red; color : blue;). Чаще всего используют шестандцатириный код.
• text-decoration. Стандартное свойство при работе со ссылками, все ссылки по-умоланию подчеркнуты. Чтобы отменить подчеркивание или задать свой вариант в качестве значений свойства принимаются. text-decoration : none; (отменяем все изменения), text-decoration : underline; (нижнее подчеркивание), text-decoration : overline; (верхнее подчеркивание), text-decoration : line-through; (зачеркнутый текст)
• text-transform. Работа с регистром в строке. иногда необходимо стилистически изменить регистр текст. Часто это необходимо делать при работе с меню или нестандартным текстом. text-transform : lowercase; (делает все символы строными), text-transform : uppercase; (делает все символы прописными), text-transform : capitalize; (начинает каждое слово с прописной), text-transform : none; (отменяет все значения)
• white-space. Управление пробелами в тексте, принимает следующие значения. nowrap — текст без переносов; pre — как в исходном коде; pre-wrap — как pre, только появляются переносы, если никак не умещается в блок текст; normal — стандартное отображение.
• text-align. Выравнивание текста внутри родительского контейнера. left — по левому краю; right — по правому краю; center — по центру;  justify — по ширине.
• line-height. Используется для регулирование межстрочных интервалов и, очевидно, высоты строки. Значения задаются в пикселях (line-height : 22px;), процентах (line-heigh t: 100%;), множителях, ключевых словах (line-height : normal;).
  

  Закажите у нас создание сайта под ключ!
  Наши контакты:
  

  ✉️E-mail: info@template-web.org
  ?Telegram: @s2d4w