44

6 Практическая работа №6. Таблицы стилей CSS

6.1Цель работы

1.Изучить фреймовую модель построения web-страниц, возможности использования гипертекстовых ссылок во фреймах, правила организации фреймов

итеги создания фреймов и параметры тега вставки гипертекстовых ссылок.

2.Получить навыки использования технологии фреймов и навигации в любой фреймовой модели при создании web-страниц.

6.2 Порядок выполнения работы

1.Ознакомиться с каскадными таблицами стилей CSS: методами связывания таблиц стилей с HTML-документами, правилами заданиями (определения стиля (селекторы, идентификаторы, определения и их значения), использованием классов в определении стилей, группирование и наследованием стилей при создании web-страниц (пункт 4.4).

2.Создать web-страницу, которая представлена следующим образом:

−web-страница использует таблицу стилей, подсоединенную методом связывания (за основу рекомендуется взять результаты практической работы №1 и №2); продемонстрировать использование не менее двух стилей к каждому элементу HTML-документу; в этой же таблице стилей определить классы и идентификаторы стилей CSS;

−в данном же HTML-документе использовать стили, определенные методом внедрения и методом встраивания в конкретный тег HTML-документа; объяснить, как применяются к одним и тем же элементам HTML-документа стили, заданные разными методами связывания, т.е. каскадирование (последовательное применение стилей к некоторому элементу языка HTML, при котором устанавливается иерархия применения листов стилей).

3. Оформить отчет по практической работе №6 и защитить его у преподавателя. Пример титульный листа отчета по практической работе приведен в приложении А.

45

6.3 Содержание отчета

1.Титульный лист.

2.Формулировка задания на практическую работу №6.

3.Гипертекстовая разметка созданных web-страниц (HTML-код) и таблиц стилей CSS, выполненных в соответствии с пунктом 6.2.

4.Ответы на контрольные вопросы.

6.4 Методические указания

Основным понятием CSS является стиль, т. е. набор правил оформления и форматирования, который может быть применен к различным элементам webстраницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (цвет, размер, положение на странице и т. п.) необходимо каждый раз описывать эти свойства, даже если на одной страничке должно располагаться большое количество таких элементов, ничуть не отличающихся один от другого. Другими словами, необходимо столько же раз (сколько таких элементов) вставить один и тот же кусок HTML-кода в страничку, увеличивая размер файла и время загрузки на компьютер просматривающего ее пользователя.

CSS действует более удобным и экономичным способом. Для присвоения какому-либо элементу определенных характеристик требуется один раз описать этот элемент и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который нужно оформить соответствующим образом, должен принять свойства стиля, описанного в таблице стилей.

Более того, можно сохранить описание стиля не в тексте web-страницы, а в отдельном файле – это позволит использовать описание стиля на любом количестве web-страниц, а также изменить оформление любого количества страниц, исправив лишь описание стиля в одном (отдельном) файле. Кроме того, CSS позволяет работать со шрифтовым оформлением страниц на гораздо более вы-

46

соком уровне, чем стандартный HTML, избегая излишнего утяжеления страниц графикой.

Для управления форматированием HTML-документа можно использовать несколько таблиц стилей, при этом браузер определяет приоритетность применения таблиц. Возникает своего рода «каскад» таблиц, что определяет название технологии CSS – Cascade Style Sheets (каскадные таблицы стилей).

6.4.1Методы связывания таблиц стилей и HTML-документов

Существует четыре способа связывания документа и таблицы стилей:

1.связывание – позволяет использовать одну таблицу стилей для форматирования многих страниц HTML;

2.внедрение – позволяет задавать все правила таблицы стилей непосредственно в самом HTML-документе;

3.встраивание в теги документа – позволяет изменять форматирование конкретных элементов страницы;

4.импортирование – позволяет встраивать в документ таблицу стилей, расположенную на сервере.

Связывание: Расположение описания стилей в отдельном файле (*.css) имеет смысл в случае, если планируется применять определяемые стили к большему, чем одна, количеству web-страниц. Для этого нужно создать обычный текстовый файл, описать с помощью языка CSS необходимые стили, разместить этот файл на web-сервере (или в текущем каталоге при локальной загрузке web-страницы), а в коде web-страниц, которые будут использовать стили из этого файла, нужно сделать ссылку на него. Делается это с помощью тега <LINK>, располагающегося внутри тега <HEAD> web-страниц:

<LINK REL=STYLESHEET TYPE="text/css" HREF="URL">.

Первые два параметра этого тега являются зарезервированными именами, требующимися для того, чтобы сообщить браузеру, что на этой страничке бу-

47

дет использоваться 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 файла таблицы стилей.

6.4.2Группирование стилей

Правила каскадных таблиц состоят из селектора и определения. Для уменьшения размеров таблиц стилей можно группировать разные селекторы в виде списка элементов страницы HTML, разделённых запятыми, если для них задаётся одно правило. Например, следующие правила

H1 {font-family: Verdana}

H2 {font-family: Verdana}