Знакомство / Селекторы в CSS [10/14]
×

Селекторы в CSS [10/14]

Поздравляем! Вы только что подключили внешние CSS-стили к своей HTML-страничке.

Когда вы задаёте стили тега с помощью атрибута style, браузер сразу же понимает, к какому именно тегу применить эти стили. Но когда стили подключаются с помощью внешнего файла или через тег <style>, браузер ищет стилизуемые теги с помощью «селекторов».

С селекторами вы уже немного знакомы: в предыдущем задании вы использовали селектор p, который находился перед фигурными скобочками в CSS-коде. В общем случае синтаксис CSS-правил выглядит так:

селектор {
  свойство1: значение1;
  свойство2: значение2;
  ...
}

Язык селекторов очень мощный и гибкий. Простейший тип селекторов — селекторы по имени тега: p, h1 и так далее. Когда браузер видит такой селектор, он применяет стили из правила ко всем подходящим тегам. Например, ко всем абзацам или ко всем заголовкам первого уровня.

Но, Хьюстон, у нас проблемы с конспектом! Селектор p подсветил все абзацы зелёным. А они должны быть разного цвета. Как быть?

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

Без классных наклеек и значков сейчас никуда. Заходите к нам в магазин.

Выполнить задание
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; }
HTML Academy

Познакомьтесь с простейшими селекторами:

  1. Для h1 задайте color: #999999;.
  2. Для strong задайте color: green;.
  3. Для em задайте color: red;.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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