Цвета и фоны
Добавляйте цвета и фоны, чтобы сделать страницу ярче
«Цвета и фоны» — бесплатный урок HTML for Kids на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML for Kids, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML for Kids содержит 4 уроков всего.
Цвета и фоны
Добро пожаловать на следующий урок! Сегодня мы узнаем, как добавлять цвета и фоны на веб-страницу, чтобы сделать её более яркой и привлекательной.
Зачем нужны цвета и фоны?
Цвета и фоны могут:
- делать веб-страницу более привлекательной;
- выделять важное содержимое;
- задавать настроение или тему страницы.
Давайте научимся эффективно их использовать!
Изменение цвета текста
Вы можете изменить цвет текста с помощью свойства color. Можно использовать:
- названия цветов: пример:
red,blue; - шестнадцатеричные коды: пример:
#ff0000,#0000ff; - значения RGB: пример:
rgb(255, 0, 0).
Пример:
<p style="color: red;">This text is red.</p>
<p style="color: #0000ff;">This text is blue.</p>
<p style="color: rgb(0, 128, 0);">This text is green.</p>
Добавление цвета фона
Свойство background-color используется для изменения цвета фона элемента.
Пример:
<p style="background-color: yellow;">This paragraph has a yellow background.</p>
<div style="background-color: lightgray; padding: 10px;">
This is a box with a gray background.
</div>
Фон всей страницы
Вы можете изменить цвет фона всей страницы, применив свойство background-color к тегу <body>.
Пример:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This page has a light blue background.</p>
</body>
</html>
Добавление фоновых изображений
Можно установить изображение в качестве фона с помощью свойства background-image.
Пример:
В этом примере:
background-size: cover;растягивает изображение на всю страницу.background-repeat: no-repeat;предотвращает повторение изображения.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('background.jpg');
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This page has a background image.</p>
</body>
</html>
Объединение цветов текста и фона
Вы можете объединять цвета текста и фона, создавая привлекательный дизайн. Убедитесь, что текст хорошо читается!
Пример:
<p style="color: white; background-color: black; padding: 10px;">
This is white text on a black background.
</p>
Попробуйте сами
Давайте создадим веб-страницу с цветами и фонами. Вот пример:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lavender;
}
h1 {
color: darkblue;
}
p {
background-color: lightyellow;
padding: 10px;
border: 1px solid darkgray;
}
</style>
</head>
<body>
<h1>My Colorful Page</h1>
<p>This paragraph has a light yellow background with a border.</p>
</body>
</html>
Отличная работа!
Поздравляем! Вы научились использовать цвета и фоны, чтобы сделать веб-страницы более яркими и привлекательными. На следующем уроке мы подробно рассмотрим форматирование текста, чтобы добавлять к нему полужирное, курсивное и другие начертания. Приготовьтесь улучшить свои навыки дизайна!
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 16
- Уроки
- 35
Часто задаваемые вопросы
Урок «Цвета и фоны» бесплатный?
Да — полный текст урока «Цвета и фоны» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML for Kids, подпишись на CoddyKit PRO. Курс HTML for Kids содержит 4 уроков всего.
Чему я научусь в уроке «Цвета и фоны»?
Добавляйте цвета и фоны, чтобы сделать страницу ярче Ты практикуешь HTML for Kids с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML for Kids?
Предыдущий опыт не требуется. HTML for Kids на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Цвета и фоны»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML for Kids?
Да. Каждый урок HTML for Kids включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Встроенные стили
- Основы CSS
- Цвета и фоны
- Форматирование текста