Мы изучили HTML: структуру, списки и ссылки, таблицы и формы. Теперь переходим к оформлению: CSS (Cascading Style Sheets) — язык описания внешнего вида страницы. С его помощью мы задаём цвета, шрифты, размеры и расположение элементов. В этом уроке познакомимся с подключением стилей, селекторами и базовыми свойствами.
<style> и файл .css).id.color, background-color.font-family, font-size, font-weight.<head>
<style>
h1 { color: blue; }
p { font-size: 16px; }
</style>
</head><head>
<link rel="stylesheet" href="style.css">
</head>Файл style.css в той же папке, что и HTML.
h1 { color: darkblue; }
p { font-size: 18px; }
a { text-decoration: underline; }class)В HTML: class="highlight". В CSS: точка перед именем.
<p class="highlight">Важный текст</p>.highlight {
background-color: yellow;
font-weight: bold;
}Класс может использоваться у разных элементов. Можно несколько классов: class="big red".
idВ HTML: id="header". В CSS: решётка перед именем.
<div id="header">Шапка</div>#header {
background-color: #333;
color: white;
}color: red; /* Имя цвета */
color: #ff0000; /* HEX: красный */
color: rgb(255, 0, 0); /* RGB */
color: rgba(255, 0, 0, 0.5); /* С прозрачностью */
background-color: lightblue;Популярные имена: red, blue, green, white, black, gray, lightgray, darkblue.
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold; /* normal, bold */
font-style: italic;Размеры: px (пиксели), em (относительно родителя), %. Для основного текста обычно 14–18px.
text-align: center; /* left, right, justify */
text-decoration: none; /* убрать подчёркивание у ссылок */
line-height: 1.5; /* межстрочный интервал */Создай страницу и подключи к ней style.css. Задай заголовку h1 синий цвет и центр выравнивания.
Добавь класс note к одному из абзацев и в CSS задай ему жёлтый фон и курсив.
Стилизуй все ссылки: убери подчёркивание, задай цвет. При наведении цвет должен меняться (пока просто запомним, подробнее — в уроке про псевдоклассы).
Задай странице шрифт Arial, размер основного текста 16px, межстрочный интервал 1.5.
Мы освоили подключение CSS, селекторы (элемент, класс, id) и базовые свойства: цвета, шрифты, выравнивание. На следующем уроке изучим блочную модель: отступы, границы, размеры.
.name) и id (#name) — id должен быть уникален на всей странице.font-family: Arial ещё допустимо, но content: "текст" уже требует кавычек.id для нескольких элементов.Создай страницу с заголовком и 3 абзацами. Задай:
intro с зелёным цветом#333 или gray)#f5f5f5)Создай файл style.css и подключи его. Задай:
body — шрифт Georgia (или другой serif), размер 18pxh1 — 32px, h2 — 24pxline-height: 1.6 для абзацев#0066cc, без подчёркиванияСоздай список из 5 пунктов. Добавь классы:
done — зелёный цвет, зачёркнутый текст (text-decoration: line-through)important — жирный, красныйПримени к разным пунктам, получи «список дел» с выполненными и важными пунктами.
Создай блок с классом card: белый фон, тёмная рамка 1px, скруглённые углы (border-radius: 8px), внутренние отступы 20px. Внутри — заголовок и абзац.
Сделай два класса: warning (жёлтый фон, тёмно-жёлтая рамка) и success (светло-зелёный фон, зелёная рамка). Примени к разным блокам на странице.
Стилизуй таблицу: заголовки — синий фон, белый текст; чётные строки — светло-серый фон; нечётные — белый.
Стилизуй форму: поля ввода с рамкой, кнопка с цветным фоном и белым текстом. Подбери гармоничную пару цветов.