Интернет Университет информационных технологий www.intuit.ru
мои курсы мои настройки моя корзина помощь
  Лекции
Основы web-технологий
Глава 1.
Введение в HTML-разметку
Глава 2.
Применение каскадных таблиц стилей
  8.   Назначение и применение CSS
  9.   Блочные и строковые элементы
  10.   Цвет и шрифт
  11.   Текст и списки
  12.   Позиционирование
Глава 3.
JavaScript
Глава 4.
Интерфейс Web-приложений
      Экзамен
      Ссылки к курсу

  Общение
однокурсники
форум по курсу
вопрос преподавателю

Основы web-технологий
Глава 2. Применение каскадных таблиц стилей версия для печати: HTML, PDF
Лекция #8: Назначение и применение CSS Страницы: « 1 2 3 4 вопросы »

Способы применения CSS

Под способами применения CSS мы в данном разделе понимаем форму декларирования стиля на HTML-странице и форму связывания описания стиля отображения элемента разметки с самим элементом. Речь идет о том, где и в какой форме автор страницы (или дизайнер) описывает стиль, и как и в какой форме на него ссылается.

Итак, различают четыре способа применения стилей:

  • переопределение стиля в элементе разметки;
  • размещение описания стиля в заголовке документа в элементе STYLE;
  • размещение ссылки на внешнее описание через элемент LINK;
  • импорт описания стиля в документ.

Здесь мы следуем за Джорджем Янгом из Microsoft (Cascading Style Sheets in Internet Explorer 4.0. Microsoft, 1997). Важно отметить, что в браузерах других производителей импорт стиля не поддерживается. Однако, поскольку патент на CSS1 принадлежит Microsoft, опустить импорт в нашем описании было бы неправильно.

Переопределение стиля

<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).

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

Понятие селектора, применение селекторов и формальный синтаксис 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.

Перейти к следующей странице »
версия для печати: HTML, PDF
Страницы: « 1 2 3 4 вопросы »
  Основные понятия
Каскадные таблицы стилей, ссылка на внешнее описание, импорт стилей, синтаксис, внешний файл, селектор, элемент разметки, имя класса, идентификатор объекта, объектная модель документа, наследование, переопределение, старшинство стилей.
 
  Информация о лекции
Основные понятия CSS, их назначение, определение и использование при форматировании HTML-документа.
 
  Информация о главе
Глава 2. Применение каскадных таблиц стилей
Курс посвящен изучению способов гипертекстовой разметки с применением каскадных таблиц стилей (Cascade Style Sheets).
 
  Учебники к курсу
Основы web-технологий
Основы web-технологий
Храмцов П.Б., Брик С.А., Русак А.М., Сурин А.И.,
Интернет-университет информационных технологий - ИНТУИТ.ру.
Курс лекций посвящен основам Web-технологий. В его рамках рассматриваются язык гипертекстовой разметки HTML, язык программирования динамического контента JavaScript, спецификация разработки прикладного программного обеспечения CGI и спецификация описания стилей представления информации CSS. Допущено УМО в области прикладной информатики для студентов высших учебных заведений, обучающихся по специальности 351400 "Прикладная информатика".
Dynamic HTML
Айзекс С., BHV-Санкт-Петербург.
Настольная книга Web-мастера: эффективное применение HTML, CSS и JavaScript
Коржинский С.Н., КноРус.
Практические занятия по HTML. Краткий курс
Будилов В.А., Наука и техника.
все книги по курсу »