Обработка текста в CSS стилях

Рассмотрим с вами что такое стиль текста в CSS, какими свойствами обладает текст в html и научимся оформлять текст с помощью CSS

Как задать свойства шрифтам с помощью CSS?

Для того, чтобы контент выглядел максимально удобным для восприятия необходимо уделить внимание визуальной подаче текста. Именно CSS обладает огромным потенциалом для управления внешним видом текстовой части. Благодаря каскадным таблицам стиля, а именно так переводится англоязычная аббревиатура Cascading Style Sheets, даётся возможность комплексно изменять шрифт и его размер, цвет букв и фона, а также варьировать на своё усмотрение другие свойства текстового контента.

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

Любое из правил CSS вмещает в себя определение и селектор. Под последним подразумевают тэг, благодаря которому можно задать тот или иной стиль. Определение является по сути, визуальным отображением стиля – конечным результатом применения того или иного тэга.

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

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

селектор { свойство: значение; }

Приведём простой пример CSS правила:

p { color: green; }

Здесь задаётся правило для тэга <p> - подавать текст на странице сайта зелёным цветом. Важно учесть, что на 1 селектор может быть задано не одна, а две и более пар определений.

p { color: green; font-size: 14pt }

В вышеприведенном примере для тэга <p> задано правило подавать текст зеленого цвета в размере шрифта 14 pt. Таким образом можно увидеть 2 пары определения (свойство:значение), которые используются для единственного селектора. В нашем образце примере селектором выступает тэг абзаца <p>.

Далее, если в публикации вы видите термины «свойство» и «значение», следует подразумевать под ними «определение» для «селектора» в CSS правиле.

Шрифт в CSS и его свойства

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

Свойство font-family

p {font-family: Arial, sans-serif}

Если вы не укажете вышеприведенное свойство в файле CSS, интернет-браузер автоматически задаст текст в шрифте, указанном по умолчанию. Чаще всего им является Times New Roman.

Перечень шрифтов в значении font-family нередко вмещает в себя более 1 наименования, которые вносятся через запятую. В случаях, когда название шрифта имеет более 1 слова, между которыми стоит пробел, необходимо обрамлять его кавычками. Они, в свою очередь, могут быть как одинарными, так и двойными.

Интернет-браузер последовательно производит сверку присутствия шрифта из перечня, размещенного на устройстве посетителя сайта. В том случае, когда первый заданный шрифт имеется в перечне, отображается именно он. В противном случае, браузер выполняет проверку на наличие второго и последующих шрифтов из указанного перечня. В ситуациях, когда нет ни одного из заданных шрифтов, браузер автоматически задаёт текст в шрифте, который стоит по умолчанию.
После перечня шрифтов, как правило задают ключевое слово, описывающее желаемый тип шрифта. Например, cursive, serif, monospace, fantasy или sans-serif.

Универсальные (абсолютные) семейства шрифтов

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

  • Декоративный тип: “fantasy”.
  • Курсивный тип: “cursive”.
  • Семейство шрифтов с засечками (антиква) – “serif”. Например, Times New Roman. Впервые появились в эпоху Возрождения. Используются в основном для заголовков, поскольку для всего текста визуально воспринимаются тяжело.
  • Семейство шрифтов с одинаковой шириной каждой буквы или символа, так называемые, моноширинные шрифты – “monospace”. Например, Courier News.
  • Шрифты рубленного типа, лишенные засечек, в целях удобочитаемости: “sans-serif”. Например, Arial и производные от него.

Приведем пример использования:

See the Pen Font-family by pyampa (@pyampa) on CodePen.


Свойство font-style

Значение
normal
italic
oblique
Описание
Нормальный
Курсив
Наклонный
Пример
 p {font-style: oblique;} 



В примере кода, в вышеприведенном образце внедрим стили в тэг, используя атрибут style.

See the Pen Font-style by pyampa (@pyampa) on CodePen.


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

Свойство font-variant

Значение
normal
small-caps
Описание
Устанавливает капитель (особые прописные буквы)
Пример
 p {font-variant: small-caps;} 



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

See the Pen Font-variant by pyampa (@pyampa) on CodePen.


Свойство font-weight

Значение
normal
lighter
bold
bolder
100-900
Описание
Нормальная жирность
Светлое начертание
Полужирный
Жирный
Жирность от 100 до 900
Пример
 p {font-weight: bolder;} 



Для того, чтобы задать уровень насыщенности того или иного шрифта, используют свойство font-weight. Чтобы задать насыщенность, необходимо применять специальные ключевые слова: normal и bold. Соответственно, “normal” задаёт начертание стандартной насыщенности, а “bold” – усиленное начертание, другими словами – полужирное.

