Корпоративные

информационные системы

методические указания к выполнению

лабораторных работ

для студентов специальности

230201 - «Информационные системы и технологии» (очная, очно-заочная, заочная формы обучения)

Лабораторная работа №4

Тема «Листы стилей»

Листы стилей

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

Напомним, что при работе в текстовом процессоре (например, Word) вы можете произ­вольным образом форматировать текст. Такая свобода появляется благодаря тому, что свое пред­ставление о том, как должен выглядеть документ, вы можете сформулировать на языке стилей. Заранее опре­деленные стили могут применяться к любому форматируемому объекту (символу, слову, абзацу, рисунку и проч.). В то же время имеется возможность уточнения формата для конкретного объекта, которому был присвоен стиль.

Приблизиться к подобной технологии при создании Web-страниц позволяют листы сти­лей, которые добавляются к обычным HTML-файлам. Пользуясь листами стилей, разработчик может с точностью до пиксела определить положение на странице любого объекта, выполнять наложение одного объекта на другой, автоматизи­ровать применение стилей к объектам и классам и т.д.

Понятие о листах стилей. Стандарты листов стилей для Web были разработаны в 1995-96 гг. и названы Cascading Style Sheets {каскадные листы стилей), или сокращенно, CSS. При­сутствие слова «каскадные» в этом термине означает, что листы стилей позволяют соз­давать иерархию стилевых свойств, согласно которой локальный стиль отменяет гло­бальный стиль. Вообще, HTML-документ представляется как структура вложенных эле­ментов различного уровня, в которой стиль элемента более низкого уровня имеет при­оритет перед стилем внешнего элемента высокого уровня.

^{Определение встроенного стиля (атрибут style)}

Прежде, чем рассматривать использование CSS, остановимся на простейшем способе задания стиля элемента HTML через атрибут style. Вы можете в процессе разработки страницы быстро изменить стиль элемента, добавив к тегу атрибут style с указанием требуемых свойств. Допустим, вы хотите, чтобы абзац был набран шрифтом 6 пункта. Для этого тег <Р> нужно записать следующим образом:

<Р style="font-size:6pt">

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

<H1><SPAN style="color:red"> 3aщитa</SPAN>компьютерных сетей</Н1>

CSS-правила

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

{font-style:italic}

В одном определении стиля может записываться несколько свойств. Свойства перечис­ляются через точку с запятой, например:

{color:blue; font-family:Arial; text-align:right}

Согласно спецификации CSS назначение стиля тому или иному элементу HTML состоит в установлении связи:

Элемент {Определение_стиля}

Например, если вы хотите, чтобы все элементы абзацев Р отображались шрифтом Arial размером 14pt, запишите следующую строку:

Р {font-family:Arial;font-size:14pt}

Это селектор типа, который устанавливает соответствие между определением стиля и типом HTML-элементов, к которым этот стиль будет применен. Элемент, к которому относится определяемый стиль, обобщенно называется селек­тором. Cелекторы обозначаются по имени элементов, к которым применяется определение сти­ля. Например, селектор Р указывает на то, что определение стиля относится к элементам Р «селек­тор типа». Селекторы нечувствительны к регистру, однако мы будем придержи­ваться принятой в CSS записи элементов прописными буквами.

Селек­тор класса

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

^{H1.blue {color:blue}} Имя класса отделяется от имени элемента точкой. Если вы хотите задать отображение разных элементов (абзацев Р, блоков DIV и т.д.) на желтом фоне. Для этого в список стилей вводится CSS-правило с точкой перед именем класса, но без указания названия элементов, например,

^{.bgyellow {background-color:yellow}}

Селектор .bgyellow обозначает класс, а выражение в фигурных скобках - определе­ние стиля, которое будет относиться к любому элементу класса bgyellow. Принадлеж­ность HTML-элемента этому классу должна быть указана в атрибуте class, например:

<DIV class="bgyellow">

<Р class="bgyellow">

<SPAN class="bgyellow">

Селекторы, начинающиеся со знака # («рамка») «селек­тор id», отвечают уникальным идентифика­торам элементов: пример - назначение стиля элементу, обозначенному в докумен­те идентификатором id="fl". Например, чтобы выделить красным цветом текст абзаца, обозначенного идентификато­ром id= "red", можно воспользоваться следующим CSS-правилом:

^{#red{color:FFOOOO}}

Нужный элемент абзаца должен содержать одноименное значение атрибута id:

<Р id="red">Этот абзац будет отображен красным шрифтом</Р>

Запись, состоящая из селектора и определения стиля, называ­ется CSS-правилом. Листы стилей - это фактически наборы CSS-правил, которые задают свойства форматирования эле­ментов документа.