Встроенные элементы - Форум
( Новые сообщения ·Правила форума ·Поиск ·RSS )
Страница 1 из 11
Модератор форума: Ezhik 
Форум » Верстка веб-страниц » Верстка с помощью слоев » Встроенные элементы
Встроенные элементы
EvgenyДата: Среда, 03.03.2010, 20:21 | Сообщение # 1
Контр-Адмирал
Группа: Администраторы
Сообщений: 287
Статус:
Встроенными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. К встроенным элементам относятся теги < SPAN>, < A>, < Q>, < CODE> и др. В основном они используются для изменения вида текста или его логического выделения.

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


  • Встроенные элементы могут содержать только данные или другие встроенные элементы, а в блочные допустимо вкладывать другие блочные элементы, встроенные элементы, а также данные. Иными словами, встроенные элементы никак не могут хранить блочные элементы.
  • Блочные элементы всегда начинаются с новой строки, а встроенные таким способом не акцентируются.
  • Блочные элементы занимают всю доступную ширину, например, окна браузера, а ширина встроенных элементов равна их содержимому плюс значения отступов, полей и границ.

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

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

Code
<!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. Текст, оформленный с помощью стилей

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

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

[small]Пример 2. Свойство display[/small]

Code
<!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.


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

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

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

[small]Пример 3. Наложение слоев[/small]

Code
<!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.


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

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

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

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

Code
<!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).


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

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

Резюме

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

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

 
Форум » Верстка веб-страниц » Верстка с помощью слоев » Встроенные элементы
Страница 1 из 11
Поиск:

Статистика Форума
Уважаемые пользователи
Популярные темы
Недавно обновленные темы
Evgeny Репутация [ 122 ]
akkemir22 Репутация [ 113 ]
Kuks64 Репутация [ 49 ]
Gavrik Репутация [ 48 ]
Anatoliy03 Репутация [ 37 ]
MiRel Репутация [ 33 ]
hius Репутация [ 23 ]
mVizio Репутация [ 19 ]
ewa69 Репутация [ 16 ]
straik67 Репутация [ 14 ]
Прочие [ 10 ]
О програмистах и Веб-Мастерах [ 6 ]
Про детей [ 6 ]
Про автомобилистов [ 5 ]
Про женщин [ 3 ]
Блондинка сдает на права ! (МЕГА ЖЕСТЬ) [ 2 ]
Про новых русских [ 2 ]
ВАЗ-2107 1000 лошадей [ 2 ]
Новый вид ББ-кодов на вашем сайте [ 2 ]
Про компьютеры [ 1 ]
Игры на телефон бесплатно [ 0 ]
Лучшее онлайн казино. Как обыграть казино? [ 0 ]
Инвест-Проект. Прибыль каждые 5 мин. [ 1 ]
Финансовая Взаимопомощь. Каждые 24ч получаете % [ 0 ]
Играть и зарабатывать онлайн [ 0 ]
Новый Топ пользователей с аватарами для Ucoz [ 0 ]
Простой и красивый вид формы опроса [ 0 ]
Красивый информер "кто нас сегодня посетил" для Ucoz [ 0 ]
Flash радио для сайта [ 0 ]
Заработок на играх [ 0 ]