Применение каскадных таблиц CSS для создания HTML-документа

Практическая работа №9

Тема: Применение каскадных таблиц CSS для создания HTML-документа

Цель: закрепить на практике знания по использованию каскадных таблиц стилей для форматирования web-документа

Время выполнения: 2 часа

Теоретический материал:

Стилевые спецификации являются просто набором правил, которые включают в себя селектор (имя HTML-элемента, атрибута CLASS или ID), связанный со стилевым свойством (например, font-family), после которого следует двоеточие и допустимое значение (или значения) этого свойства. В стилевую спецификацию может быть включено несколько правил, разделенных точкой с запятой.

Информация о стиле оформления элементов может быть включена в документ тремя основными способами: 1) можно связать документ с внешней стилевой спецификацией (или импортировать файл стилевых спецификаций в Web-страницу); 2) внедрить глобальную стилевую спецификацию (действующую в пределах одной Web-страницы) в заголовок гипертекстового документа; 3) определить внутренний стиль для отдельного HTML-элемента.

К элементам web-страницы можно применять различные статические и динамические фильтры. Фильтры – это эффекты изменения внешнего вида графики и текста на странице. Фильтр можно задать как свойство в таблице стилей, используя запись вида:

filter : название фильтра (параметр1, параметр2, … , параметрN).

Ход работы и задания:

1.       Создайте в своей папке на диске D файл с именем style.css.

2.       В файле style.css опишите произвольные стили (не менее четырёх свойств для каждого) для следующих элементов: абзац, весь документ, таблица, заголовок H1;

3.       Создайте файл с именем primer.html. Подключите в нём файл style.css с помощью тэга <link> и продемонстрируйте применение всех стилей на некотором абзаце, таблице, заголовке H1 и всём документе.

4.       Создайте файл с именем primer2.html. В нём опишите стиль для позиционирования изображений с помощью тэга <style>. Продемонстрируйте на конкретном примере.

5.       Создайте файл с именем primer3.html. Отформатируйте некоторый текст с помощью атрибута style. Получите следующий текст (см. рисунок) с помощью стилей и статического фильтра shadow подкорректировав параметры (цвет тени можно задать произвольно):

6.       В файле primer4.html продемонстрируйте на изображении и тексте воздействие следующих статических фильтров по порядку: blur, fliph, flipv, wave, xray.

7.       Создаем глянцевое CSS меню

Меню является важной составной частью веб-дизайна, по той простой причине, что если нет меню, посетители практически ничего не смогут сделать на сайте.

К счастью имеется CSS, при помощи которого, можно создать очень красивое полностью кросс-браузерное меню.

Основа CSS меню

#navigation {

width: 950px;

height: 50px;

margin: 0;

padding: 0;

background-image: url(images/navigation_bar.jpg);

background-repeat: no-repeat;

background-position: left top;

}

#navigation ul {

list-style: none;

margin: 0;

padding: 0;

}

#navigation ul li {

display: inline;

margin: 0px;

}

#navigation ul li a {

height:28px;

display: block;

float: left;

color: #333333;

text-decoration: none;

font-family: Arial;

font-size: 12px;

font-weight: bold;

background-image: url(images/menu_separatorline.jpg);

background-repeat: no-repeat;

background-position: right center;

padding-top: 17px; padding-right: 15px;

padding-bottom: 0;

padding-left: 15px;

}  

#navigation ul li a:hover {

color:#FFF;

background-image: url(images/button_hover.jpg);

background-repeat: repeat-x;

background-position: left top;

}  

#navigation ul li#active a {

color:#FFF;

background-image: url(images/button_hover.jpg);

background-repeat: repeat-x;

background-position: left top;

}

Это основа меню. Помните, что для правильного функционирования меню вам нужно скачать необходимые изображения. Теперь нам осталось только указать div id="navigation" в нашем html.

весь html код меню имеет следующий вид:

<div id="navigation">

<ul>

<li><a href= "#">Home</a></li>

<li id="active"><a href="#">About us</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Portfolio</a></li>

<li><a href="#">Clients</a></li>

<li><a href="#">News & Events</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

В результате у вас получится красивое глянцевое CSS меню.

Контрольные вопросы:

1.       Для чего используются стили CSS?

2.       Какие основные команды применяются для оформления текста?

Какие основные команды применяются для оформления фона?

Скачано с www.znanio.ru