Опубликован: 14.08.2003 | Доступ: свободный | Студентов: 14886 / 6879 | Оценка: 3.91 / 3.85 | Длительность: 04:12:00
Специальности: Разработчик интернет-проектов
Теги:
Лекция 1:
Назначение и применение CSS
Способы применения CSS
Под способами применения CSS мы в данном разделе понимаем форму декларирования стиля на HTML-странице и форму связывания описания стиля отображения элемента разметки с самим элементом. Речь идет о том, где и в какой форме автор страницы (или дизайнер) описывает стиль, и как и в какой форме на него ссылается.
Итак, различают четыре способа применения стилей:
- переопределение стиля в элементе разметки ;
- размещение описания стиля в заголовке документа в элементе STYLE ;
- размещение ссылки на внешнее описание через элемент LINK ;
- импорт описания стиля в документ.
Переопределение стиля
<H1 STYLE="font-weight:normal; font-style:italic; font-size:10pt;"> Заголовок первого уровня </H1>
Атрибут style можно применить внутри любого элемента разметки. Например, мы можем через style определить ширину и выравнивание элемента hr (горизонтальное отчеркивание):
<HR STYLE="width:100px;">
Очевидно, что не все параметры стиля можно установить для конкретного элемента разметки. О типах элементов и соответствующих параметрах стилей мы поговорим в разделе "Понятия блочного и строкового элементов".
Здесь же нужно отметить следующее: стили разработаны в первую очередь для управления отображением текста. Не следует увлекаться стилями при управлении отображением нетекстовых элементов HTML-разметки.
Элемент STYLE
Применение элемента STYLE — это основной способ внедрения каскадных таблиц стилей в ткань HTML-документа. Помимо управления отображением элементов разметки, элемент STYLE позволяет описывать стилевые свойства элементов, которые можно изменять при программировании на JavaScript.
Элемент STYLE дает возможность определить стиль отображения для:
- стандартных элементов HTML-разметки ;
- произвольных классов ( селектор CLASS );
- НTML-объектов ( селектор ID ).
К сожалению, работа с селекторами в браузерах различных производителей может преподносить различного рода сюрпризы, для избежания которых следует придерживаться стандартов W3C.
Понятие селектора, применение селекторов и формальный синтаксис CSS мы обсудим в разделах "Синтаксис" и " Наследование и переопределение ".
Стандартные элементы разметки описываются в элементе STYLE следующим образом:
<HEAD>
<STYLE>
p { color:darkred;text-align:justify;
font-size:8pt; }</STYLE>
</HEAD>
<BODY>
...
<P>
Этот параграф мы используем как пример
применения описания стиля для стандартного
элемента HTML-разметки.
</P>
...
</BODY>Теперь все параграфы документа будут отображаться стилем из элемента STYLE, если только стиль не будет каким-либо способом переопределен. В STYLE можно определить стиль любого элемента разметки.
Ссылка на внешнее описание
Ссылка на описание стиля, расположенного за пределами документа, осуществляется при помощи элемента LINK, который размещают в элементе HEAD . Внешнее описание может представлять собой файл, содержащий описание стилей. Описание стилей в этом файле будет по синтаксису в точности совпадать с содержанием элемента STYLE.
Ниже приведен пример ссылки на внешнее описание стилей:
<LINK TYPE="text/css" REL="stylesheet"
HREF="http://intuit.ru/my_css.css">Здесь важны значения атрибутов REL и TYPE. Атрибут REL должен иметь значение stylesheet. Type может принимать значения text/css или text/javascript. Второй тип описания стилей введен Netscape. Его мы в данном учебном курсе не обсуждаем.
Атрибут HREF задает универсальный локатор ресурса (URL) для внешнего файла описания стилей. Это может быть ссылка на файл с любым именем, а не только на файл с расширением *.css.
Импорт описания стилей
Импорт описателей стилей в некотором смысле составляет конкуренцию представленному выше указанию на внешний описатель стиля.
Импортировать стиль можно либо внутрь элемента STYLE, либо внутрь внешнего файла, который представляет собой описатель стиля. Оператор импорта стиля должен предшествовать всем прочим описателям стилей:
<STYLE>
@import url(http://intuit.ru/style.css)
A { color:cyan;text-decoration:underline; }
</STYLE>Импортируемый стиль можно переопределить либо через описатель элемента в STYLE, либо через атрибут элемента STYLE.
