Практическая работа с таблицами стилей

Практическая работа с таблицами стилей

Проверить на практике работу каскадных таблиц стилей при оформлении элементов web-страницы.

Использовать стилевые атрибуты для указания границ и фона элементов (border, background), размеров и отступов (height, width, margin, padding), размещения (position, left, top), способа отображения элементов (display), видимости (visibility, opacity), оформления текста (text-align, text-decoration, color), оформления шрифта (font)

Задание

Создайте несколько следующих блоков div шириной 200px и высотой 150px.

Номер блока	Цвет фона	Цвет границы	Толщина границы	Тип линии границы	Непрозрачность блока
	Светло-желтый	темно-красный	1px	сплошная
	#ffffe0	синий	2px	пунктир
	зеленый	#809f00	3px	dotted	0.9
	#0080ff	серый	3px	double	0.8
	#0080ff	серый	3px	groove	0.7
	#0080ff	серый	3px	ridge	0.6
	#0080ff	серый	3px	inset	0.5
	#0080ff	серый	3px	outset	visibility:hidden

Создайте несколько следующих блоков div шириной 300px и высотой 200px с текстом (примерно 50 слов).

Номер блока	Гарнитура шрифта	Цвет шрифта	Тип шрифта	Оформление текста	Размер шрифта	Внутренние отступы
	Times New Roman	темно-красный	курсив	-	9px	-
	Times New Roman	синий	жирный	-	10px	Со всех сторон 10px
	Arial	#809f00	-	подчеркнутый	12px	По бокам 15px
	Arial	темно-зеленый	-	зачеркнутый	14px	Сверху и снизу 15px
	Tahoma	#9f8000	Жирный курсив	-	16px	Только слева 20px
	Tahoma	темно-серый	Жирный курсив	подчеркнутый	16px	Только справа 20px
	Comic Sans MS	#00809f	Жирный курсив	зачеркнутый	8px	Только сверху 20px
	Comic Sans MS	темно-синий	Жирный курсив	-	15px	Только снизу 20px

Создайте несколько следующих блоков div шириной 100px и высотой 60px с тонкой (1px) темной сплошной границей и голубым фоном, абсолютным позиционированием (position: absolute) и различной глубиной по координате Z (z-index).

Номер блока	Размещение по горизонтали (left)	Размещение по вертикали (top)	Непрозрачность	Координата Z
	100px	100px	0.1
	110px	106px	0.2
	120px	112px	0.3
	130px	118px	0.4
	140px	124px	0.5
	150px	130px	0.6
	160px	136px	0.7
	170px	142px	0.8