Урок №6. Форматирование текста с помощью CSS
Каскадные таблицы стилей (CSS) обладают очень широкими возможностями по изменению текста (цвет, вид, расположение на странице и т.д.). Начнём с простых вещей (скачать исходник)).
В файле demo.html вместо строчки "Очень полезный сайт" напишем пять новых строчек:
<H1>Фрукты</H1>
<H2>Бананы</H2>
<p>Бананы очень полезны для сердца.</p>
<H2>Апельсины</H2>
<p>Апельсины содержат много витамина С</p>
Напомню, что тегами <H1>, <H2>, <H3>, <H4>, <H5>, <H6> обозначаются заголовки (от английского слова heading). От наиболее важного <H1> (самый крупный шрифт) до наименее важного <H6> (самый мелкий шрифт). Тегом <p> (от английского слова paragraph) обозначается параграф.
Полностью код файла demo.html выглядит следующим образом:
<!DOCTYPE html>
<html>
<head>
<meta charset=”windows-1251” />
<title>Сайт www.historian.by</title>
<link rel="stylesheet" href="styles.css" type="text/css" media="all"/>
</head>
<body>
<H1>Фрукты</H1>
<H2>Бананы</H2>
<p>Бананы очень полезны для сердца.</p>
<H2>Апельсины</H2>
<p>Апельсины содержат много витамина С.</p>
</body>
</html>
Результат работы на снимке ниже.
Из предыдущего урока ("Общие сведения о CSS") мы знаем, что можно изменить шрифт (цвет, размер) всего текста на странице через изменение свойств селектора body. Напомню, что весь отображаемый текст веб-страницы размещается между тегами body, т.е. указанные свойства применяются ко всему тексту.
В этом уроке с помощью CSS применим к частям текста разные свойства. Откроем файл styles.css и добавим в конец несколько строчек.
p {
font-size: 32px;
}
Этот код применяет размер шрифта 32px (свойство font-size) к тексту, размещённому между тегами <p> и </p>. Полностью код страницы styles.css выглядит следующим образом.
body {
background-color: yellow;
}
p {
font-size: 32px;
}
Результат работы на снимке ниже.
Страница обновлена 25 июня 2023 года.