CSS

Оптимизация CSS

Используя группирование и наследование оптимизируйте приведённый стиль.

Заголовки

Сделайте страницу, показанную на рис. 1.

Рис. 1

Рис. 1

Асуанская плотина

Сделайте страницу, показанную на рис. 1. Обратите внимание на межстрочный интервал.

Рис. 1

Рис. 1

Чередующиеся квадраты

Сделайте набор квадратов, у которых меняется цвет заливки (рис. 1). При наведении на любой квадрат его цвет меняется на оранжевый (рис. 2).

Рис. 1

Рис. 1

Рис. 2

Рис. 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. Отступ под фотографией

Страницы