2. Самостоятельная работа

Задание: создать сайт-опросник

Лабораторная работа № 7 Каскадные таблицы стилей

Цель: освоить теги html, синтаксис языка

Результат обучения: Студент должен научиться применять каскадные таблицы стилей в документах HTML.

В последнее время я все реже и реже встречаю такой элемент, как линии. Теперь их увидишь разве что в гостевых книгах, или на форумах. Линия задается тэгом <Hr> и не требует закрывающего тэга:

Параметры линии:

(1) <Hr align="right"> (center или left)

(2) <Hr width="30%"> (ширина линии в процентах/пикселях)

(3) <Hr size="6"> (толщина линии)

(4) <Hr NoShade> (отмена объемности)

(5) <Hr color="cc0000"> (цвет линии, только в IE)

Не злоупотребляейте параметром Color, т.к. он действует только в Интернет Иксплорер (если вам так хочется все же цветную линию, то сделайте, допустим красную картинку 1x1 пиксель и вставьте ее в свой документ. Тут вам приходятся параметры картинок height и width. Пусть height=1, а width=500 - вот вам и линия).

Каскадные таблицы стилей представляют собой описание различных элементов Web-страницы, с точки зрения внешнего вида, поведения и т.п. и являются альтернативным способом форматирования текста. Их основная задача состоит в отделении формата Web-страницы от её содержимого. Один раз, указав свойства каждого элемента в текстовом файле с расширением .css и назначив им свойства стиля, Вы можете подключить его к неограниченному количеству различных документов, раз и навсегда отказавшись от необходимости назначать свойства каждому конкретному объекту. И еще одно неоспоримое преимущество: для того, чтобы изменить стиль оформления какого-либо элемента всех страниц Вашего сайта, достаточно подправить одну строку кода в одном файле. Удобно!

Каскадные таблицы стилей стали доступны только с версии Netscape-Navigator 4.0 и IExplorer 4.0.

Селекторы

Итак, параметры и директивы CSS описываются по принятым правилам в специальном файле с расширением .css. Общий синтаксис записи стилей всех элементов HTML выглядит следующим образом:

Название элемента { свойство: значение;}

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

H1 {color: blue; font-size: 20pt;}

Такая директива CSS называется селектором. Все, что содержится в фигурных скобках, называется определением селектора. Каждое определение содержит перечисление свойств и значений, которые разделяются точкой с запятой. Очевидно, что селектор управляет внешней формой отображения объектов HTML и может содержать только те свойства и значения, которые характерны для того или иного элемента.

Если в нескольких разных селекторах используются одни и те же определения, то их можно сгруппировать между собой: сначала идет перечисление через запятую всех элементов, использующих одинаковое определение, затем в фигурных скобках указываются их свойства и значения. Синтаксис записи следующий:

Название Элемента 1, Название Элемента 2…Название элемента N {свойство: значение;}

Например, H1, H2, H3, H4 {font-family: Helvetica; color: red; font-size: 30pt;}

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

<H1>Каскадные таблицы стилей – это<STRONG> круто!</STRONG></H1>

В окне браузера слово «круто» отобразится жирным шрифтом зеленого цвета. То есть элемент <STRONG> унаследовал присвоенные тегу <H1> свойства, поскольку последний является «старшим» тегом, директивой более высокого уровня.

Именно на принципе наследования свойств одного элемента другим строится простой метод описания единых параметров отображения для всех видимых элементов web- страниц. Представьте, если Вы включите в листинг Вашего css-файла директиву:

BODY{background: white; color: black; font-family: sans-serif; font-size: 10pt;}

то все элементы web-страницы, так как они являются по умолчанию дочерними директивами тега <BODY>, будут автоматически наследовать его свойства.

Для практической реализации сказанного, создайте в блокноте Html-документ под именем five.html и внесите теги:

<Html>

<Head> <Title> Работа с каскадными таблицами </Title>

<Style type=”text/css”>

body {background-color:lime; color:white;}

p {font-size:300%; background-color:teal; text-align:right;}

</Style>

</Head>

<body>

<P > Любовь твоя жаждет так много

Рыдая, прося, упрекая </P>

</Body>

</Html>

В приведенном примере теги <Style type=”text/css”> и </Style> осуществляют интеграцию инструкций CSS непосредственно в web-страницу. Обратите внимание, что они являются составляющими заголовка документа <HEAD>.