Упражнение. Настройка стилей HTML с использованием CSS

10 мин

Каскадные таблицы стилей (CSS) позволяют настраивать внешний вид страницы. Основная идея заключается в том, чтобы определить стиль для элементов, используемых на страницах HTML. Если элементы HTML определяют само содержимое, то стили CSS определяют внешний вид содержимого.

Например, с помощью стилей CSS можно применить к определенному элементу скругленные углы или градиентный фон. Или можно указать, как должны выглядеть гиперссылки и как они должны изменяться при взаимодействии с ними. Стили CSS также позволяют создавать сложные макеты и реализовывать сложные эффекты анимации.

Вы можете применять стили к конкретным элементам, ко всем элементам заданного типа или использовать классы для применения стилей к нескольким различным элементам.

В этом упражнении вы применяете стили CSS к элементам HTML-страницы и добавляете код CSS для определения светлых и темных тем. Затем вы проверка результаты в средствах разработчика браузера.

Внешний CSS

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

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task Timeline</title>
  <link rel="stylesheet" href="main.css">
...

Одним из преимуществ внешней таблицы стилей CSS является то, что с одним и тем же файлом CSS можно связать несколько HTML-страниц. При внесении изменений в CSS стилизация обновляется для каждой страницы. При использовании HTML-файла для содержимого страницы CSS-файл для стилизации и файла JavaScript для взаимодействия он называется разделением проблем.

Как уже говорилось, код CSS можно также писать непосредственно в HTML. Такое решение называется внутренними каскадными таблицами стилей. Даже на простом веб-сайте правил CSS так много, что они могут быстро загромождать код страницы HTML. Если страниц несколько, один и тот же код CSS будет часто повторяться и управлять им будет сложно.

Правила CSS

Правила CSS определяют применение стилей к элементам HTML. Правила CSS имеют селектор , который используется для выражения элементов или элементов, к которым должны применяться стили.

В Visual Studio Code откройте файл main.css и введите приведенный ниже код.

body {
    font-family: monospace;
}

ul {
    font-family: helvetica;
}

Этот фрагмент кода содержит два правила. Каждое правило содержит следующие элементы:

Селектор. body и ul представляют собой селекторы двух правил и используются для выбора элементов, к которым применяются стили.
Открывающая фигурная скобка ({).
Список объявлений стилей, определяющих, как должен выглядеть выбранный элемент.
Закрывающая фигурная скобка (}).

Например, селектор ul выбирает элемент HTML <ul> на странице, чтобы применить к нему стили. font-family: helvetica — это объявление, которое определяет стиль. font-family — это имя свойства, а helvetica — значение.

Как видите далее, вы можете определить собственные пользовательские имена элементов.

Селекторы

Селекторы идентификаторов и классов позволяют применять стили к настраиваемым атрибутам в коде HTML. Идентификатор позволяет настроить стиль для одного элемента, а класс — сразу для нескольких элементов.

Скопируйте следующий код и добавьте его в CSS-файл. Вставьте его после закрывающей фигурной скобки для селектора ul , который вы добавили ранее.
```
li {
  list-style: circle;
}

.list {
  list-style: square;
}

#msg {
  font-family: monospace;
}
```
Приведенный выше код содержит три правила CSS. В двух последних правилах используются настраиваемые атрибуты для выбора элементов: .list и #msg.
- .list представляет собой селектор класса. Каждый элемент HTML, содержащий class набор атрибутов, для list получения стилей, определенных в этом селекторе.
- #msg представляет собой селектор идентификатора. Элемент HTML, имеющий набор id атрибутов, получает msg стили, определенные в этом селекторе.
Используемые для селекторов имена могут быть произвольными, но должны соответствовать именам, определенным в HTML.
Сохраните свою работу, нажав сочетание клавиш CTRL+S в Windows или CMD+S в macOS.

Просмотреть в браузере

Для предварительного просмотра с помощью Visual Studio Code щелкните правой кнопкой мыши имя index.htmlфайла и выберите "Открыть в браузере по умолчанию".

Важно!

Хотя вы вносили изменения только в файл main.css, чтобы выполнить предварительный просмотр, следует выбрать файл index.html.

Веб-страница открывается в браузере по умолчанию.

Имеет ли текст те начертания шрифта, которые вы ожидали увидеть? Интересно, как стили, применяемые к <body>, наследуются элементом <h1>. Мы ничего не определяли для <h1>, но он все равно получил шрифт, который был определен для <body>. Этот механизм наследования от родительских элементов к их потомкам является одним из ключевых аспектов CSS. Однако элементы <li> имеют другой шрифт. Стиль элементов <li> переопределяет набор <body> стилей, так как <li> элемент является потомком <ul> элемента, для которого определен стиль.

