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

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

Селекторы

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

  1. Скопируйте следующий код и добавьте его в 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.

  2. Сохраните свою работу, нажав сочетание клавиш CTRL+S в Windows или CMD+S в macOS.

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

  1. Чтобы просмотреть с помощью 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.

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

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

  1. В CSS-файле (main.css) добавьте следующий код в конце файла.

    .light-theme {
  color: #000000;
  background: #00FF00;
}

    В этом примере #000000 определяет черный цвет для шрифта, а #00FF00 — зеленый цвет для фона.

  2. В HTML-файле (index.html) обновите <body> элемент с именем light-themeкласса. Теперь селектор классов для светлой темы правильно применяет стили.

    <body class="light-theme">

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

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

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

    Снимок экрана: веб-сайт с примененной светлой темой.

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

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

    Щелкните правой кнопкой мыши страницу и выберите команду "Проверить" или сочетание клавиш F12 или CTRL+SHIFT+I.

  2. Выберите вкладку "Элементы" и выберите вкладку "Стили" на вкладке "Элементы" (она уже должна быть выбрана по умолчанию).

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

  4. Выберите элемент <body>. Обратите внимание на примененную light-theme.

  5. Выберите элемент неупорядоченного списка <ul>. Обратите внимание на пользовательский стиль font-family: helvetica;, который переопределяет стиль для элемента <body>.

Снимок экрана: веб-сайт с примененной светлой темой и с разделом

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

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

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

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

  1. В CSS-файле (main.css) добавьте некоторые константы в корень страницы в начале файла.

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

    Селектор :root представляет элемент <html> на HTML-странице. Для такого рода задач рекомендуется определить набор глобальных переменных CSS в правиле CSS с помощью селектора :root. В этом примере вы определили три переменные для цветов. Теперь эти переменные можно использовать в других правилах CSS.

  2. В конце файла 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.

  3. Затем в файле CSS замените текущий селектор body следующим кодом.

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

    В этом примере вы используете body селектор для задания background и color свойств, так как элементы, видимые на веб-странице, находятся внутри <body> элемента, они наследуют заданные цвета <body>.

  4. В CSS-файле удалите правила с селекторами #msg и ul, чтобы они также унаследовали тот же шрифт от <body>.

  5. Не забудьте сохранить файл, выбрав 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);
}

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

    Снимок экрана: веб-сайт с примененной темной темой и с разделом

  7. Измените атрибут класса <body>, чтобы вернуться к светлой теме по умолчанию.

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