Введение в стили
HTML-документ с текстом, ссылками и заголовком — уже сайт, хоть и очень простой. Первый в мире сайт, которому около 30 лет, выглядит похоже:
В наше время нужны цвета, шрифты и отступы, а элементы должны быть уложены в какую-то сетку. За «внешность» веб-страницы отвечают стили на языке CSS. Изучить CSS несложно: он похож на американский английский.
Чтобы придать элементу индивидуальный стиль, в тег встраивается атрибут style. Ему присваивается название свойства (что именно менять) и значение этого свойства (как это поменять).
Для примера сделаем заголовок <h1> ярко-зелёным. Нужное свойство называется color, а значение — springgreen
Берем наш предыдущий шаблон HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<link rel="icon" href=" https://img.fortawesome.com/1ce05b4b/start-illustration.svg">
<title>I Developer</title>
</head>
<body>
<h1>Я Шрэк</h1>
<h2>Я Гарри Поттер</h2>
<p><a target="_blank" href=""</a></p>
<p></p>
<img
src="https://img.freepik.com/free-photo/starry-sky-night-with-landscape-mountains_23-2151614846.jpg?semt=ais_hybrid"
/>
</body>
</html>Свойства и значения разделены двоеточием. После значения всегда стоит точка с запятой, поскольку элемент может иметь много свойств, нужно их разделять:
<h1 style="color: springgreen; font-size: 72px;">Duran Duran</h1>
Поработаем с размером шрифта для заголовка обложки. Элементу <h1> задайте стиль со свойством font-size и значением 31 пиксель. В открывающий тег <h1> добавьте атрибут style="font-size: 31px;".
Добавьте заголовку первого уровня свойство для управления регистром и наклоните его, задав начертание курсивом. Вам понадобятся свойства: text-transform: uppercase; и font-style: italic;. Cвойство font-size: 31px; удалять у заголовка не нужно.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<link rel="icon" href=" https://img.fortawesome.com/1ce05b4b/start-illustration.svg">
<title>I Developer</title>
</head>
<body>
<h1 style="font-size: 31px; text-transform: uppercase; font-style: italic;">Я Шрэк</h1>
<h2>Я Гарри Поттер</h2>
<p><a target="_blank" href=""</a></p>
<p></p>
<img
src="https://img.freepik.com/free-photo/starry-sky-night-with-landscape-mountains_23-2151614846.jpg?semt=ais_hybrid"
/>
</body>
</html>Слово uppercase переводится как «верхний регистр», а italic — курсив. Наклонный шрифт придумали в Италии в эпоху Возрождения — как подражание почерку поэта Петрарки.
Задание:
Для заголовка второго уровня. Задайте ему размер шрифта 31px, все буквы поднимите в верхний регистр.