Практическая работа № 8.
Тема: Использование каскадных списков стилей CSS.
Задание:
1. Выполнить запись текста с использованием фона и эффекта мигания.
2. Выполнить запись текста с эффектом тени.
3. Выполнить запись текста на рисунке.
4. Создать стиль оформления меню сайта.
Указания к выполнению работы.
1. Для задания строки с текстом белого
цвета на сером фоне создайте стиль с
именем .textи используем в нём следующие параметры
оформления:
|
Параметр |
Описание |
Значение |
|
color |
цвет текста |
white |
|
background |
цвет фона текста |
gray |
|
font-size |
размер шрифта |
16pt |
|
font-family |
гарнитура шрифта |
Arial |
|
text-decoration |
тип эффекта |
Blink |
Для задания стилей в заголовочной части
документа вставляется контейнер <STYLE>
… </STYLE> в котором
указываются стили. Например, этот стиль
будет выглядеть так, как показано на
рисунке.
Здесь использован эффект декорации текста миганием : « text-decoration:blink ».
Помните, что для указания названия произвольного стиля перед его именем ставится точка.
Для того чтобы применить стиль к элементу страницы нужно вставить в тег этого элемента атрибут CLASS= … со значением названия стиля (без точки). Для выделения произвольного фрагмента текста используется контейнер <DIV>… </DIV>. Так, для того чтобы на странице появился текст с указанными параметрами стиля введите следующий фрагмент кода:
2. Теперь зададим стили для текста в заголовке страницы. Используем два стиля: основа и тень. В первом зададим текст красного цвета размера 80 и шрифтаArial, а во втором шрифт светло-серого цвета такого же размера и гарнитуры.
Так как при наборе текста на странице он будет размещаться на разных строках, то нужно использовать параметры отступа текста от верхнего края, а именно отступ основы от верхнего края своей строки с отрицательным значением для обеспечения эффекта наложения текста.
.ten {color :#DBDBDB; text-align: center; margin-left: 10px; font-size: 70px; font-family: Arial}
.osnova {color: red; font-size: 70px; margin-top: -80px; font-family: Arial}
Помните, что для указания названия произвольного стиля перед его именем ставится точка.
3. Для наглядности изменений в отступах строк, поместим текст в таблицу.
<table width=100% cellpadding=0 cellspacing=0 border=1>
<tr>
<td align=center valign=top>
<div class=ten> Текст с тенью </div>
<div class=osnova> Teкст с тенью </div>
</tr></td>
На рисунке приведён результат выполнения задания.
4. Добавим строку к созданной таблице.
В первую ячейку таблицы поместим рисунок
небольшого размера. 
После картинки поместим текст в этой же ячейке. Изначально текст будет размещён под картинкой в одну строку. Поэтому ограничим ширину ячейки атрибутом width, а для текста укажем стиль, введя его непосредственно в тег <DIV>:
Здесь использованы отступы справа и
сверху для того чтобы текст поместился
на картинку. Размер и цвет, а так же
отступы в зависимости от размеров вашей
картинки укажите самостоятельно.
5. Стилизуйте меню сайта. Для этого создайте любой рисунок с текстурой, например в формате gifи поместите его в папку с вашей страницей. Размеры рисунка примерно 100 на 50 точек. В заголовочной части создайте стиль оформления ячейки таблицы. В нём укажите высоту и ширину ячейки (ширину рассчитайте в зависимости от ширины страницы и количества ячеек), фоновый рисунок для ячейки, параметры шрифта в ячейке и параметры выравнивания текста.
|
Параметр |
Описание |
Значение |
|
height |
высота |
40px |
|
width |
ширина |
200px |
|
background-image |
фоновый рисунок |
url(image.gif) |
|
font-family |
гарнитура шрифта |
Comic Sans MS |
|
font-size |
размер шрифта |
20 |
|
text-align |
выравнивание текста |
center |
Обратите внимание на формат задания фонового рисунка: background-image: url( адрес ); Теперь в той же строке, что и рисунок создавайте ячейки с созданным стилем и в качестве текста указывайте названия страниц сайта:
На странице результат должен выглядеть примерно так:
6. Под таблице введите бегущую строку (тег <MARQUEE>) такого же стиля, как и строка созданная в пункте1.