5. Практический пример использования каскадных таблиц стилей
Создавать блоки элементов для последующего их форматирования по различным правилам можно и без фреймовой структуры или обычных таблиц. Этому способствует реализация блочной модели в браузере. Каждый блок задается как отдельный слой, в который можно вкладывать другие слой, размеры и свойства форматирования для которых определяются отдельно. Отдельные проблемы могут возникнуть при установке точных размеров ячеек (блоков) и при использовании для просмотра различных браузеров, но решение этих проблем лежит в совершенствовании умения разработчика.
Рассмотрим пример задания 7 блоков в одном документе, используя CSS и один дескриптор <DIV>:
<html>
<head>
<style type=text/css>
<!--
body {margin: 10px 10px 10px 10px;
padding: 0;
background: transperent;}
#level1 {border-style: solid;}
#level2 {margin-left: 150px;
padding-left: 10px;
border-style: double;
background: transperent;}
#level3 {border-style: groove;}
#level4 {margin-right: 150px;
padding-right: 10px;
border-style: double;
background: transperent;}
#lewel5 {border-style: ridge;}
# lewel6 {background: blue;}
# lewel7 {background: steelblue;}
</style>
</head>
<body>
<div id=level1>
<div id=level2>
<div id= lewel6>
Верхний блок
<div id= lewel6>
Средний блок
</div>
</div>
<div id=level3>
<div id=level4>
<div id= lewel5>
Нижний вложенный блок
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Результат данного кода можно увидеть на рис. 3
Рис.3 Пример задания блоков с помощью вложенных слоев
Задание к лабораторной работе №5
С помощью каскадных таблиц стилей и свойств форматирования блоков задайте страницу в виде таблицы с тремя строками и тремя столбцами. Столбцы и строки должны быть одинаковыми по ширине и высоте соответственно. Задать внешнюю границу и границы между столбцами.
Список использованных источников
1. Кэмпбел М. Стройм Web-сайты / М. Кэмпбел. – М.: Триумф, 2005. – 479 с.
2. Леонтьев Б.К. Web-дизайн: Тонкости, хитрости, секреты / Б.К. Леонтьев. – М.: СОЛОН-Пресс, 2003. – 639 с.
3. Шенгили-Робертс К. Каскадные таблицы стилей CSS/ К. Шенгили-Робертс. – М.:Вильямс, 2005. – 717 с.
4. Уикли Р. Освой самостоятельно CSS/ Р. Уикли. – М.: Вильямс, 2006. – 253 с.
5. Браун Марк Р. Использование HTML 4 / Марк Р. Браун, Джерри Хоникатт. – М.; СПб.; К.: Издательский дом «Вильямс», 1999. – 784 с.
6. Матросов А. В. HTML 4.0 / А. В. Матросов, А. О. Сергеев, М. П. Чаунин. – СПб.: БХВ – Санкт-Петербург, 2000. – 672 с.
7. Гончаров А. Самоучитель HTML. – СПб.: Питер, 2000. – 360 с.
8.Сергеев А.П. HTML и XML / А.П. Сергеев. –М.: Издательский дом «Вильямс», 2004. –880с.
Содержание
|
Введение |
3 |
|
1. Основные понятия и принципы использования таблиц CSS |
3 |
|
1.1 Связывание таблиц стилей с web-документами |
4 |
|
1.2 Свойства группирования и наследования |
5 |
|
Задание к лабораторной работе №1 |
6 |
|
2. Особенности использования различных селекторов |
7 |
|
2.1 Специальные селекторы |
7 |
|
2.2 Псевдоклассы используемые в HTML-документах |
9 |
|
2.3 Правила приоритетности при использовании таблиц стилей |
10 |
|
Задание к лабораторной работе № 2 |
11 |
|
3. Модель форматированияэлементов |
11 |
|
Задание к лабораторной работе № 3 |
12 |
|
4. Свойства, влияющие на форматирование элементов |
13 |
|
4.1 Шрифты |
14 |
|
4.2 Свойства, форматирующие текст |
16 |
|
4.3 Свойства, задающие цвет и фон |
16 |
|
4.4 Свойства форматирования отдельных блоков |
17 |
|
4.5 Визуальное форматирование |
18 |
|
Задание к лабораторной работе № 4 |
19 |
|
5. Практический пример использования каскадных таблиц стилей |
19 |
|
Задание к лабораторной работе № 5 |
20 |
|
Список использованных источников |
21 |
«WEB-ДИЗАЙН. Часть 1. ОСНОВЫ ПРИМЕ-
НЕНИЯ ТАБЛИЦ CSS ДЛЯ РАЗРАБОТКИ
WEB-ПРИЛОЖЕНИЙ».
Методические указания к лабораторным работам по курсу «Web-дизайн» для студентов специальности «Защита информации» факультета информационных технологий
СОСТАВИТЕЛЬ:
Доцент кафедры Прикладной информатики и защиты информации, к.ф.-м.н. Алексей Алексеевич Локтев,
РЕДАКТОР
Подписано в печать . Формат 6084 1/16. Уч.-изд. л. 1,0.
Усл. печ. л. Бумага для множительных аппаратов. Тираж экз.
Заказ № .
Отпечатано в отделе оперативной полиграфии Российского университета инноваций