Свойства форматирования отдельных блоков

2016-09-16

322

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 1 2 34

К данному разделу относятся свойства для форматирования полей, обрамления и отступов блока. Данную группу свойств можно разделить на несколько подгрупп.

1). Свойства форматирования поля имеют числовое значение, отображающее ширину поля элемента:

- margin-top: верхнее поле элемента;

- margin-bottom: нижнее поле элемента;

- margin-left: левое поле элемента;

- margin-right: правое поле элемента;

- margin: устанавливает значение всех полей одновременно.

2). Свойства форматирования отступов имеют числовое значение, отображающее ширину отступа элемента:

- padding-top: верхний отступ элемента;

- padding-bottom: нижний отступ элемента;

- padding-left: левый отступ элемента;

- padding-right: правый отступ элемента;

- padding: устанавливает значение всех отступов одновременно.

3). Свойства форматирования обрамления, имеющие значение thin (тонкий), medium (средний), thick (толстый), устанавливают ширину обрамления элемента:

- border-top-width: верхнее обрамление элемента;

- border-bottom-width: нижнее обрамление элемента;

- border-left-width: левое обрамление элемента;

- border-right-width: правое обрамление элемента;

- border-width: устанавливает значение для толщины всех обрамлений одновременно.

4). Свойства, определяющие цвет обрамления:

- border-top-color: цвет верхнего обрамления элемента;

- border-bottom- color: цвет нижнего обрамления элемента;

- border-left- color: цвет левого обрамления элемента;

- border-right- color: цвет правого обрамления элемента;

- border- color: цвет обрамления со всех сторон элемента.

5). Свойства, определяющие тип обрамления:

- border-top-style: тип обрамления элемента сверху;

- border-bottom- style: тип обрамления элемента снизу;

- border-left-style: тип обрамления элемента слева;

- border-right-style: тип обрамления элемента справа;

- border-style: тип обрамления элемента.

Перечисленные свойства могут принимать следующие значения: none (обрамление отсутствует), solid (обрамление сплошной линией), double (обрамление двойной линией, сумма толщин линий и расстояние между ними устанавливается с помощью свойства border-width), groove (обрамление линией с углублением), ridge (обрамление линией с тенью), inset (элемент как будто находится ниже уровня фона), outset (элемент отображается как выпуклый).

Установка ширины, типа и цвета обрамления можно задать используя свойства: border-top, border-bottom, border-left, border-right, border.

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

Каскадные таблицы стилей являются эффективным средством, выполняющим компоновку элементов в окне браузера. Позиционирование HTML-элемента на странице выполняется с помощью свойства position, значением которого могут быть: absolute (абсолютный способ позиционирования), relative (относительный способ позиционирования), static (статический способ позиционирования).

Задание к лабораторной работе №4

С помощью тэгов <TABLE>, <TR>, <TD>, <TH> задайте таблицу с тремя колонками, в которую поместите список студентов своей подгруппы. Для отображения имен и фамилий используйте все свойства форматирования шрифта и текста, для задания цвета шрифта, фона таблицы и документа примените соответствующие свойства стилевых таблиц. Выравнивание выполните, используя свойства форматирования отдельных блоков.

ПРАКТИЧЕСКИЙ ПРИМЕР ИСПОЛЬЗОВАНИЯ КАСКАДНЫХ ТАБЛИЦ СТИЛЕЙ

Создавать блоки элементов для последующего их форматирования по различным правилам можно и без фреймовой структуры или обычных таблиц. Этому способствует реализация блочной модели в браузере. Каждый блок задается как отдельный слой, в который можно вкладывать другие слой, размеры и свойства форматирования для которых определяются отдельно. Отдельные проблемы могут возникнуть при установке точных размеров ячеек (блоков) и при использовании для просмотра различных браузеров, но решение этих проблем лежит в совершенствовании умения разработчика.

Рассмотрим пример задания 7 блоков в одном документе, используя CSS и один дескриптор <DIV>:

<html>

<head>

<!--

body {margin: 10px 10px 10px 10px;

padding: 0;

background: transperent;}

#level1 {border-style: solid;}

#level2 {margin-left: 150px;

padding-left: 10px;

border-style: double;

background: transperent;}

#level3 {border-style: groove;}

#level4 {margin-right: 150px;

padding-right: 10px;

border-style: double;

background: transperent;}

#lewel5 {border-style: ridge;}

# lewel6 {background: blue;}

# lewel7 {background: steelblue;}

</style>

</head>

<body>

Верхний блок

Средний блок

</div>

Нижний вложенный блок

</div>

</body>

</html>

Результат данного кода можно увидеть на рис. 3

Рис.3 Пример задания блоков с помощью вложенных слоев

2016-09-16

322

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 1 2 34

Обсуждение в статье: Свойства форматирования отдельных блоков

Обсуждений еще не было, будьте первым... ↓↓↓