Позиционирование и визуализация элементов страниц

Позиционирование и визуализация элементов страниц

Стили включают в себя способ установки элемента методом позиционирования. Данный метод основан на задании конкретных координат для каждого элемента. В каскадных листах стилей позиционирование описан свойством position, который имеет нижеприведённые значения:

• absolute - начало координат левый верхний угол.
• retative - относительное позиционирование, где "ноль" назначается согласно HTML-коду.
• static - местоположение неизменно, относительно значений HTML-кода.
• fixed - фиксация элемента на странице (элемент неподвластен "лифту").

Изменить положение элемента в CSS можно и путём смещения его по оси X (свойство left), по оси Y (свойство top) и оси Z (назначение слоев определяет свойство z-index). Создавать такие стили отдельно от тэга не целесообразно, потому как каждая позиция у элемента уникальна на странице. Пример: <DIV style="position: absolute; top: 200px; left: 160px; z-index: -1">элемент страницы</DIV> .

Стили также позволяют добавлять элементам эффекты визуализации, т.е менять их облик и способ отображения на экране. Менять прозрачность элемента призвано свойство visibility и его значения visible (элемент видим), hidder (элемент не виден) и collapse (скрывает текст или элементы таблиц). Код записывается в таком виде: style="visibility: _значение ".

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

STYLE="clip: rect (_top_right_bottom_left), где _top и др. - числа в px урезания изображения с каждой из сторон и последовательность их неизменна.

Свойство стиля overtlow отвечает за визуализацию элемента в заданной ему области. Значения:

• auto - появление прокрутки, если размер элемента будет больше области.
• scroll - появление прокрутки независимо от размеров элементов и области.
• hidder - элемент обрезается по границе области.
• visible - элемент будет растягивается или сжимается по пределам области.

Отображение на экране элементов регулирует свойство display и его значения:

• none - элемент не отображается.
• block - элемент помещается в отдельный абзац.
• inline - вставка текста в текущий абзац.
• list-item - элемент списка.
• table - блочная таблица (применяется только к тэгу <TABLE>).
• inline-table - текстовая таблица (применяется только к тэгу <TABLE>).
• table-cell - ячейка таблицы (применяется только к тэгам <TH> и <TD> ).
• table-column - столбец таблицы (применяется только к тэгу <COL>).
• table-row - строка таблицы (применяется только к тэгу <TABLE>).
• table-caption - блочная таблица (применяется только к тэгу <CAPTION>).
• table-row-group - группа строк таблицы (применяется только к тэгу <TBODY>).
• table-column-group - группа столбцов таблицы (применяется только к тэгу <COLGROUP>).
• table-footer-group - группа подзаголовков таблицы (применяется только к тэгу <THEAD>).
• table-header-group - группа заголовков таблицы (применяется только к тэгу <THEAD>).

Посредством стилей можно делать обтекание элементов. Осуществляется это при помощи свойства float, где значение left указывает на обтекание с левой стороны, а right с правой. Аналогично применяется свойство clear (выбор стороны элемента, которой нельзя соприкасаться с предыдущем элементом). Пример: IMG {clear: left} .

Задание

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