Встроенные элементы
Встроенными называются такие элементы web-страницы, которые являются непосредственной частью другого элемента, например, контентового абзаца. К встроенным элементам относятся теги <SPAN>, <A>, <Q>, <CODE> и др. В основном они используются для изменения вида контента или его логического выделения.
Разница между блочными и встроенными элементами следующая.
- Встроенные элементы могут содержать только данные или другие встроенные элементы, а в блочные допустимо вкладывать другие блочные элементы, встроенные элементы, а также данные. Иными словами, встроенные элементы никак не могут хранить блочные элементы.
- Блочные элементы всегда начинаются с новой строки, а встроенные таким способом не акцентируются.
- Блочные элементы занимают всю доступную ширину, например, окна браузера, а ширина встроенных элементов равна их содержимому плюс значения отступов, полей и границ.
В примере 1 показано использование тега <SPAN> для выделения отдельных слов.
Пример 1. Применение встроенных элементов
<!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=utf-8">
<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. контент, оформленный с помощью стилей
В данном примере тег <SPAN> и стили используются для выделения различными способами фрагментов контента. В частности, выделение происходит за счет фонового цвета, рамки вокруг контента и сменой его цвета.
Встроенные элементы можно превращать в блочные с помощью свойства display и его значения block. Также возможно и обратное действие через аргумент inline (пример 2).
Пример 2. Свойство display
<!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=utf-8">
<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. Замена блочного элемента на встроенный
В данном примере блочный тег <P> отображается на web-странице как встроенный элемент. Это требуется для того, чтобы ширина фона и рамки равнялась ширине самого контента с учетом полей. А, как известно, ширина блочных элементов не зависит от ширины содержимого, поэтому и приходится представлять тег <P> в виде встроенного элемента. В принципе, аналогичным решением будет использовать вместо <P> тег <SPAN>.
Встроенные элементы применяются не только для управления видом контента, но также и при верстке web-страниц, например, для изменения положения слоев. В примере 3 показано, как рисунок накладывать поверх блока с контентом.
Пример 3. Наложение слоев
<!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=utf-8">
<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. Положение рисунка относительно контента
В данном примере изменение положения слоя происходит за счет установки относительного позиционирования (параметр 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=utf-8">
<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. Положение рисунка относительно контента
За счет того, что тег <SPAN> не начинается с новой строки, рисунок и контент в данном примере находятся на одной линии. Поэтому вертикального отступа под контентом, как в случае предыдущего примера, здесь нет. Зато появился отступ сверху.
Резюме
Встроенные элементы удобно использовать для изменения вида и стиля контента, в частности, отдельных символов и слов. Для этой цели обычно применяется универсальный тег <SPAN>, который самостоятельно никак не модифицирует содержимое, но легко объединяется со стилями через классы или идентификаторы. За счет чего с помощью этого тега можно легко управлять видом и положением отдельных фрагментов контента или рисунков.
Для верстки встроенные элементы применяются реже, чем элементы блочные. Это связано в основном с тем, что внутрь встроенных элементов не допускается вкладывать контейнеры <DIV>, <P> и подобные широко распространенные теги. Тем не менее, блочные и встроенные элементы удачно дополняют друг друга, поскольку позволяют на всех уровнях менять вид составляющих web-страниц.
Статья опубликована: 10.02.2009 | Последнее обновление: 30.04.2009 |