Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Введение в Веб программирование.doc
Скачиваний:
81
Добавлен:
07.11.2018
Размер:
4.42 Mб
Скачать

Визуальное форматирование

Свойства правил визуального форматирования, позволяют нужным образом расположить фрагменты Web-страницы в окне браузера.

position - определяет способ позиционирования блока на странице. По умолчанию HTML-элементы отображаются браузером последовательно в порядке их расположения в HTML-документе с учетом положения элементов в структуре документа. Значениями свойства position могут быть:

static – блок позиционируется в соответствии с естественным потоком отображения элементов. Это значение задается по умолчанию.

relative – определяет смещение блока относительно его естественного положения в потоке отображения элементов.

absolute – удаляет блок из естественного потока отображения и размещает блок на странице произвольным образом.

top - указывает смещение верхнего края блока относительно верхнего края родительского элемента.

bottom - задает смещение нижнего края блока относительно нижнего края родительского элемента.

left - определяет смещение левого края блока относительно левого края родительского элемента.

right - указывает смещение правого края блока относительно правого края родительского элемента.

Пример:

<img src=”img.gif” style=”position: absolute; top: 30px;

bottom: 30px; left: 30px; right: 30px;”>

float - изменяет положение блока. Значениями свойства могут быть: left – блок смещается влево, а его содержимое отображается вдоль правой стороны блока; right – блок перемещается вправо, а его содержимое выводится вдоль левой стороны блока; none – блок не смещается.

Пример:

<html>

<head>

<title> Использование стилей для создания буквицы</title>

<style type="text/css">

. letter {

font-size: 150%; /* Размер шрифта буквицы */

float: left; /* Выравнивание по левому краю */

color: green; /* Цвет буквицы */

padding: Зрх /* Отступ между буквицей и текстом */

}

</style>

</head>

<body>

<span class=”letter”>Б</span>уквица

</body>

</html>

clear - указывает стороны блока, где плавающие элементы не ставятся. По умолчанию плавающие элементы устанавливаются на всех сторонах. Значениями свойства могут быть:

left – все плавающие элементы на левой стороне блока будут опущены вниз.

right – все плавающие элементы на правой стороне блока будут опущены вниз.

none – плавающие элементы устанавливаются на всех сторонах блока.

Пример:

h1 {float: left }

width - указывает ширину блока содержимого элемента. По умолчанию ширина блока вычисляется браузером автоматически.

Пример:

p {width: 100px}

height -определяет высоту блока содержимого элемента. По умолчанию высота блока вычисляется браузером автоматически.

Пример:

p {height: 100px}

Визуальные эффекты

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

overflow - управляет поведением элемента в случае, когда его размеры не соответствуют размерам блока отображения. По умолчанию элемент не обрезается, а сжимается или увеличивается, чтобы полностью отобразиться в заданном блоке. Значениями свойства overflow могут быть:

scroll – добавляет полосы прокрутки к блоку отображения в любом случае.

hidden – обрезает элемент в соответствии с размерами блока.

auto – добавляет полосы прокрутки к блоку отображения в случае, если размеры содержимого элемента превосходят размеры блока отображения.

visible – принуждает элемент сжаться или увеличиться, чтобы полностью отобразиться в заданном блоке для рисунка или увеличивает размеры блока отображения в случае текста.

Пример:

<html>

<style type="text/css">

body { overflow: hidden }

</style>

<body>

<p>Запрет полосы прокрутки на веб-странице</p>

</body>

</html>

clip - обрезает видимое изображение элемента. По умолчанию усечение не производится. Значениями свойства clip могут быть:

границы видимого прямоугольного изображения элемента в виде rect(<top>, <right>, <bottom>, <left>), где параметры <top>, <right>, <bottom>, <left> определяют верхнюю, правую, нижнюю, левую границы видимого изображения.

auto – усечение изображения элемента не производится.

visibility - определяет, будет ли отображаться элемент в окне браузера. Значениями свойства могут быть:

visible – элемент будет отображаться.

hidden – элемент не будет выводиться на экран.