Лекция 3: Цвета и фон в CSS

В этой лекции мы рассмотрим, как использовать цвета и фон, чтобы сделать ваш сайт визуально привлекательным. Понимание того, как эффективно применять цвета и фон, является ключом к созданию привлекательного и эстетичного веб-дизайна.

Использование цветов в CSS

CSS позволяет указывать цвета несколькими способами, включая использование названий цветов, шестнадцатеричных значений, RGB, RGBA, HSL и HSLA.

1. Названия цветов

CSS предоставляет широкий спектр предопределенных названий цветов.

• Пример:

  h1 {
    color: red;
  }

При этом цвет текста всех элементов

станет красным.

2. Шестнадцатеричные цвета

Шестнадцатеричные коды представляют собой шестизначную комбинацию цифр и букв, определяемую сочетанием значений красного, зеленого и синего (RGB).

• Пример:

  p {
    color: #3498db; /* A shade of blue */
  }

3. RGB и RGBA

RGB означает красный, зеленый и синий. RGBA добавляет альфа-канал для непрозрачности.

• Пример (RGB):

  div {
    color: rgb(255, 99, 71); /* Tomato color */
  }

• Пример (RGBA):

  div {
    background-color: rgba(255, 99, 71, 0.5); /* Semi-transparent tomato color */
  }

4. HSL и HSLA

HSL означает оттенок, насыщенность и яркость. HSLA включает альфа-канал.

• Пример (HSL):

  h2 {
    color: hsl(120, 100%, 50%); /* Pure green */
  }

• Пример (HSLA):

  h2 {
    color: hsla(120, 100%, 50%, 0.5); /* Semi-transparent green */
  }

Применение фона

Фоны в CSS могут улучшить дизайн, добавив к элементам цвет, изображения, градиенты и многое другое.

1. Цвет фона

Вы можете установить цвет фона любого элемента HTML, используя свойство background-color.

• Пример:

  body {
    background-color: #f4f4f4; /* Light gray background */
  }

2. Фоновые изображения

CSS позволяет использовать изображения в качестве фона.

• Пример:

  .banner {
    background-image: url('banner.jpg');
    background-size: cover;
    background-position: center;
  }

Это установит фоновое изображение для элемента с баннером класса. Изображение закроет всю область и будет центрировано.

3. Повтор фона

Управляйте тем, будет ли фоновое изображение повторяться по горизонтали, вертикали или не повторяться вообще.

• Пример:

  .tile {
    background-image: url('tile.png');
    background-repeat: repeat; /* Repeats both horizontally and vertically */
  }

4. Фоновая позиция

Вы можете контролировать начальное положение фонового изображения.

• Пример:

  .header {
    background-image: url('header.jpg');
    background-position: top right;
  }

5. Фоновый градиент

Градиенты позволяют создавать плавные переходы между двумя или более цветами.

• Пример (линейный градиент):

  .gradient-box {
    background: linear-gradient(to right, #ff7e5f, #feb47b); /* Gradient from left to right */
  }

• Пример (радиальный градиент):

  .circle-gradient {
    background: radial-gradient(circle, #ff7e5f, #feb47b); /* Circular gradient */
  }

Практический пример:

Давайте применим эти концепции на практике на примере, в котором используются цвета, фоновое изображение и градиент.

HTML:

  
Welcome to My Website
  
This is a simple example of using colors and backgrounds in CSS.

CSS:

/* Background color */
body {
  background-color: #f4f4f4;
}

/* Text color */
h1 {
  color: #2c3e50;
}

/* Background image with gradient overlay */
.content {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('background.jpg');
  background-size: cover;
  color: white;
  padding: 20px;
  text-align: center;
}

/* Text color for paragraph */
p {
  color: #ecf0f1;
}

В этом примере:

• Тело имеет светло-серый фон.
• Текст

  темно-синий.

• Див .content имеет фоновое изображение с наложением темного градиента, благодаря чему белый текст выделяется.
• Текст

  имеет светлый оттенок, дополняющий фон.

Практическое упражнение

1. Создайте веб-страницу, содержащую заголовки, абзацы и элементы div.
2. Экспериментируйте с различными цветовыми форматами (hex, RGB, HSL) для оформления текста и фона.
3. Примените фоновое изображение к разделу и поиграйте с его положением, размером и свойствами повтора.
4. Создайте раздел с фоном с линейным или радиальным градиентом.

Далее: В следующей лекции мы рассмотрим Типографику и стилизацию шрифтов в CSS, где вы узнаете, как выбирать и настраивать шрифты для повышения читабельности вашего веб-сайта. и апелляцию. Увидимся там!