Форматирование блока

Блоком в CSS считают фрагмент страницы, помещенный в контейнеры <p>, <div>, <body>. Форматированием блока является изменение ширины и высоты блока, отступов от границ, присвоение цвета и внешнего вида для границ и общего фона. Габариты блока в стилях указываются в свойствах width и height. В некоторых слу­чаях для дизайна страниц приходится прибегать к переменным габаритам блока. Для этого в CSS предусмотрены свойства min-width, min-height (минимальная ширина и высота) и max-widht/max-height (максимальные их значения).

Внешние отступы от блока диктуют параметры: margin (отступы одинаковые), margin-left (отступ слева), margin-right (отступ справа), margin-top (отступ сверху) и margin-bottom (отступ снизу). Аналогично применяется свойство padding (отступ внутри блока).

При задании фона блока div нужно применить свойство background-color. Если в качестве фона нужно использовать изображение, то применяется свойство background-image, где в значении указывается адрес и имя файла изображения. Ограничить повторение изображения в фоне блока можно свойством background-repeat и его значениями: repeat-x (повторение по оси X), repeat-y (по оси Y) и no-repeat (без повторений). При необходимости зафиксировать фоновое изображение, чтобы оно оставалось неподвижным при прокручивании используйте значение fixed в свойстве background-attachment.

Для изменения параметров рамки блока применяются свойства, начинающие со слова border. Так при помощи border-width можно устано­вить одинаковые значения для всех четырёх границ блока, а в значениях border-left-width, border-right-width, border-top-width и border-bottom-width описывается конкретная граница. По аналогичному представлению при­меняются: border-color (цвет линий рамки блока) и border-style (внешний вид линий). Про последнее свойство нужно добавить, что они имеют не­сколько, значений:

solid, groove, ridge, double - линии рамки будут сплошными, вдавлен­ными, выпуклыми и двойными соответственно.

inset - блок полностью вдавленный.

outset - объёмный вид блока.

none - нет линий.

Из вышеизложенного можно предположить, что стиль блока может иметь следующий вид:

.box {width: 200px; height: 100px; margin-left: 5px; margin-right: 5px; margin-top: 10px; margin-bottom: 15px; padding: 5px; border-width-left: 1px; border-width-right: 0px; border-width-top: 0px; border-width-bottom: 5px; border-color: #202020; border-style: solid}

Лабораторная работа 5 (4 часа). Динамика и JavaScript на Веб –странице.

Скрипты могут размещаться во всех частях документа HTML или в отдельном файле с расширением js. Скрипт можно разместить в дескрипторе HTML. Эта устаревшая конструкция называется обработчиком события. Событие представляет собой указатель на метод – обработчик события, который вызывается при возникновении события. Пример:

<!-- Использование кнопки и события -->

<html> <body>

<script type="text/javascript" src="/jsprogr/pr.js"></script>

<form>

<input type="button" value="click me" onclick="window.alert(' Hello!')">

</form>

<a href="pr3.htm" onclick="alert('Links clicked')"> click me</a>

<h1 align=center>Проверка типа браузера</h1>

<P><hr>

<form >

<input type=button name=browser value=Browser

onClick= "alert(window.navigator.appName+navigator.appVersion)">

</form>

</body>

</html>

Имя и версия браузера в примере возвращаются через свойства navigator.appName и navigator.appVersion после нажатия кнопки "Browser".

Выполнить следующие задания на JavaScript: