Интернет Университет информационных технологий 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 вопросы »

Наследование и переопределение

При обсуждении технических спецификаций часто бывает полезно вникнуть в смысл названия. В названии принято точно определять суть и назначение стандарта или спецификации. Описание стилей отображения элементов HTML-разметки носит название "Каскадные таблицы стилей". Со словом "стилей" все более-менее понятно. Под словом "таблицы" следует понимать набор свойств элемента разметки, который можно представить в виде строки в таблице свойств, т.е. элементы разметки — строки, а свойства — столбцы. А вот слово "каскадные" требует пояснения.

Во-первых, существует иерархия элементов разметки (дерево объектов на странице). Во-вторых, свойства этих объектов могут наследоваться. Таким образом в дереве объектов образуется ветвь, которая ведет к листу дерева — элементу разметки, например, элементу списка или параграфу. Его свойства определяются элементами разметки, в которые вложен элемент, и описателями стиля для данного элемента:

Это начало первого раздела, который сдвинут на 10 пикселов вправо относительно левого края параграфа и на 10 пикселов вниз относительно стандартной границы параграфа.
Это начало второго раздела, который сдвинут относительно предыдущего раздела на 10 пикселов, а относительно параграфа — на 20 пикселов. Данный раздел имеет красную строку с отступом в 10 пикселов и смещен относительно предыдущего раздела на 20 пикселов.
  • первый элемент списка
  • второй элемент списка
Список сдвинут относительно второго раздела на 10 пикселов, а относительно текущего параграфа — на 30 пикселов. Первая строка не является строкой начала параграфа, поэтому на нее отступ не распространяется (только в Netscape).

Предыдущий текст закодирован в терминах разделов и списка следующим образом:

<DIV STYLE="margin-left:10px;margin-top:10px;">
Это начало первого раздела, который сдвинут на 10 пикселов вправо относительно левого края параграфа и на 10 пикселов вниз относительно стандартной границы параграфа.
<DIV STYLE="margin-left:10px;margin-top:20px;text-indent:10px;font-style:italic;">
Это начало второго раздела, который сдвинут относительно предыдущего раздела на 10 пикселов, а относительно параграфа — на 20 пикселов. Данный раздел имеет красную строку с отступом в 10 пикселов и смещен относительно предыдущего раздела на 20 пикселов.
<UL STYLE="margin-left:10px;">
<LI>первый элемент списка
<LI>второй элемент списка
</UL>
Список сдвинут относительно второго раздела на 10 пикселов, а относительно текущего параграфа — на 30 пикселов. Первая строка не является строкой начала параграфа, поэтому на нее отступ не распространяется (только в Netscape).
</DIV>
</DIV>

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

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

При использовании стилей действуют следующие правила старшинства стилей:

  • сначала применяются стили браузера по умолчанию;
  • стили браузера по умолчанию переопределяются прилинкованными стилями (элемент LINK заголовка документа);
  • прилинкованные стили переопределяются описаниями стилей в элементе STYLE;
  • стили элемента STYLE переопределяются атрибутом STYLE в любом из элементов разметки.

Не все атрибуты стиля могут наследоваться. Например, "набивка" (отступ содержания элемента от его границ) элемента BODY не наследуется вложенными в него элементами и определяется по умолчанию или прописывается для каждого элемента отдельно. Алгоритмы наследования в Internet Explorer и в Netscape Navigator разные, поэтому для единства отображения элементов следует прописывать стиль по максимуму атрибутов.

Перейти к вопросам »
версия для печати: 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. Краткий курс
Будилов В.А., Наука и техника.
все книги по курсу »