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

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

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

Блочные и строковые элементы

В описании элементов разметки языка HTML существует понятие строкового (in-line) элемента разметки и блочного (block) элемента разметки. Формально они определены в DTD SGML-описания языка HTML. Объяснить различие между блочным и строковым элементами можно на примере:

параграф — это блочный элемент разметки;
выделение курсивом — это строковый элемент разметки.

Блочные элементы можно вкладывать друг в друга, но они не должны пересекаться. Строковые элементы можно как вкладывать, так и пересекать (согласно DTD и практике старых версий браузеров), но последнее делать не рекомендуется.

Очевидно, что по набору атрибутов управления отображением (атрибуты описания стиля) строковые и блочные элементы отличаются. Упрощенно можно сказать, что атрибуты описания стиля строкового элемента являются подмножеством атрибутов описания стиля блочного элемента.

Обобщениями блочного и строкового элементов, с точки зрения стилей, являются элементы DIV и SPAN, соответственно.

Элемент DIV

DIV играет роль универсального блока. Блочный элемент всегда отделен от прочих элементов страницы (контекста) пустой строкой. DIV не несет никакой смысловой нагрузки. Часто говорят, что DIV — это раздел страницы. Но на самом деле его применение имеет смысл только в контексте CSS. Никаких правил по умолчанию для отображения DIV не существует. Это просто новая строка текста.

DIV позволяет применить атрибуты стиля, связанные с границей блока и отступами блока от границ старшего элемента, а также "набивку", т.е. отступ от границы блока до границы вложенного элемента: (открыть)

<DIV STYLE="border-color:#003366;
border-width:1px;
margin:20px;padding:10px;">
Блочный элемент, заданный элементом разметки DIV.
</DIV>
<P>Для него определена граница и отступы как от границ старшего элемента разметки, так и для вложенных в него элементов разметки.</P>

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

Элемент SPAN

Элемент разметки SPAN — это обобщенный строковый элемент разметки, применение которого не приводит к образованию блока текста. Он может заменить элементы FONT, I, B, U, SUB, SUP и т.п. Приведем примеры таких соответствий:

HTML-элемент CSS-аналог
<FONT COLOR=red> ...</FONT> <SPAN STYLE="color:red;">...</SPAN>
<I>...</I> <SPAN STYLE="font-style:italic;">...</SPAN>
<B>...</B> <SPAN STYLE="font-weight:bold;">...</SPAN>
<U>...</U> <SPAN STYLE="text-decoration:underline;"> ... </SPAN>
  и т.п.

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

<B>предложение <I>с пересекающимися</B> стилями</I>

предложение с пересекающимися стилями

<SPAN STYLE="font-weight:bold;">предложение <SPAN STYLE="font-style:italic;">с пересекающимися</SPAN> стилями</SPAN>

предложение с пересекающимися стилями

Применение элемента SPAN ограничено браузерами, которые поддерживают CSS. При этом не все атрибуты спецификации CSS поддерживаются в браузерах. Например, атрибут vertical-align, который призван заменить элементы SUP и SUB, не поддерживается ни одним из браузеров.

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