Стилизация CSS: Подключение внешнего файла стилей к HTML

Введение

Добро пожаловать в вашу первую лабораторию CSS! CSS (Cascading Style Sheets) — это язык, который мы используем для стилизации HTML-документа. Он описывает, как HTML-элементы должны отображаться на экране, на бумаге или в других носителях.

Существует три способа включения CSS в HTML-документ: встроенный (inline), внутренний (internal) и внешний (external). Наиболее распространенным и рекомендуемым методом является использование внешней таблицы стилей. Этот подход отделяет ваш контент (HTML) от вашей презентации (CSS), делая ваш код более чистым, легким в поддержке и повторно используемым на нескольких страницах.

В этой лаборатории вы изучите фундаментальный процесс стилизации веб-страницы с использованием внешней таблицы стилей. Вы:

Создадите новый CSS-файл.
Свяжете этот CSS-файл с существующим HTML-документом.
Напишете простое CSS-правило для изменения шрифта всей страницы.
Просмотрите свои изменения в браузере.

Приступим!

Создайте внешний файл CSS с именем styles.css

На этом шаге вы создадите отдельный файл для хранения всех ваших CSS-правил. Это называется внешней таблицей стилей. Скрипт настройки уже создал для вас файл index.html. Теперь вам нужно создать CSS-файл, который будет его стилизовать.

Используя файловый менеджер в левой панели WebIDE:

Щелкните правой кнопкой мыши по пустому месту в области папки project.
Выберите "New File" (Новый файл) из контекстного меню.
Появится новое поле ввода. Введите styles.css и нажмите Enter.

Теперь вы должны увидеть новый, пустой файл с именем styles.css в вашем файловом менеджере. Здесь вы будете писать свой CSS-код на следующих шагах.

new file

Подключите файл CSS к HTML-документу с помощью тега link

На этом шаге вы подключите ваш файл styles.css к вашему файлу index.html. Простого создания CSS-файла недостаточно; вы должны явно указать HTML-документу использовать его. Это делается с помощью тега <link>.

Тег <link> размещается внутри раздела <head> вашего HTML-документа. Он требует два важных атрибута:

rel="stylesheet": Это сообщает браузеру, что связанный файл является таблицей стилей.
href="styles.css": Это указывает путь к CSS-файлу.

Теперь давайте добавим его в ваш HTML.

Откройте файл index.html из файлового менеджера.
Внутри раздела <head> добавьте следующую строку:

<link rel="stylesheet" href="styles.css" />

После добавления строки ваш файл index.html должен выглядеть следующим образом:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First CSS Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph. We will style this page with CSS.</p>
  </body>
</html>

Не забудьте сохранить файл (Ctrl+S или File > Save).

Добавьте базовый селектор для элемента body

На этом шаге вы напишете свое первое CSS-правило. CSS-правило состоит из селектора и блока объявлений. Селектор указывает на HTML-элемент, который вы хотите стилизовать. Блок объявлений (внутри фигурных скобок {}) содержит одно или несколько объявлений, которые являются фактическими стилями, применяемыми к элементу.

Мы начнем с выбора элемента <body>. Стилизация <body> является обычной практикой для установки стилей по умолчанию, таких как цвет фона и шрифт, для всей страницы.

Откройте ваш файл styles.css. Он пока должен быть пустым.
Введите следующий код, чтобы создать правило для элемента body:

body {
}

Этот код выбирает элемент <body> и подготавливает пустой блок объявлений (фигурные скобки), куда мы добавим свойства стилей на следующем шаге.

Установите свойство font-family для селектора body

На этом шаге вы добавите объявление стиля к вашему правилу body. Объявление — это пара свойство-значение (например, property: value;), определяющая конкретный стиль.

Мы будем использовать свойство font-family для изменения шрифта текста на странице. Применяя его к body, все текстовые элементы внутри body (такие как <h1> и <p>) унаследуют этот шрифт. Хорошей практикой является предоставление "стека шрифтов" — списка шрифтов, разделенных запятыми. Браузер сначала попытается использовать первый шрифт, а если он недоступен, попробует следующий и так далее.

Убедитесь, что ваш файл styles.css открыт.
Внутри фигурных скобок селектора body добавьте свойство font-family.

font-family: Arial, sans-serif;

Ваш полный файл styles.css теперь должен выглядеть так:

body {
  font-family: Arial, sans-serif;
}

Это правило указывает браузеру отображать весь текст внутри <body> с использованием шрифта Arial. Если Arial не установлен в системе пользователя, браузер будет использовать стандартный шрифт без засечек (sans-serif) этой системы.

Сохраните файлы и обновите браузер, чтобы увидеть изменения

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

Убедитесь, что оба файла, index.html и styles.css, сохранены. Вы можете использовать сочетание клавиш Ctrl+S или выбрать File > Save в меню.
Перейдите на вкладку Web 8080, расположенную в верхней части интерфейса LabEx. Эта вкладка отображает вывод веб-сервера, работающего в вашей среде.
Возможно, вам потребуется обновить вкладку браузера, чтобы увидеть последние изменения.

Изменение шрифта

Обратите внимание на текст на странице. Теперь он должен отображаться шрифтом Arial (или похожим шрифтом без засечек), который отличается от шрифта с засечками по умолчанию (например, Times New Roman), обычно используемого браузерами. Изменение может быть незначительным, но оно подтверждает, что ваша внешняя таблица стилей правильно связана и применена.

Не стесняйтесь экспериментировать! Попробуйте изменить Arial на Verdana или Georgia в вашем файле styles.css, сохраните его и обновите вкладку Web 8080, чтобы мгновенно увидеть изменение шрифта.

Резюме

Поздравляем! Вы успешно завершили эту лабораторную работу и сделали первый шаг в мир CSS.

В этой лабораторной работе вы изучили основной и самый важный метод стилизации веб-страниц:

Как создать внешний файл CSS (styles.css).
Как связать файл CSS с HTML-документом с помощью тега <link> в разделе <head>.
Как написать базовое правило CSS, используя селектор элемента (body).
Как применить стиль с помощью свойства и значения (font-family: Arial, sans-serif;).

Эта основа разделения структуры (HTML) и представления (CSS) является ключевым принципом современной веб-разработки. Теперь вы готовы изучать более продвинутые селекторы CSS, свойства и концепции, такие как блочная модель (box model), макеты (layout) и адаптивный дизайн (responsive design).

Введение в CSS и подключение стилей