Создание стилей

Задание 1. Классы. Цвет фона элемента и цвет текста

Откройте документ rainbow.html в программе Notepad++. Посмотрите, как выглядит эта страница в браузере.

Определите стили классов p.red, p.yellow, p.orange, p.cyan, p.blue, p.green, p.purple так, чтобы прямоугольники, в которых располагаются абзацы текста, раскрасились в цвета радуги. Текст синего прямоугольника перекрасьте в серый цвет, а фиолетового - в белый.

    При выполнении этого задания
  1. нельзя менять содержимое тега body,
  2. нельзя использовать имена цветов - только шестнадцатеричную кодировку.

Задание 2. Поля, отступы, тени, рамки и скругление углов

Определите стили классов так, чтобы абзацы располагались и были оформлены как в образце. Содержимое тега body менять не нужно. Ширину и горизонтальные отступы задавайте в % (от ширины окна).

Кроме тех свойств, которые уже встречаются при описании стиля p в документе rainbow.html, вам могут пригодиться свойства box-shadow, border-radius, margin-left, margin-right. Найдите их описание в справочнике. О том, как можно задавать значения свойств элементов, прочтите в статье "Значения стилевых свойств".

Вариант 1

Вариант 2

Вариант 3

Вариант 4

Вариант 5

Задание 3. Связанные стили

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

Обменяйтесь с одноклассниками файлами с описанием стилей (прежде чем копировать, проверьте, что у ваших файлов разные имена). Что нужно изменить в html-документе, чтобы подключить чужие стили? Проверьте результат.

Задание 4. Применение стилей к разным элементам логической разметки

Откройте в программе Notepad++ html-документ с текстом (например, этот файл с заданием или 1.html). Оформите его на свой вкус, задавая значения стилевых свойств для каждого тега, встречающегося в документе.