ИП 1-4 / Lab2_HTML_CSS
.docПрактическая работа № 2
Каскадные таблицы стилей
Цель: Изучение способов использования стилевой разметки. Приобретение навыков создания и применения таблицы стилей для управления представлением содержимого Web-страниц.
Задача работы – разработка таблицы стилей корпоративного Web-сайта.
Каскадные таблицы стилей
Каскадная таблица стилей (CSS – Cascade Style Sheets) позволяет определеть стили форматирования для элементов HTML-страницы. Стиль – это набор параметров, описывающих представление объекта в окне браузера – начертание и цвет шрифта, цвет фона и т.д. HTML-страница содержит множество разнообразных элементов, каждый из которых может иметь собственный стиль оформления. Набор таких стилей для группы элементов одного документа называется таблицей стилей.
Технология разработки HTML-страниц с применением таблиц стилей предполагает отдельную разметку, а затем подготовку необходимого количества таблиц стилей, определяющих особенности представления HTML-страницы.
Таблица стилей состоит из перечня определений стилей (размеры и начертания шрифтов, выравнивание текста в абзацах, цвета шрифта и фона, размеры полей, отступов, высота строки и т.д.) для определенных элементов HTML-страниц. Таблицы стилей могут быть оформлены в отдельном файле (обычно с расширением *.css), который привязывается к HTML-странице, либо могут быть включены в HTML-страницу непосредственно.
Каскадные таблицы стилей расширяют возможности разработчиков HTML-страниц и увеличивают скорость разработки. Стили, определенные один раз, могут применяться неограниченное количество раз в любом документе. Описание стилей в отдельном файле и привязка его к различным HTML-страницам Web-сайта позволяет добиться единого стиля оформления для всех страниц сайта. Кроме того при этом легко выполняется автоматическая корректировка стиля всех HTML-страниц, к которым привязан файл стилей.
Подробное описание синтаксиса CSS приведено в Приложении.
Порядок выполнения работы
-
Ознакомиться с теоретической частью.
-
Используя инструкции CSS создать внешнюю таблицу стилей для HTML-страниц сайта, разработанных в работе 1. Минимальный набор атрибутов, определяемых таблицей стилей:
• Левое поле
• Верхнее поле
• Цвет фона
• Цвет текста
• Цвет ссылок (обычных, активных, посещенных)
-
Из всех HTML-страниц сайта удалить информацию о стиле (задание цвета, размера, выравнивания и т.д.)
-
Подключить созданный файл таблицы стилей ко всем страницам сайта.
-
Просмотреть результаты в браузере.
-
Сделать выводы по работе.
Содержание отчета.
-
Цель работы
-
Разработанные HTML- и CSS-файлы.
-
Ответы на контрольные вопросы
-
Выводы по работе.
Контрольные вопросы.
-
Что такое таблица стилей?
-
Каковы преимущества использования технологи CSS?
-
Использование внешних таблиц стилей CSS
-
Использование внутренних таблиц стилей CSS
-
Использование локальных таблиц стилей CSS
-
Преимущества и недостатки внешних, внутренних, локальных таблиц стилей CSS
-
CSS инструкции управления цветом и фоном объектов
-
CSS инструкции управления границами объектов
-
CSS инструкции управления полями и отступами объектов
-
CSS инструкции управления шрифтами и текстом
-
Использование классов в CSS
-
Использование псевдоклассов в CSS