Шаблон HTML-кода слоя выглядит так:
<div style="Свойства слоя">
Содержимое слоя
</div>
Между открывающим и закрывающим тегом div определяютcz элементы, из которых состоит слой. Свойства слоя - это свойства таблицы стилей CSS. Записываются они согласно принятым правилам
свойство:значение
Естественно, свойства слоя могут также состоять из нескольких пар свойство-значение, которые отделяются друг от друга точками с запятой.
Основные из свойств слоя:
- Position – способ позиционирования
- Left расстояние от левого края:
- Width ширина слоя
- top расстояние от верхнего края
- height высота слоя
- background-color – фоновый цвет слоя
- background-image -фоновое изображение
- style – задание параметров отображения (стиль слоя).
- z-index –положение в пространстве относительно других слоев
- id – идентификатор слоя.
Остановимся поподробнее на каждом из свойств.
Горизонтальное позиционирование
Позиционирование по горизонтали задается свойством left, путем задания отступа по оси X левого верхнего угла слоя относительно точки отсчета, которая определяется свойством Position
|
|
Синтаксис:
{left: значение}
Допускается указывать эту величину в разных единицах измерения.
- n px
- n %
- auto
- число
Можно подстраховаться и принудительно задать в качестве единиц измерения пиксели:
left:50px.
Вертикальное позиционирование
Позиционирование по вертикали задается свойством top, атрибут позволяет задать Y-координату левого верхнего угла слоя относительно точки отсчета, которая определяется свойством Position.
Синтаксис:
{top: значение}
Допускается указывать эту величину в разных единицах измерения.
- n px
- n %
- auto
- число
Задание высоты слоя
Свойство height позволяет задать высоту слоя в окне браузера:
Синтаксис:
{height: значение}
Допускается указывать эту величину в разных единицах измерения.
- n px
- n %
- auto
- число
Задание ширины слоя
Свойство width позволяет задать ширину слоя в окне браузера:
Синтаксис:
{width: значение}
Допускается указывать эту величину в разных единицах измерения.
- n px
- n %
- auto
Если указанная ширина слоя меньше, чем ширина картинок, таблиц и прочих неразрывных элементов, ширина слоя будет определяться наиболее широким элементом.