Стили включают в себя способ установки элемента методом позиционирования. Данный метод основан на задании конкретных координат для каждого элемента. В каскадных листах стилей позиционирование описан свойством 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 (элемент видим), hidden (элемент не виден) и collapse (скрывает текст или элементы таблиц). Код записывается в таком виде: style="visibility: _значение ".
Изображения, которые надо обрезать, обрабатываются свойством стиля clip. Значение последнего носит название rect ему присвоены числа, которые указывают с какой стороны и сколько нужно урезать изображение. Принцип таков:
STYLE="clip: rect (_top_right_bottom_left), где _top и др. - числа в px урезания изображения с каждой из сторон и последовательность их неизменна.
Свойство стиля overtlow отвечает за визуализацию элемента в заданной ему области. Значения:
auto - появление прокрутки, если размер элемента будет больше области. scroll - появление прокрутки независимо от размеров элементов и области. hidden - элемент обрезается по границе области. 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} .
