Фоны и цвета CSS: стилизация веб-страниц

Введение

Добро пожаловать в лабораторию CSS Colors and Backgrounds! В веб-дизайне цвета и фоны являются основополагающими для создания визуально привлекательных и удобных для пользователя веб-сайтов. Они помогают задать тон, улучшить читаемость и направить внимание пользователя.

В этой лаборатории вы получите практический опыт работы с наиболее распространенными свойствами CSS, используемыми для управления внешним видом элементов. Вы научитесь устанавливать цвета фона, применять цвета текста, использовать фоновые изображения и управлять их отображением. Мы рассмотрим следующие свойства: background-color, color, background-image, background-repeat и background-position.

К концу этой лаборатории вы будете иметь твердое представление о том, как стилизовать цвета и фоны ваших веб-страниц.

Установите свойство background-color с использованием шестнадцатеричного кода

На этом шаге вы научитесь изменять цвет фона всей страницы. Мы будем использовать свойство background-color и шестнадцатеричный (hex) код цвета. Hex-коды — это распространенный способ представления цветов в веб-разработке, начинающийся с символа #, за которым следуют шесть символов (0-9, a-f).

Сначала вам нужно отредактировать файл styles.css. Вы можете найти этот файл в файловом проводнике слева от WebIDE.

Нажмите на файл styles.css, чтобы открыть его в редакторе.
Добавьте следующее правило CSS для установки цвета фона элемента <body>. Это применит стиль ко всей странице.

body {
  background-color: #f0f8ff;
}

Это правило выбирает элемент body и устанавливает его цвет фона на светло-голубой оттенок, известный как "AliceBlue".

После добавления кода сохраните файл (можно использовать Ctrl+S или Cmd+S). Чтобы увидеть изменения, нажмите на вкладку Web 8080 в верхней части интерфейса. Вы должны увидеть, как фон страницы изменится с белого на светло-голубой.

Примените свойство color со значениями RGB

Теперь, когда вы установили цвет фона, давайте изменим цвет основного текста заголовка. Мы будем использовать свойство color, которое устанавливает цвет текстового содержимого элемента. Для этого мы будем использовать формат цвета rgb().

Функция rgb() определяет цвет, используя его компоненты Красного (Red), Зеленого (Green) и Синего (Blue), причем каждое значение варьируется от 0 до 255.

Продолжайте редактировать файл styles.css.

Добавьте новое правило CSS для выбора элемента <h1>.
Внутри этого правила установите свойство color на темно-серый цвет, используя rgb(60, 60, 60).

Добавьте следующий код в ваш файл styles.css:

h1 {
  color: rgb(60, 60, 60);
}

Сохраните файл и переключитесь на вкладку Web 8080, чтобы просмотреть изменения. Заголовок "Welcome to LabEx" теперь должен быть темно-серым, что выделит его на светло-голубом фоне.

Используйте свойство background-image с url

Помимо сплошных цветов, CSS позволяет использовать изображения в качестве фона. Для этого используется свойство background-image. Путь к изображению указывается с помощью функции url().

На этом шаге вы добавите фоновое изображение к элементу body страницы. Скрипт настройки уже создал файл изображения с именем labex.svg в вашем каталоге проекта.

Вернитесь к файлу styles.css.
Измените существующее правило для body, чтобы добавить свойство background-image.

Добавьте следующую строку внутри фигурных скобок селектора body:

body {
  background-color: #f0f8ff;
  background-image: url("labex.svg");
}

После сохранения файла проверьте вкладку Web 8080. Вы заметите, что изображение (labex.svg) появилось на странице. По умолчанию фоновые изображения повторяются как по горизонтали, так и по вертикали, чтобы заполнить весь элемент. На следующем шаге мы узнаем, как контролировать это поведение.

Реализуйте свойство background-repeat no-repeat

Как вы видели на предыдущем шаге, фоновые изображения повторяются по умолчанию. Свойство background-repeat позволяет контролировать это поведение. Оно может принимать несколько значений, включая repeat (по умолчанию), repeat-x (повторять по горизонтали), repeat-y (повторять по вертикали) и no-repeat.

На этом шаге вы предотвратите повторение фонового изображения.

Продолжайте редактировать правило body в вашем файле styles.css.
Добавьте свойство background-repeat и установите его значение на no-repeat.

Ваше правило body теперь должно выглядеть следующим образом:

body {
  background-color: #f0f8ff;
  background-image: url("labex.svg");
  background-repeat: no-repeat;
}

Сохраните файл и обновите вкладку Web 8080. Теперь вы увидите только один экземпляр фонового изображения, расположенный в верхнем левом углу страницы.

Добавьте свойство background-position center

В настоящее время единственное фоновое изображение расположено в верхнем левом углу страницы. Вы можете изменить его положение с помощью свойства background-position. Это свойство принимает такие значения, как left, right, top, bottom и center, а также конкретные значения длины или процента.

На этом заключительном шаге вы центрируете фоновое изображение как по горизонтали, так и по вертикали.

В вашем файле styles.css добавьте свойство background-position к правилу body.
Установите его значение на center.

Полное правило body теперь будет выглядеть так:

body {
  background-color: #f0f8ff;
  background-image: url("labex.svg");
  background-repeat: no-repeat;
  background-position: center;
}

Сохраните изменения и просмотрите результат на вкладке Web 8080. Фоновое изображение теперь должно быть идеально центрировано на странице.

Резюме

Поздравляем с завершением лабораторной работы! Вы успешно научились стилизовать цвета и фоны веб-страницы с помощью основных свойств CSS.

В этой лабораторной работе вы практиковались в:

Установке цвета фона страницы с помощью background-color и шестнадцатеричного кода.
Изменении цвета текста с помощью свойства color и значения rgb().
Добавлении background-image с использованием функции url().
Управлении мозаичным расположением изображения с помощью background-repeat: no-repeat;.
Позиционировании фонового изображения с помощью background-position: center;.

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

Цвета и фоны CSS