Откройте документ rainbow.html в программе Notepad++. Посмотрите, как выглядит эта страница в браузере.
Определите стили классов p.red, p.yellow, p.orange, p.cyan, p.blue, p.green, p.purple так, чтобы прямоугольники, в которых располагаются абзацы текста, раскрасились в цвета радуги. Текст синего прямоугольника перекрасьте в серый цвет, а фиолетового - в белый.
Определите стили классов так, чтобы абзацы располагались и были оформлены как в образце. Содержимое тега body менять не нужно. Ширину и горизонтальные отступы задавайте в % (от ширины окна).
Кроме тех свойств, которые уже встречаются при описании стиля p в документе rainbow.html, вам могут пригодиться свойства box-shadow, border-radius, margin-left, margin-right. Найдите их описание в справочнике. О том, как можно задавать значения свойств элементов, прочтите в статье "Значения стилевых свойств".
Вариант 1
Вариант 2
Вариант 3
Вариант 4
Вариант 5
Перенесите описание стилей в отдельный файл с расширением css. В исходный файл добавьте ссылку на связанные стили с помощью тега link. Проверьте, что результат не изменился.
Обменяйтесь с одноклассниками файлами с описанием стилей (прежде чем копировать, проверьте, что у ваших файлов разные имена). Что нужно изменить в html-документе, чтобы подключить чужие стили? Проверьте результат.
Откройте в программе Notepad++ html-документ с текстом (например, этот файл с заданием или 1.html). Оформите его на свой вкус, задавая значения стилевых свойств для каждого тега, встречающегося в документе.