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

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

Стили включают в себя средство установки элемента методом позиционирования. Этот метод основан на задании конкретных координат для каждого элемента. В каскадных листах стилей позиционирование описан свойством 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.