- •Федеральное агентство по образованию
- •302030, Г. Орел, ул. Московская, 65
- •Введение
- •Практическая работа №1. Шрифтовое оформление web-страниц, списки и таблицы в html-документах
- •Цель работы
- •Порядок выполнения работы
- •Содержание отчета
- •Методические указания
- •Контрольные вопросы
- •Практическая работа №2. Графические изображения. Гипертекстовые ссылки
- •Цель работы
- •Порядок выполнения работы
- •Содержание отчета
- •Методические указания
- •Контрольные вопросы
- •Практическая работа №3. Активные изображения (навигационные карты)
- •Цель работы
- •Порядок выполнения работы
- •Содержание отчета
- •Методические указания
- •Контрольные вопросы
- •Практическая работа №4. Фреймы в html-документах
- •Цель работы
- •Порядок выполнения работы
- •Содержание отчета
- •Методические указания
- •Контрольные вопросы
- •Практическая работа №5. Использование html-форм
- •Цель работы
- •Порядок выполнения работы
- •Содержание отчета
- •Методические указания
- •Контрольные вопросы
- •Практическая работа №6. Таблицы стилей css
- •Цель работы
- •Порядок выполнения работы
- •Содержание отчета
- •Методические указания
- •Методы связывания таблиц стилей и html-документов
- •Группирование стилей
- •Наследование стилей
- •Классы и идентификаторы стилей
- •Свойства элементов, управляемых с помощью css
- •Контрольные вопросы
- •Литература
- •Приложение а (рекомендуемое) Пример оформления титульного листа отчета по практической работе
- •Приложение б (справочное) Основные элементы таблиц стилей css
Методы связывания таблиц стилей и html-документов
Существует четыре способа связывания документа и таблицы стилей:
связывание – позволяет использовать одну таблицу стилей для форматирования многих страниц HTML;
внедрение – позволяет задавать все правила таблицы стилей непосредственно в самом HTML-документе;
встраивание в теги документа – позволяет изменять форматирование конкретных элементов страницы;
импортирование – позволяет встраивать в документ таблицу стилей, расположенную на сервере.
Связывание: Расположение описания стилей в отдельном файле (*.css) имеет смысл в случае, если планируется применять определяемые стили к большему, чем одна, количеству web-страниц. Для этого нужно создать обычный текстовый файл, описать с помощью языка CSS необходимые стили, разместить этот файл на web-сервере (или в текущем каталоге при локальной загрузке web-страницы), а в коде web-страниц, которые будут использовать стили из этого файла, нужно сделать ссылку на него. Делается это с помощью тега <LINK>, располагающегося внутри тега <HEAD> web-страниц:
<LINK REL=STYLESHEET TYPE="text/css" HREF="URL">.
Первые два параметра этого тега являются зарезервированными именами, требующимися для того, чтобы сообщить браузеру, что на этой страничке будет использоваться CSS. Третий параметр – HREF=«URL» – указывает на файл, который содержит описания стилей.
Внедрение: Второй вариант, при котором описание стилей располагается в коде web-странички, внутри тега <HEAD>, в теге <STYLE type="text/css">... </STYLE>. В этом случае можно использовать эти стили для элементов, располагающихся в пределах одной web-страницы. Параметр type="text/css" является обязательным и служит для указания браузеру использовать CSS.
Встраивание в теги документа: Третий вариант, когда описание стиля располагается непосредственно внутри тега элемента, который описывается. Это делается с помощью параметра STYLE, используемого при применении CSS с большинством стандартных тегов HTML. Этот метод нежелателен, он приводит к потере одного из основных преимуществ CSS – возможности отделения информации от описания оформления информации. Впрочем, если необходимо описать лишь один элемент, этот вариант расположения описания стилей также вполне применим.
Импортирование: В теге <STYLE> можно импортировать внешнюю таблицу стилей с помощью свойства @import таблицы стилей:
@import: url(mystyles.css).
Его следует задавать в начале стилевого блока или связываемой таблицы стилей перед заданием остальных правил. Значением свойства @import является URL файла таблицы стилей.
Группирование стилей
Правила каскадных таблиц состоят из селектора и определения. Для уменьшения размеров таблиц стилей можно группировать разные селекторы в виде списка элементов страницы HTML, разделённых запятыми, если для них задаётся одно правило. Например, следующие правила
H1 {font-family: Verdana}
H2 {font-family: Verdana}
можно сгруппировать и задать в виде одного правила со списком селекторов
H1, H2 {font-family: Verdana}
Аналогично группируются определения, только в списке они разделяются точками с запятой. Следующие правила форматирования заголовка первого уровня
H2 {font-weight: bold}
H2 {font-size: 14pt}
H2 {font-family: Verdana}
можно сгруппировать в виде одного правила, сгруппировав определения:
H2 (font-weight:bold; font-size:14pt; font-family:Verdana;}
Некоторые свойства имеют собственный синтаксис группирования, связанный с заданием значений нескольких свойств в одном. Например, предыдущий пример при использовании свойства font запишется так:
H2 {font: bold 14pt Verdana}
При задании таблицы стилей можно свободно комбинировать все три правила группирования для уменьшения её размеров.