Классификации
В этой главе мы рассмотрим стили классификации, на примере которых показаны способы вывода элементов текста на экран пользователя и их значения.
display: - определяет, как будет отображаться элемент.
display: inline; - (значение по умолчанию) заставляет элемент страницы вести себя как встроенный. При этом он располагается внутри текста, его позиция и размеры рассчитываются согласно позиции и размерам текста. Пример встроенного элемента - <I>;
display: block; - делает элемент страницы блочным. При этом его можно свободно позиционировать. Пример блочного элемента - <DIV>;
display: none; - делает элемент страницы невидимым. При этом страница отображается так, будто этого элемента вообще не существует;
display: inline-block; - аналогично inline, но содержимое страницы ведет себя как блочный элемент;
display: list-item; - аналогично block, но при этом элемент страницы считается позицией списка (ставится маркер);
display: table-header-group; - заставляет элемент страницы отображаться после верхнего заголовка таблицы и перед всеми строками данных (аналогично тегу <THEAD>);
display: table-footer-group; - заставляет элемент страницы отображаться перед основанием таблицы и после всех строк данных (аналогично тегу <TFOOT>);
display: block; - делает элемент страницы блочным. При этом его можно свободно позиционировать. Пример блочного элемента - <DIV>;
display: none; - делает элемент страницы невидимым. При этом страница отображается так, будто этого элемента вообще не существует;
display: inline-block; - аналогично inline, но содержимое страницы ведет себя как блочный элемент;
display: list-item; - аналогично block, но при этом элемент страницы считается позицией списка (ставится маркер);
display: table-header-group; - заставляет элемент страницы отображаться после верхнего заголовка таблицы и перед всеми строками данных (аналогично тегу <THEAD>);
display: table-footer-group; - заставляет элемент страницы отображаться перед основанием таблицы и после всех строк данных (аналогично тегу <TFOOT>);
Пример:
display: none; <!--делает элемент страницы невидимым-->position: - устанавливает, каким образом вычисляется положение элемента в плоскости экрана.
position: static; - (значение по умолчанию) задает статическое позиционирование, при котором элемент страницы отображается внутри общего "потока" текста, т.е. не свободно. Значения атрибутов bottom, left, right и top при этом не принимаются Web-обозревателем во внимание;
position: absolute; - задает абсолютное свободное позиционирование. Значения атрибутов bottom, left, right и top при этом задают абсолютные координаты элемента страницы относительно родителя;
position: relative; - задает относительное свободное позиционирование. Значения атрибутов bottom, left, right и top при этом задают смещение координат элемента страницы от точки, в которой он был отображен, будь атрибут position установлен в static.
position: absolute; - задает абсолютное свободное позиционирование. Значения атрибутов bottom, left, right и top при этом задают абсолютные координаты элемента страницы относительно родителя;
position: relative; - задает относительное свободное позиционирование. Значения атрибутов bottom, left, right и top при этом задают смещение координат элемента страницы от точки, в которой он был отображен, будь атрибут position установлен в static.
Пример:
position: static; <!--статическое позиционирование-->z-index: - задает порядок перекрытия свободно позиционированными объектами друг друга.
Порядок перекрытия задается положительными или отрицательным целым числом X. При этом элементы с большим значением этого атрибута будут перекрывать элементы с меньшим значением.
Предопределенное значение auto задает порядок перекрытия по умолчанию, когда элементы, определенные в HTML-коде раньше, перекрываются заданными позже.
Значение по умолчанию auto.
Предопределенное значение auto задает порядок перекрытия по умолчанию, когда элементы, определенные в HTML-коде раньше, перекрываются заданными позже.
Значение по умолчанию auto.
Пример:
z-index: 2; <!--элемент с этим значением перекрывает элемент с меньшим значением-->visibility: - позволяет элементу быть видимым или невидимым на странице.
visibility: inherit - (значение по умолчанию) элемент виден, если его родительский элемент является видимым (наследует видимость);
visibility: visible - делает элемент страницы видимым;
visibility: hidden - невидимым.
visibility: visible - делает элемент страницы видимым;
visibility: hidden - невидимым.
Пример:
visibility: hidden; <!--элемент невидим-->clip: - задает прямоугольный фрагмент элемента страницы, который будет видим.
Предопределенное значение auto задает видимость всего элемента страницы. Оно же является значением по умолчанию. Для того чтобы ограничить видимую часть элемента страницы прямоугольным фрагментом, задаются четыре координаты границ этого прямоугольника, разделенные пробелами.
Пример:
clip: auto; <!--весь элемент видим-->white-space: - задает, будут ли строки текста, содержащегося в элементе страницы, автоматически переноситься, если они не помещаются в нем по ширине.
white-space: normal; - (значение по умолчанию) включает автоматический перенос длинных строк;
white-space: nowrap; - отключает автоматический перенос строк. Чтобы "разорвать" строку вручную, вставьте в нужном месте тег <br>
white-spice: pre; - не поддерживается;
white-space: nowrap; - отключает автоматический перенос строк. Чтобы "разорвать" строку вручную, вставьте в нужном месте тег <br>
white-spice: pre; - не поддерживается;
Пример:
white-space: normal; <!--автоматический перенос длинных строк-->cursor: - определяет форму курсора мыши, которую он принимает при наведении на элемент страницы.
cursor: auto - (значение по умолчанию) заставляет Web-обозреватель самому определять нужную форму курсора мыши;
cursor: crosshair - крестообразный курсор;
cursor: default - курсор по умолчанию, обычно стрелка;
cursor: hand - "указывающий перст";
cursor: move - стрелка, указывающая "на все четыре стороны";
cursor: e-resize - стрелка, указывающая в обе стороны по горизонтали;
cursor: ne-resize - стрелка, указывающая в обе стороны по диагонали слева направо;
cursor: nw-resize - стрелка, указывающая в обе стороны по диагонали справо налево;
cursor: n-resize - стрелка, указывающая в обе стороны по вертикали;
cursor: se-resize - стрелка, указывающая в обе стороны по диагонали слева направо;
cursor: sw-resize - стрелка, указывающая в обе стороны по диагонали справо налево;
cursor: s-resize - стрелка, указывающая в обе стороны по вертикали;
cursor: w-resize - стрелка, указывающая в обе стороны по горизонтали;
cursor: text - текстовой курсор;
cursor: wait - "песочные часы", курсор ожидания;
cursor: help - стрелка с вопросительным знаком.
cursor: crosshair - крестообразный курсор;
cursor: default - курсор по умолчанию, обычно стрелка;
cursor: hand - "указывающий перст";
cursor: move - стрелка, указывающая "на все четыре стороны";
cursor: e-resize - стрелка, указывающая в обе стороны по горизонтали;
cursor: ne-resize - стрелка, указывающая в обе стороны по диагонали слева направо;
cursor: nw-resize - стрелка, указывающая в обе стороны по диагонали справо налево;
cursor: n-resize - стрелка, указывающая в обе стороны по вертикали;
cursor: se-resize - стрелка, указывающая в обе стороны по диагонали слева направо;
cursor: sw-resize - стрелка, указывающая в обе стороны по диагонали справо налево;
cursor: s-resize - стрелка, указывающая в обе стороны по вертикали;
cursor: w-resize - стрелка, указывающая в обе стороны по горизонтали;
cursor: text - текстовой курсор;
cursor: wait - "песочные часы", курсор ожидания;
cursor: help - стрелка с вопросительным знаком.
Пример:
cursor: default; <!--курсор по умолчанию-->list-style-type: - задает тип маркера или номер позиции списка.
list-style-type: disc; - (значение по умолчанию) отображает сплошной кружок;
list-style-type: circle; - окружность;
list-style-type: square; - сплошной квадрат;
list-style-type: decimal; - нумерует позиции арабскими цифрами;
list-style-type: lower-roman; - малыми римскими;
list-style-type: upper-roman; - большими римскими;
list-style-type: lower-alpha; - помечает позиции малыми латинскими буквами;
list-style-type: upper-alpha; - большими латинскими;
list-style-type: none; - вообще убирает маркер или нумерацию.
list-style-type: circle; - окружность;
list-style-type: square; - сплошной квадрат;
list-style-type: decimal; - нумерует позиции арабскими цифрами;
list-style-type: lower-roman; - малыми римскими;
list-style-type: upper-roman; - большими римскими;
list-style-type: lower-alpha; - помечает позиции малыми латинскими буквами;
list-style-type: upper-alpha; - большими латинскими;
list-style-type: none; - вообще убирает маркер или нумерацию.
Пример:
list-style-type: circle; <!--окружность-->list-style-image: - задает графическое изображение, отображаемое в качестве маркера позиции списка. Имеет приоритет над атрибутом list-style-type.
Если задано предопределенное значение none, то стиль маркера берется из установок атрибута list-style-type, если он задан, или отображается маркер по умолчанию. Если задан интернет-адрес URL файла изображения, то оно отображается в качестве маркера, перекрывая установки атрибута list-style-type.
Значение по умолчанию none.
Значение по умолчанию none.
Пример:
list-style-image: URL; <!--интернет-адрес файла изображения-->list-style-position: - задает местонахождение маркера позиции списка: в тексте позиции или вне его.
Доступны два значения. Значение outside (по умолчанию) задает отображение маркера позиции списка вне текста позиции.
Значение же inside заставляет Web-обозреватель отобразить маркер позиции в ее тексте в качестве первого символа.
Значение же inside заставляет Web-обозреватель отобразить маркер позиции в ее тексте в качестве первого символа.
Пример:
list-style-position: inside; <!--отображает маркер позиции в качестве первого символа-->list-style: - задает параметры маркера или номера позиции списка. Заменяет атрибуты list-style-image, list-style-position и list-style-type.
Значения этих атрибутов могут располагаться в любом порядке.
Значение по умолчанию none outside disk.
Значение по умолчанию none outside disk.
Пример:
list-style: none outside disk; <!--отображает маркер без изображений, вне текста позиции, сплошной кружок-->
Шадуро Николай 