www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > Верстка с помощью слоев > Встроенные элементы

Встроенные элементы

контентовая версия  

Встроенными называются такие элементы web-страницы, которые являются непосредственной частью другого элемента, например, контентового абзаца. К встроенным элементам относятся теги <SPAN>, <A>, <Q>, <CODE> и др. В основном они используются для изменения вида контента или его логического выделения.

Разница между блочными и встроенными элементами следующая.

В примере 1 показано использование тега <SPAN> для выделения отдельных слов.

Пример 1. Применение встроенных элементов

Валидный HTML
Валидный CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Встроенные элементы</title>
<style type="text/CSS (ЦСС)">
.pose {
  background: #fc0; /* Цвет фона */
  margin-left: 1em; /* Отступ слева */
}

.press {
  padding: 1px; /* Поля вокруг контента */
  border: 1px dotted maroon; /* Параметры рамки */
  color: navy; /* Цвет контента */
}

.num {
  font-weight: bold; /* Жирное начертание */
  color: maroon; /* Цвет контента */
}
</style>
</head>
<body>

<p><span class="pose">Лягте животом на пол</span>. Соедините стопы вместе, согнув ноги в коленях и развернув их в стороны. Руки за головой. Тяните голову руками вверх и вперед до полного сокращения <span class="press">мышц живота</span>. Задержитесь на две секунды. Выполните <span class="num">восемь</span> повторений.</p>

</body>
</html>

Результат примера показан ниже (рис. 1).

Рис. 1

Рис. 1. контент, оформленный с помощью стилей

В данном примере тег <SPAN> и стили используются для выделения различными способами фрагментов контента. В частности, выделение происходит за счет фонового цвета, рамки вокруг контента и сменой его цвета.

Встроенные элементы можно превращать в блочные с помощью свойства display и его значения block. Также возможно и обратное действие через аргумент inline (пример 2).

Пример 2. Свойство display

Валидный HTML
Валидный CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Встроенные элементы</title>
<style type="text/CSS (ЦСС)">
.notetitle {
  border: 1px solid black; /* Параметры рамки */
  border-bottom: none; /* Убираем границу снизу */
  padding: 3px; /* Поля вокруг контента */
  display: inline; /* Устанавливаем как встроенный элемент */
  background: #ffeebf; /* Цвет фона */
  font-weight: bold; /* Жирное начертание */
  font-size: 90%; /* Размер шрифта */
  margin: 0; /* Убираем отступы */
  white-space: nowrap; /* Запрещены переносы контента */
}

.note {
  border: solid 1px #634f36; /* Параметры рамки */
  background: #f3f0e9; /* Цвет фона */
  padding: 7px; /* Поля вокруг контента */
  margin: 0 0 1em 0; /* Значение отступов */
}
</style>
</head>
<body>

<p class="notetitle">Примечание</p>
<p class="note">Исходя из различных критериев, основными из которых являются показатели целесообразности и эффективности приложенных усилий, можно однозначно сказать следующее. А именно, что достижение желаемых результатов требует гибкого подхода, основанного на опыте и глубоком понимании смысла вышеизложенного.</p>

</body>
</html>

Результат примера приведен на рис. 2.

Рис. 2

Рис. 2. Замена блочного элемента на встроенный

В данном примере блочный тег <P> отображается на web-странице как встроенный элемент. Это требуется для того, чтобы ширина фона и рамки равнялась ширине самого контента с учетом полей. А, как известно, ширина блочных элементов не зависит от ширины содержимого, поэтому и приходится представлять тег <P> в виде встроенного элемента. В принципе, аналогичным решением будет использовать вместо <P> тег <SPAN>.

Встроенные элементы применяются не только для управления видом контента, но также и при верстке web-страниц, например, для изменения положения слоев. В примере 3 показано, как рисунок накладывать поверх блока с контентом.

Пример 3. Наложение слоев

