Темная тема
Цвет
color
color - задаёт цвет текста для элемента.
Типы значений:
color: red;- именованный цвет из списка CSS;color: #ff0000;- шестнадцатеричная запись цвета;color: rgb(255, 0, 0);- Red, Green, Blue;color: rgba(255, 0, 0, 0,5);- Red, Green, Blue, Opacity (прозрачность);color: hsl(0, 100%, 50%);- оттенок, насыщенность, светлота;color: hsla(0, 100%, 50%, 0.5);- оттенок, насыщенность, светлота, прозрачность;
Например. Изменим файл index.html:
html
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<title>Пример</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<p class="example_1">Параграф 1</p>
<p class="example_2">Параграф 2</p>
<p class="example_3">Параграф 3</p>
<p class="example_4">Параграф 4</p>
</body>
</html>Изменим файл styles.css:
css
.example_1 {
color: red;
}
.example_2 {
color: #ff0000;
}
.example_3 {
color: rgb(255, 0, 0);
}
.example_4 {
color: hsl(0, 100%, 50%);
}background-color
background-color - устанавливает цвет фона элемента.
Например. Изменим файл index.html:
html
<div class="box">Текст с фоном</div>Изменим файл styles.css:
css
.box {
background-color: lightblue;
}border-color
border-color - цвет рамки элемента.
Например. Изменим файл index.html:
html
<p class="highlight">Текст с рамкой</p>Изменим файл styles.css:
css
.highlight {
border: 2px solid; /* задаём толщину и стиль рамки */
border-color: orange; /* задаём цвет рамки */
}opacity
opacity - прозрачность элемента (значение от 0 до 1).
Например. Изменим файл index.html:
html
<div class="box_1">Блок</div>
<div class="box_2">Полупрозрачный блок</div>Изменим файл styles.css:
css
.box_1,
.box_2 {
background: blue;
color: white;
}
.box_2 {
opacity: 1;
}
.box_2 {
opacity: 0.5;
}