Диапазон установки значения находится в пределах от минимума в 100 до максимального 900. Шаг увеличения – 100. Соответственно, наиболее светлое ненасыщенное начертание будет со значением 100, а наиболее жирное – со значением 900. Стандартный уровень начертания, именуемый normal, имеет значение 400, а привычный пользователям редактора Word, полужирный стандартный текст – значение 700.

Чаще всего, определить необходимый уровень насыщенности шрифтов, современные браузеры не в состоянии. Именно поэтому они переключают отображение текста между тремя значениями: lighter, bold, normal. Однако в подавляющем большинстве случаев происходит ограничение на отображение текста в одном из двух видов: жирный bold и стандартный normal.
Изменить интенсивность жирности шрифтов, в зависимости от уровня насыщенности шрифта родительского в ту или иную сторону, позволяя значения bolder и lighter.

See the Pen Font-weight by pyampa (@pyampa) on CodePen.


Свойство font-size

Значение
normal
pt
px
%
Описание
Нормальный размер
Пункты
Пикселы
Проценты
Пример
 p {font-size: normal;} 



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

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

  • Крайне малый – “xx-small”.
  • Малый - “small”.
  • Средний (задаётся по умолчанию) - “medium”.
  • Большой - “large”.
  • Очень большой – “x-large”.
  • Огромный - “xx-large”.

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

Для того, чтобы изменить размер шрифта в зависимости от родительского размера, применяют следующий набор значений (констант), являющийся более кратким:

  • “larger” – для увеличения шрифта в зависимости от родительского размера;
  • “smaller” – для уменьшения размера шрифта, исходя из имеющегося размера родительского.

See the Pen Font-size by pyampa (@pyampa) on CodePen.


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

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

Свойство line-height

Значение
normal
Множитель
Значение
%
Описание
Межстрочный интервал (интерлиньяж)
Пример
 p {line-height: normal;} 



Данное свойство меняет ширину интервала между текстовыми строками. Размеры междустрочного интервала, в большинстве случаев, зависят от размеров самого шрифта и его вида. По умолчанию, данное свойство задаётся автоматически, браузером. Не допускается значение междустрочного интервала ниже нуля.

See the Pen Line-height by pyampa (@pyampa) on CodePen.


При задавании значения в % указывается высота используемого шрифта.

Свойство text-decoration

Значение
none
underline
overline
line-through
blink
Описание
Убрать все оформление
Подчеркивание
Линия над текстом
Перечеркивание
Мигание текста
Пример
 p {text-decoration: line-through;} 


Зачастую, по умолчанию, браузеры задают подчеркивание ссылок в тексте. Убрать подобное можно с помощью свойства на примере ниже.

See the Pen Text-decoration by pyampa (@pyampa) on CodePen.


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

Свойство text-transform

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

Значение
none
capitalize
uppercase
lowercase
Описание
Убрать все эффекты
Начинать С Прописных
ВСЕ ПРОПИСНЫЕ
все строчные
Пример
 p {text-transform: uppercase;} 


Пример использования:

See the Pen Text-transform by pyampa (@pyampa) on CodePen.


Вы можете сравнить визуальное отображение текстов, содержащихся в html коде с тем, что отображается в окне вашего браузера.

Свойство text-align

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

Значение
left
right
center
justify
Описание
Выравнивание текста
Пример
 p {text-align: right;} 


Значения text-align

  • Центральное выравнивание – “center”. Применяется для заголовков. Для основной части текста, практически не используется, поскольку читать такой текст не очень комфортно.
  • Выравнивание по обоим краям окна одновременно, другими словами, выравнивание по ширине – “justify”. Достигается путём заполнения промежутков между словами пробелами, которые устанавливает автоматически сам браузер.
  • Выравнивание по левой стороне – “left”. В настоящее время задаётся автоматически по умолчанию. Правая часть текста, в большинстве случаев, располагается своеобразной «лесенкой», исходя из длины строки.
  • Выравнивание по правой стороне – “right”. Аналогичная привязка выравнивания к правому краю создаёт неровный левый край текста. Имеет место в табличных текстовых блоках.

Пример использования этого свойства будет совмещён с примером работы следующего свойства.

Свойство text-indent

Данное свойство предназначено для того, чтобы задать отступ начальной строки в текстовом блоке. К примеру, для отступа в абзаце <p>. Допустимо значение свойства меньше нуля, при котором происходит выступ строки в абзаце.

Значение
Значение
%
Описание
Отступ первой строки
Пример
 p {text-indent: 15px;} 


See the Pen Text-indent by pyampa (@pyampa) on CodePen.


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