Оглавление

13. Теги <div> и <span>. Группировка элементов страницы

Теги <div> и <span> визуально ничего не делают. Зато они позволяют сгруппировать несколько элементов страницы в один (листинг 22). Кроме того, тег <div> используется для блочной верстки Web-страницы. Если необходимо выделить фрагмент текста внутри абзаца, то следует использовать тег <span>, так как тег <div> отобразит фрагмент на новой строке, а не внутри абзаца.

 

Листинг 22. Теги <div> и <span>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tern &lt;div&gt; и &lt;span&gt;</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div { /* Стиль для всех тегов DIV */ 
    font-size: 12pt; /* Размер шрифта */ 
	color: green; /* Цвет шрифта */ 
	font-family: "Arial"; /* Название шрифта */
    border: 1px solid black; /* Определение стиля для границы */ 
	padding: 5px; /* Размер внутренних отступов */
    }
span { /* Стиль для всех тегов SPAN */ 
    font-size: 12pt; /* Размер шрифта */
    color: red; /* Цвет шрифта */
    font-family: "Arial"; /* Название шрифта */
    font-weight: bold; /* Жирность шрифта */
    }
</style> 
</head> 
<body>
 <div>
   Элемент DIV занимает всю ширину родительского элемента 
 </div>
 <p>
   С помощью элемента <span>SPAN</span> можно отформатировать <span>фрагмент</span> внутри абзаца
 </p> 
</body> 
</html>

 

 

Элемент DIV занимает всю ширину родительского элемента

С помощью элемента SPAN можно отформатировать фрагмент внутри абзаца

 

Надо уточнить, что тег <div> позволяет не только группировать элементы, но и управлять горизонтальным выравниванием с помощью параметра align. Параметр может принимать следующие значения:
  -   center — выравнивание по центру:
           <div align="center">Элемент с выравниванием по центру</div>
  -   left — выравнивание по левому краю:
            <div align="left">Элемент с выравниванием по левому краю</div>
  -    right — выравнивание по правому краю:
            <div align="right">Элемент с выравниванием по правому краю</div>
  -    justify — выравнивание по ширине (по двум сторонам):
           <div align="justify">Элемент с выравниванием по ширине</div>

 


Примечания:
  • Параметр align является устаревшим и поддерживается только в формате Transitional. Использование в формате strict недопустимо.
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити