Основы Web-инжиниринга. Часть 1. Громов Ю.Ю - 56 стр.

UptoLike

ВУЗ: 

ТГТУ | Тамбов

Составители: 

Рубрика: 

Совершенно естественно, что по набору атрибутов управления отображением (атрибуты описания стиля) строковые и
блочные элементы отличаются. Упрощенно можно сказать, что атрибуты описания стиля строкового элемента являются
подмножеством атрибутов описания стиля блочного элемента.
Обобщениями блочного и строкового элементов с точки зрения стилей выступают элементы DIV и SPAN соответствен-
но.
DIV играет роль универсального блока. Блочный элемент всегда отделен от прочих элементов страницы (контекста)
пустой строкой. DIV не несет никакой смысловой нагрузки. Часто говорят, что DIV – это раздел страницы. Но на самом деле
его применение имеет смысл только в контексте CSS. Никаких правил по умолчанию для отображения DIV не существует.
Это просто новая строка текста.
DIV позволяет применить атрибуты стиля, связанные с границей блока и отступами блока от границ старшего элемента,
а также "набивку", т.е. отступ от границы блока до границы вложенного элемента (рис. 26):
<DIV STYLE="margin:20px;padding:10px;">
Блочный элемент, заданный элементом разметки DIV.
<P>Для него определена граница и отступы как от границ старшего элемента разметки, так и для вложенных в него
элементов разметки.</P>
</DIV>
В данном примере внутри окна браузера расположен блочный элемент (DIV), внутрь которого помещен еще один блоч-
ный элемент (P). DIV имеет белый фон и границу.
Рис. 26
Если текст будет просматриваться браузерами, не поддерживающими CSS, элемент DIV использовать не рекомендует-
ся. В этом случае лучше применить параграф или другой подходящий по смыслу элемент разметки из стандартного набора
HTML.
Элемент разметки 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>
Результат выполнения этого кода представлен на рис. 27.
Рис. 27
<SPAN STYLE="font-weight:bold;">предложение <SPAN STYLE= "font-style:italic;"> с пересекающимися </SPAN> сти-
лями</SPAN>
Этот код приводит к результату, показанному на рис. 28.

Страницы