Знакомство / Классы в CSS [11/14]
×

Классы в CSS [11/14]

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

Такое решение есть и оно называется «классы»!

Вспомните шаг, когда мы пытались стилизовать абзацы с помощью внешних стилей, но все они получились одинакового цвета.

Нужно было сделать следующее: добавить абзацам разные классы, а в CSS использовать селекторы не по тегу, а по классам.

Класс — это всего лишь один из атрибутов HTML-тегов, например:

<p class="important">...</p>
<p class="help">...</p>

В CSS можно задавать стили только для элементов с определённым классом. Для этого используется селектор по классу, который пишется так .имя-класса, например:

.important { color: red; } — выберет все теги с классом "important"
.help { color: green; }    — выберет все теги с классом "help"

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

Имя класса может содержать в себе латинские символы, цифры, символ дефиса - и подчёркивания _ и начинаться оно должно с латинского символа.

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <title>Классы в CSS</title> </head> <body> <h1>Конспект курса</h1> <p><strong>Парные теги.</strong></p> <p><strong>Одиночные теги.</strong></p> <p><strong>Атрибуты тегов.</strong></p> <p><strong>Инлайновые (встроенные) стили.</strong></p> <p><em>Внешние стили.</em></p> <p><em>Стилизация по классам.</em></p> </body> </html>
CSS
body { font-family: Tahoma, serif; } h1 { color: #999999; } strong { color: green; } em { color: red; } .learned-ok { color: green; } .learning-in-progress { color: orange; } .not-learned { color: red; }
HTML Academy

Переделываем всё c нормальными классами:

  1. Для начала удалите из HTML-кода все strong и em, чтобы внутри p остался только текст.
  2. Первым четырём абзацам добавьте класс learned-ok.
  3. Пятому абзацу добавьте класс learning-in-progress.
  4. Шестому абзацу добавьте класс not-learned.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.