Цвет и фон
Цвет и фон
«Цвет и фон» — бесплатный урок HTML for Kids на CoddyKit. Это урок 1 из 1. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML for Kids, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML for Kids содержит 1 уроков всего.
Введение
Здравствуйте!
С помощью свойства цвета можно изменять цвета текста.
Для этого свойства можно задавать значения в формате RGB, HEX, HSL, RGBA или HSLA.
До этого мы уже использовали свойство цвета во многих примерах. Теперь рассмотрим его применение с разными типами значений.
<style>
#txt1{
color: red;
}
#txt2{
color: #ff0000;
}
#txt3{
color: rgb(255,0,0);
}
/*
0.4 is the alpha value.
We can define decimal values
between 1 and 0.
*/
#txt4{
color: rgba(255,0,0, 0.4);
}
</style>
<div class="box">
<h1 id="txt1">
This is red color
</h1>
<h1 id="txt2">
This is red color that defined with HEX type
</h1>
<h1 id="txt3">
This is red color that defined with RGB type
</h1>
<h1 id="txt4">
This is red color that defined with RGBA type
</h1>
</div>Фон
С помощью свойств фона можно задавать стили для фона элементов.
Теперь изучим перечисленные ниже свойства фона.
- цвет фона
- изображение фона
- повторение фона
- закрепление фона
- позиция фона
цвет фона
Это свойство используется для изменения цвета фона элемента.
Рассмотрим пример.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
background-color: lightblue;
border:1px solid #c0c0c0;
color:#ffffff;
}
</style>
</head>
<body>
<div id="box">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Donec ante purus,
eleifend egestas tempus non, consequat ac ex..
</div>
</body>
</html>Непрозрачность
Это свойство используется для изменения непрозрачности фона элемента.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
background-color: lightblue;
opacity: 0.5;
border:1px solid #c0c0c0;
color:#ffffff;
}
</style>
</head>
<body>
<div id="box">
Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
</div>
</body>
</html>Непрозрачность — 2
Изменение непрозрачности CSS показано на изображении выше.
Изображение фона
Свойство изображения фона используется для добавления изображений на фон элемента.
Изображение находится по адресу https://coddy.s3.amazonaws.com/cms/Profile_Pictures_dc459075ee.png.
Теперь определим элемент div и добавим изображение в его фон.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>Позиция фона
Размер фона
Как вы могли заметить в нашем примере выше, изображение не удалось правильно разместить, поскольку его стандартный размер больше области, в которую мы его добавляем.
Для решения этой проблемы мы будем использовать свойство размера фона.
Свойству размера фона можно задать такие значения, как cover, contain и auto, а также конкретное значение ширины и высоты.
Давайте ещё раз обновим наш пример.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* the element's background would fill the
div's background without
the image's ratio being distorted*/
background-size: contain;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>Позиция фона 2
Теперь зададим для свойства позиции фона значение в процентах.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* The width and height values
are set to 50%. */
background-size: 50% 50%;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>Повторение фона
Однако здесь возникает проблема. Поскольку размер изображения был меньше размера фона элемента, изображение использовалось несколько раз, чтобы заполнить область.
Чтобы избежать этого, используйте свойство повторения фона со значениями repeat, repeat-x, repeat-y, initial, inherit или no-repeat.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("cdn.coddykit.com/cms/coddy_test.png");
/* The width and height
values are set to 50%. */
background-size: 50% 50%;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>Закрепление фона
Ещё одно свойство фона — background-attachment. С помощью этого свойства можно определить, будет ли фоновое изображение прокручиваться вместе со страницей.
Это свойство принимает значения fixed или scroll.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* The width and height
values are set to 50%. */
background-size: 50% 50%;
background-attachment:scroll;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>Сокращённая запись свойств фона
Чтобы применить изученные выше свойства фона, может потребоваться задать 4–5 строк выражений.
Свойство background в сокращённой записи позволяет задать их в одной строке.
Давайте рассмотрим пример.
В свойстве background задаются отсутствие повторения, размер, размещение на странице и адрес исходного изображения.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background: no-repeat center/50%
url("https://cdn.coddykit.com/cms/coddy_test.png");
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>Поздравляем
Поздравляем 🎉
В этом разделе мы изучили цвет и фон.
В следующем разделе мы изучим понятия блочного и строчного элементов, а также блока.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 16
- Уроки
- 35
Часто задаваемые вопросы
Урок «Цвет и фон» бесплатный?
Да — полный текст урока «Цвет и фон» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML for Kids, подпишись на CoddyKit PRO. Курс HTML for Kids содержит 1 уроков всего.
Чему я научусь в уроке «Цвет и фон»?
Цвет и фон Ты практикуешь HTML for Kids с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML for Kids?
Предыдущий опыт не требуется. HTML for Kids на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 1.
Сколько времени занимает урок «Цвет и фон»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML for Kids?
Да. Каждый урок HTML for Kids включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.