Теги <DIV> и <SPAN> визуально ничего не делают. Зато они позволяют сгрупперовать несколько элементов страницы в один. Если необходимо выделить фрагмент текста внутри абзаца, то следует использовать тег <SPAN>, так как тег <DIV> отобразит фрагмент на новой строке, а не внутри абзаца.
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример использования стилей</title>
<style>
.text1 {font-size:12px; color:#FF0000; font-family:Arial }
.text2 {font-size:12px; color:#0000FF; font-family: Verdana}
</style>
</head>
<body>
<div class="text1">
<p>Абзац1</p>
<p>Абзац2</p>
</div>
<span class="text2">
<p>Абзац3</p>
<p>Абзац4</p>
</span>
</body>
</html>
В окне веб-браузера этобудет выглядеть ТАК.
Надо уточнить, что тег <DIV> позволяет не только группировать элементы, но и управлять горизонтальным выравниванием текста с помощью атрибута align. Параметр может принимать следующие значения:
center— выравнивание по центру;-
<div align = "center">Элемент с выравниванием по центру</div> left— выравнивание по левому краю;-
<div align = "left">Элемент с выравниванием по левому краю</div> right— выравнивание по правому краю.-
<div align = "right">Элемент с выравниванием по правому краю</div>
Позиционирование элемента.
Размещение элемента в произвольном месте окна веб-браузера
Атрибут position позволяет задать способ позиционирования элемента. Он может принимать одно из трех значений:
static—статическое позиционирование (значение по умолчанию). Положение элемента в окне веб-браузера определяется его положением в тексте HTML-документа;relative— относительное позиционирование. Координаты отсчитываются относительно позиции, в которую веб-браузер поместил бы элемент, будь он статически позиционированным;absolute— абсолютное позиционирование. Координаты отсчитываются относительно левого верхнего угла родительского элемента.
Значения атрибутов top и left определяют, насколько относительно или абсолютно позиционированный элемент сместиться соответственно вниз и вправо относительно своего обычного положения или родительского элемента. Эти атрибуты могут иметь отрицательные значения. Статически позиционированные элементы не имеют атрибутов top и left.
Атрибуты width и height задают соответственно ширину и высоту блока позиционированного элемента. Если атрибуты не заданы, то блок займет всю ширину родительского элемента, а его высота будет определена по содержимому блока. Если содержимое не помещается в блок заданного размера, то он будет отображаться в соответствии со значением атрибута overflow.
Атрибут overflow задает поведение блока, чье содержимое вылезает за его границы. Может принимать следующие значения:
visible— блок расширяется так, чтобы все его содержимое отобразилось полностью (значение по умолчанию);hidden— то, что не лезет в границы блока, скрывается;scroll— у блока в любом случае отображаются полосы прокрутки;auto— если содержимое не помещается в блок, то бобавляются полосы прокрутки. Если же содержимое полностью помещается, то полосы не отображаются.
Атрибут z-index устанавливает порядок, в котором свободно позиционированные элементы будут перекрываться друг другом. Элемент с большим значением z-index перекрывает элементы с меньшим значением. Значение у родителя равно нулю.
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Позиционирование элементов</title>
<style>
P.abz3 {position: absolute; top:-75px; left: -75px; width:250px; height:250px; overflow:hidden; z-index:3; background-color:#00FF00}
P.abz5 {position:absolute; top:80px; left:50%; width:150px; height:150px; overflow:auto; z-index:3; background-color:#999999}
P.abz7 {position:relative; top:0px; left:30px}
</style>
</head>
<body>
<p>Статически позиционированный абзац1</p><br><br><br>
<p style="position:absolute; top:0px; left:120px; width:150px; height:150px; overflow:scroll; z-index:1; background-color:#999999">Абсолютно позиционированный абзац2</p>
<p class="abz3">Абсолютно позиционированный абзац3, наполовину выходит за границу окна веб-браузера и перекрывающий все остальные элементы страницы</p>
<p>Статически позиционированный абзац4</p><br><br><br>
<p class="abz5">Абсолютно позиционированный абзац5, местоположение которого заданно в процентах</p>
<p>Статически позиционированный абзац6</p>
<p class="abz7">Относительно<br>позиционированный<br> абзац7.</p>
<p>Статически позиционированный абзац8</p>
</body>
</html>
В окне веб-браузера этобудет выглядеть ТАК.
Итак, на странице восемь абзацев.
Абзац1, абзац4, абзац6, абзац8 — обычные статические абзацы.
Для абзаца2 указано абсолютное положение на странице, и он сдвинут на 120 пикселов вправо относительно левого верхнего угла веб-браузера. За счет атрибута z-index абзац2 расположен над абзацем1, так как абзац1 по умолчанию имеет значение 0, а для абзаца2 задано значение 1. Причем абзац2 всегда будет иметь полосы прокрутки.
Абсолютно позиционированный абзац3 за счет отрицательных значений атрибутов top и left оказывается наполовину за границами окна веб-браузера. За счет самого большого значения атрибута z-index абзац3 расположен и над абзацем1 и над абзацем2. У абзаца3 никогда не будет плос прокрутки.
Абзац5 демонстрирует возможность задания координат в процентах. Полосы прокрутки будут появляться только в случае необходимости.
Для абзаца7 координаты заданы относительно положений абзаца6, за счет атрибута left абзац7 сдвинут вправо на 30 пикселов, что позволяет сделать абзацс отступом.
Управление отображением элемента
Атрибут visibility задает, виден ли элемент на экране веб-браузера. Он может принимать следующие значения:
inherit—если родитель видим, то видим и элемент (значение по умолчанию);visible— элемент отображается независимо от видимости родителя;hidden— элемент скрывается независимо от видимости родителя.
Невидимый элемент все равно занимает место на веб-странице. Для того чтобы скрыть элемент и убрать его с веб-страницы, можно воспользоваться атрибутом display со значением none
Атрибуты могут задавать только начальное поведение элемента. Отобразить же скрытый элемент можно только с помощью языка программирования JavaScript. Рассмотрим пример применения атрибутов visibility и display, а заодно познакомимся с использованием языка программирования JavaScript.
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Скрытие и отображение элементов</title>
<script language="javascript">
<!--
function ChandeAbz1() {
if (abz1.style.display=="none") {
abz1.style.display="block";
}
else {
abz1.style.display="none";
}
}
function ChandeAbz2() {
if (abz2.style.visibility=="hidden") {
abz2.style.visibility="visible";
}
else {
abz2.style.visibility="hidden";
}
}
// -->
</script>
</head>
<body>
<a href="javascript: ChandeAbz1()">Щелкните на ссылке, чтобы отобразить или скрыть абзац</a>
<p id="abz1" style="display:none; background-color:#999999">Скрытый абзац</p>
<p>Демонстрация применения атрибута display</p><br>
<a href="javascript: ChandeAbz2()">Щелкните на ссылке, чтобы отобразить или скрыть абзац</a>
<p id="abz2" style="visibility:hidden; background-color: #999999">Скрытый абзац</p>
<p>Демонстрация применения атрибута visibility</p>
</body>
</html>
В окне веб-браузера этобудет выглядеть ТАК.
Итак, первая ссылка демонстрирует применение атрибута display. При щелчке на ссылке отображается скрытый абзац и все содержимое страницы сдвигается вниз. При повторном щелчке абзац скрывается и все содержимое страницы сдвигается вверх на место скрытого абзаца.
Вторая ссылка демонстрирует применение атрибута visibility. При щелчке на ссылке скрытый абзац отображается, а при повторном щелчке — скрывается. Но в отличие от того, что происходит при изменении атрибута display, в этом случае все содержимое страницы остается на своих первоначальных местах.
Комментарии(0)
Для добавления комментариев надо войти в систему и авторизоватьсяКомментирование статей доступно только для зарегистрированных пользователей:Зарегистрироваться