При использовании лишь описанных раннее страница будет выглядеть очень красиво — черный шрифт на белом фоне. С помощью следующих приёмов можно задать различные параметры форматирования текста, с кратким ведением в 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, курсивом
Контрольные вопросы
- Какие тэги (контейнеры) используются для ввода заголовков? Ввода абзацев?
- Что такое CSS?
- Как задать стиль для какого-либо контейнера?