Оптимизация CSS
Используя группирование и наследование оптимизируйте приведённый стиль.
CSS
Заголовки
Сделайте страницу, показанную на рис. 1.
Рис. 1
Асуанская плотина
Сделайте страницу, показанную на рис. 1. Обратите внимание на межстрочный интервал.
Рис. 1
Чередующиеся квадраты
Сделайте набор квадратов, у которых меняется цвет заливки (рис. 1). При наведении на любой квадрат его цвет меняется на оранжевый (рис. 2).
Рис. 1
Рис. 2
Батарейка
Сделайте страницу, как показано на рис. 1. Размеры всех частей заданы в пикселах и не меняются в процессе масштабирования окна. Для каждой батарейки постарайтесь обойтись одним элементом.
Рис. 1
Квадратный корень
Сделайте уравнение как показано на рис. 1. Знак корня должен отображаться корректно, независимо от используемого числа.
Рис. 1
Стихотворение
Оформите стихотворение, как показано на рис. 1.
Рис. 1
Рамка
Придумайте три способа создания блока, показанного на рис. 1. Ширина блока может задаваться в процентах или пикселах, высота фиксирована.
Рис. 1
Рамка вокруг текста
Придумайте пять способов создания рамки вокруг абзаца произвольного текста (тега <p>). Изменять и модифицировать код HTML нельзя, все изменения делаются только через стили. Кроссбраузерность можно не учитывать.
Квадраты
Для приведённого кода создайте стиль, с помощью которого можно получить результат, представленный на рис. 1. Страница должна корректно отображаться в браузерах IE8+, Firefox 5+, Opera 11+ и Chrome.
Рис. 1. Вид квадратов, оформленных с помощью стилей
Последняя линия справа
Придумайте три способа, как убрать последнюю линию справа от ссылки. При этом допускается только редактировать стили без изменения HTML-кода внутри <body>.
Рис. 1. Ссылки с линией справа
Цитата
С помощью стилей оформите страницу, как показано на рис. 1. Размер и положение кавычек можно установить по своему желанию.
Рис. 1. Цитата в кавычках
Отступы между блоков
Аня написала следующий код (пример 1) и получила страницу, показанную на рис. 1. Но Ане нужно, чтобы не было отступов между блоками, а также справа и слева от блоков. Какие изменения в код для этого требуется внести?
Нумерация страниц
Используя приведенный код HTML, оформите его с помощью стилей, как показано на рис. 1.
Рис. 1. Нумерация страниц
Отступ под изображением
Миша вставил на страницу фотографию совы в рамке (рис. 1), но в браузере под фотографией отображается небольшой отступ. Подскажите Мише пять способов, как его убрать.
Рис. 1. Отступ под фотографией