При использовании открытого в браузере по умолчанию в Visual Studio Code открывается новая вкладка в браузере каждый раз. Чтобы избежать открытия новой вкладки, можно перезагрузить вкладку, на которой уже открыт ваш веб-сайт.

Чтобы перезагрузить вкладку, нажмите клавишу F5, которая используется для обновления содержимого с клавиатуры, или клавиши CTRL+R в Windows или Linux и CMD+R на компьютере Mac.

Добавление светлой темы

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

В CSS-файле (main.css) добавьте следующий код в конце файла.
```
.light-theme {
  color: #000000;
  background: #00FF00;
}
```
В этом примере #000000 определяет черный цвет для шрифта, а #00FF00 — зеленый цвет для фона.
В HTML-файле (index.html) обновите <body> элемент с именем light-themeкласса. Теперь селектор классов для светлой темы правильно применяет стили.
```
<body class="light-theme">
```

Просмотреть в браузере

Чтобы открыть окно предварительного просмотра с помощью Visual Studio Code, щелкните index.html правой кнопкой мыши и выберите Открыть в браузере по умолчанию или перезагрузите предыдущую вкладку, нажав клавишу F5.

Обратите внимание, что светлая тема отображается с зеленым фоном.

Просмотр примененных CSS

В представлении браузера откройте Средства для разработчиков.

Щелкните правой кнопкой мыши страницу и выберите команду "Проверить" или сочетание клавиш F12 или CTRL-SHIFT+I.
Выберите вкладку Элементы, и на вкладке Элементы выберите вкладку Стили (она уже должна быть выбрана по умолчанию).
Наводите указатель мыши на различные элементы HTML. При выборе нескольких элементов вы увидите, как применяемые к этим элементам стили отображаются на вкладке Стили в инструментах для разработчика.
Выберите элемент <body>. Обратите внимание на примененную light-theme.
Выберите элемент неупорядоченного списка <ul>. Обратите внимание на пользовательский стиль font-family: helvetica;, который переопределяет стиль для элемента <body>.

Дополнительные сведения о просмотре стилей CSS в инструментах для разработчика см. в статье Начало работы с просмотром и изменением стилей CSS.

Добавление темной темы

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

Чтобы добавить поддержку темной темы в CSS, сделайте следующее:

В CSS-файле (main.css) добавьте некоторые константы в корень страницы в начале файла.
```
:root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}
```
Селектор :root представляет элемент <html> на HTML-странице. Для такого рода задач рекомендуется определить набор глобальных переменных CSS в правиле CSS с помощью селектора :root. В этом примере вы определили три переменные для цветов. Теперь эти переменные можно использовать в других правилах CSS.
В конце файла CSS замените правило light-theme следующим кодом, чтобы обновить его и добавить селектор dark-theme.
```
.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}
.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}
```
В приведенном выше коде вы определили две новые переменные, bg и fontColor, чтобы указать цвет фона и шрифта. Эти переменные используют ключевое слово var, чтобы присвоить значения своих свойств переменным, которые были ранее указаны в селекторе :root.
Затем в файле CSS замените текущий селектор body следующим кодом.
```
body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}
```
В этом примере вы используете body селектор для задания background и color свойств, так как элементы, видимые на веб-странице, находятся внутри <body> элемента, они наследуют заданные цвета <body>.
В CSS-файле удалите правила с селекторами #msg и ul, чтобы они также унаследовали тот же шрифт от <body>.

Не забудьте сохранить файл, выбрав Control+S или Command+S.

Теперь CSS-файлmain.css должен выглядеть следующим образом:

:root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}

body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}

li {
  list-style: circle;
}

.list {
  list-style: square;
}

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}

Чтобы просмотреть темную тему, откройте файл index.html и вручную измените тему по умолчанию в атрибуте <body> класса на темную тему (dark-theme). Сохраните файл и перезагрузите страницу в браузере.
Измените атрибут класса <body>, чтобы вернуться к светлой теме по умолчанию.

В следующем уроке вы используете JavaScript для обеспечения интерактивности и поддержки переключения тем.

Продолжить

Внешний CSS

Правила CSS

Селекторы

Просмотреть в браузере

Добавление светлой темы

Просмотреть в браузере

Просмотр примененных CSS

Добавление темной темы

Обратная связь