Веб-инструмент
Веб-мастерская
Теги <DIV> и <SPAN> визуально ничего не делают. Зато они позволяют сгрупперовать несколько элементов страницы в один. Если необходимо выделить фрагмент текста внутри абзаца, то следует использовать тег <SPAN>, так как тег <DIV> отобразит фрагмент на новой строке, а не внутри абзаца.
Теги <DIV> и <SPAN>
<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. Параметр может принимать следующие значения:
<div align = "center">Элемент с выравниванием по центру</div>
<div align = "left">Элемент с выравниванием по левому краю</div>
<div align = "right">Элемент с выравниванием по правому краю</div>
Атрибут position позволяет задать способ позиционирования элемента. Он может принимать одно из трех значений:
Значения атрибутов top и left определяют, насколько относительно или абсолютно позиционированный элемент сместиться соответственно вниз и вправо относительно своего обычного положения или родительского элемента. Эти атрибуты могут иметь отрицательные значения. Статически позиционированные элементы не имеют атрибутов top и left.
Атрибуты width и height задают соответственно ширину и высоту блока позиционированного элемента. Если атрибуты не заданы, то блок займет всю ширину родительского элемента, а его высота будет определена по содержимому блока. Если содержимое не помещается в блок заданного размера, то он будет отображаться в соответствии со значением атрибута overflow.
Атрибут overflow задает поведение блока, чье содержимое вылезает за его границы. Может принимать следующие значения:
Атрибут 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 задает, виден ли элемент на экране веб-браузера. Он может принимать следующие значения:
Невидимый элемент все равно занимает место на веб-странице. Для того чтобы скрыть элемент и убрать его с веб-страницы, можно воспользоваться атрибутом 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, в этом случае все содержимое страницы остается на своих первоначальных местах.
Обсудить на форуме