Веб программирование. 
Веб программирование

Цель работы: освоение базовых принципов использования технологии каскадных листов стилей (CSS) и методологии разделения содержания и представления гипертекстовой информации.

Теоретические сведения.

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

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

Правило стиля состоит, по крайней мере, из следующих основных частей: селектора тега, на который распространяется правило стиля, и последующих фигурных скобок, заключающих между собой разделенные точкой с запятой пары объявлений «свойство_стиля: значение», например:

H1 {text-align: center}.

Помимо одиночных селекторов тегов возможно указание множественных и контекстных селекторов. В первом случае селекторы перечисляются через запятую, а свойства стиля применяются к каждому из перечисленных дескрипторов в случае наличия такового в гипертекстовом документе. Во втором случае селекторы перечисляются через пробел, что указывает на отношение вложенности дескрипторов. Стиль применяется только в том случае, если выполнено контекстное условие вложенности для последнего из перечисленных селекторов. Например, строка «OL OL LI {list-style: upper-roman}» означает, что заглавными латинскими цифрами будут помечаться элементы списка второго уровня.

Согласно спецификации CSS, возможно описание классов и псевдо-классов стилей. Они позволяют описать различные свойства отображения для одного и того же дескриптора (или группы дескрипторов). Отличие в описании класса стиля заключается в наличии дополнительного идентификатора (имени класса), отделяемого от селектора тега точкой. Например, строка «P.abstract {font-style:italic; margin-left:0.5cm; margin-right:0.5cm}» описывает класс стиля абзаца с именем «abstract». Для ис-пользования класса стиля при отображении дескриптора необходимо задействовать атрибут class, значением которого должно являться требуемое имя класса. Псевдоклассы аналогичны обычным классам, но соединяются с именем тега через двоеточие, а не точку, имеют предустановленные имена и не требуют наличия атрибута class.

Существует три способа присоединения стиля к тегу: внутренние стили (описание на уровне отдельного дескриптора), стили уровня документа (описание заключается в пару дескрипторов … в заголовочной части документа) и внешние таблицы стилей (описание находится в файле с расширением .css). В документах допускается использование одного или нескольких видов стилей. При этом браузер соединяет и определяет свойства стилей, начиная с внешних таблиц через локальные стили документа и заканчивая внутренними стилями. Такое каскадирование свойств и правил стилей и дало название стандарту.

Задание

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

Используя механизм классов стилей и идентификаторы объектов, создать и применить набор стилей для описания таблицы, аналогичной показанной на рис. 1. Заголовочные строки и столбцы выделены цветом, начертанием и расположением текста, отделены двойными линиями. У внутренних ячеек свой способ оформления содержимого. Должна быть возможность «группировки» ячеек по примеру того, как отделены четвёртая и пятая строки, а также четвёртый и пятый столбцы.

Рис. 1.

С помощью псевдостилей (A:link, A: hover, A: active, A: visited) описать и применить свои способы отображения гиперссылок (изменить цвет и начертание шрифта для непосещённых, выделяемых, обрабатываемых и посещённых ссылок). стиль гипертекстовый информация тег Описать и применить набор контекстных стилей для создания списка по образцу, показанному на рис. 2.

Рис. 2.

Описать класс абзаца с необязательной информацией: текст в нём отображается курсивом и меньшим кеглем по отношению к остальному тексту; слева и справа от абзаца — отступы.

Опробовать полученный стилевой файл на страницах, созданных в ходе выполнения лабораторных работ № 1 и № 2.

Ход работы

Листинг.

Index.html.

Работа № 3.

Таблица 1.

1. HTML
2. CSS
3. CGI & Perl

1. HTML
2. CSS
3. CGI & Perl

1. HTML
2. CSS
3. CGI & Perl

1. HTML
2. CSS
3. CGI & Perl

Style.css.

caption {.

caption-side: bottom;

text-align: right;

padding: 10px 0;

font-size: 14px;

}.

ol[type="A" ]{.

color: red;

}.

table {.

border-collapse: collapse;

border: 1px solid gray;

}.

/* вид непосещенной ссылки */.

a:link {.

color: red;

}.

/* вид посещенной ссылки */.

a:visited {.

color: green;

}.

/* вид активной ссылки */.

a:active {.

color: blue;

}.

/* вид ссылки, на которую указывает курсор */.

a:hover {.

color: black;

}.

#line {.

border-bottom: 2px solid #6678b1;

}.

#line_left{.

border-left: 2px solid #6678b1.

}.

#double_line_right{.

background: #e8edff;

border-bottom-style: double;

}.

th {.

width: 120px;

font-weight: normal;

color: #039;

border: 1px solid gray;

}.

#main_line {.

background: #e8edff;

border-bottom-style: double;

}.

Скриншоты.

Рисунок 1.

Вывод. В ходе данной работы были освоены базовые принципы использования технологии каскадных листов стилей (CSS) и методологии разделения содержания и представления гипертекстовой информации.