Упражнение. Настройка стилей 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. Даже на простом веб-сайте правил CSS так много, что они могут быстро загромождать код страницы HTML. Если страниц несколько, один и тот же код CSS будет часто повторяться и управлять им будет сложно.

Правила CSS

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

В Visual Studio Code откройте main.css файл и введите следующее:

body {
    font-family: monospace;
}

ul {
    font-family: helvetica;
}

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

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

Например, ul селектор выбирает <ul> элемент HTML на странице, чтобы применить к нему стили. Объявление равно 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.
Сохраните работу, выбрав Control+S в Windows или Command+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 и Command+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 для обеспечения интерактивности и поддержки переключения тем.

Добавление темы с помощью GitHub Copilot

Вы можете использовать GitHub Copilot в интегрированной среде разработки для создания CSS для добавления новой темы. Вы можете настроить запрос, чтобы указать свойства, чтобы определить стили для элементов HTML в соответствии с вашими требованиями.

В следующем тексте показан пример запроса для Copilot Chat:

Add a medium colored theme in the CSS file using hex color codes for blue font and light blue background. Make font family as Arial.

GitHub Copilot работает на ИИ, поэтому возможны неожиданности и ошибки. Дополнительные сведения см. в часто задаваемых вопросых о Copilot.

Дополнительные сведения о GitHub Copilot см. в Visual Studio Code.

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

Были ли сведения на этой странице полезными?