Валидный HTML
Валидный CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Встроенные элементы</title>
<style type="text/CSS (ЦСС)">
.send {
  background: #d6d3a2; /* Цвет фона */
  padding: 5px; /* Поля вокруг контента */
  padding-left: 45px; /* Отступ слева */
}

.pic {
  position: relative; /* Относительное позиционирование */
  top: -20px; /* Смещаем слой вверх */
  left: 3px; /* Сдвигаем слой вправо */
}
</style>
</head>
<body>

<div class="send">Отправить ссылку на эту статью другу</div>
<div><span class="pic"><img src="mail.gif" width="45" height="38" alt=""></span></div>

</body>
</html>

Результат примера представлен на рис. 3.

Рис. 3

Рис. 3. Положение рисунка относительно контента

В данном примере изменение положения слоя происходит за счет установки относительного позиционирования (параметр position со значением relative) с последующим сдвигом относительно исходного расположения. Для чего применяются параметры left и top. Заметьте, что первоначальное место, где была картинка, резервируется, поэтому ниже контента и рисунка имеется дастаткова большой отступ.

В примере 3 можно вообще отказаться от добавления тега <DIV>, заменив его тегом <SPAN> и таким образом, полностью перейти на встроенные элементы. Полученный результат, естественно, будет отличаться своим видом, также придется несколько подкорректировать и стили (пример 4).

Пример 4. Использование тега SPAN

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Встроенные элементы</title>
<style type="text/CSS (ЦСС)">
.send {
background: #d6d3a2; padding: 5px; padding-left: 10px;
}

.pic {
position: relative; top: 20px; left: 14px;
}
</style>
</head>
<body>

<div>
<span class="pic"><img src="mail.gif" width="45" height="38" alt=""></span>
<span class="send">Отправить ссылку на эту статью другу</span>
</div>

</body>
</html>

Результат примера показан ниже (рис. 4).

Рис. 4

Рис. 4. Положение рисунка относительно контента

За счет того, что тег <SPAN> не начинается с новой строки, рисунок и контент в данном примере находятся на одной линии. Поэтому вертикального отступа под контентом, как в случае предыдущего примера, здесь нет. Зато появился отступ сверху.

Резюме

Встроенные элементы удобно использовать для изменения вида и стиля контента, в частности, отдельных символов и слов. Для этой цели обычно применяется универсальный тег <SPAN>, который самостоятельно никак не модифицирует содержимое, но легко объединяется со стилями через классы или идентификаторы. За счет чего с помощью этого тега можно легко управлять видом и положением отдельных фрагментов контента или рисунков.

Для верстки встроенные элементы применяются реже, чем элементы блочные. Это связано в основном с тем, что внутрь встроенных элементов не допускается вкладывать контейнеры <DIV>, <P> и подобные широко распространенные теги. Тем не менее, блочные и встроенные элементы удачно дополняют друг друга, поскольку позволяют на всех уровнях менять вид составляющих web-страниц.

Статья опубликована: 10.02.2009 Последнее обновление: 30.04.2009
Поиск по сайту
Верстка с помощью слоев
Разделы
Теги по теме

DIV
Элемент DIV является блочным элементом и предназначен для выделения фрагмента объекта с целью изменения вида содержимого.

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

SPAN
Тег SPAN предназначен для определения встроенных элементов объекта.

CSS (ЦСС) по теме

background
Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту.

border
Параметр позволяет одновременно установить толщину, стиль и цвет рамки вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.

display
Многоцелевой атрибут, который определяет, как элемент должен быть показан в файле.

left
Для позиционированного элемента определяет расстояние от левого края родительского элемента, не включая отступ, поле и ширину рамки, до левого края дочернего элемента. Отсчет координат зависит от значения параметра position.

margin
Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента.

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

position
Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на web-странице.

top
Для позиционированного элемента определяет расстояние от верхнего края родительского элемента, не включая отступ, поле и ширину рамки, до верхнего края дочернего элемента.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект