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

Форматирование с помощью HTML тэгов

Горизонтальная линия

Заголовки целесообразно отделять от остального содержания страницы горизонтальной линией с помощью одиночного тэга <hr />

Абзацы

Разделение текста на абзацы производится с помощью контейнера <p> … </p>. При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания и параметры форматирования шрифта.

Заголовки

Размер шрифта заголовков задается парами тэгов от <h1>Title</h1> (самый крупный) до <h6>Title</h6> (самый мелкий).

Разница в размерах заголовков

Разница в размерах заголовков

CSS

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

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

Как и HTML, CSS развивается по версиям. Последняя — CSS 4.15, была рекомендована к реализации браузерами в декабре 2020 года.

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

Представим, что у нас есть обычный параграф, оформленный в соответствующие теги:

<p>Пример параграфа, набранного шрифтом Arial, размера 14px, курсивом</p>

Чтобы изменить его шрифт, можно воспользоваться возможностями CSS. Каждому тегу, будь то P, BODY или DIV, можно задавать различные атрибуты. Чтобы задать содержанию какой-либо стиль, используя CSS, необходимо применить атрибут style.

<p style="…">Пример параграфа, набранного шрифтом Arial, размера 14px, курсивом</p>

В CSS есть различные наборы правил для указания параметров отображения. Для шрифтов мы можем воспользоваться следующими:

  • font-size — размер шрифта;
  • font-style — позволяет задавать стиль текста, например, чтобы сделать его курсивным (italic)
  • font-family — гарнитура, которую нужно использовать (например, Arial или PT Sans)
  • есть и другие, но мы остановимся на этих.

Чтобы CSS-правило применилось к элементу, нужно его корректно задать, то есть, нужно знать синтаксис. Он очень простой: правило: значение; другое правило: значение другого правила

Давайте посмотрим, как применить эти знания к нашему параграфу.

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

<p style="font-family: Arial; font-size: 14px; font-style: italic;">Пример параграфа, набранного шрифтом Arial, размера 14px, курсивом</p>

Результат:

Пример параграфа, набранного шрифтом Arial, размера 14px, курсивом

Контрольные вопросы

  1. Какие тэги (контейнеры) используются для ввода заголовков? Ввода абзацев?
  2. Что такое CSS?
  3. Как задать стиль для какого-либо контейнера?