Clear, cursor, display, float, visibility - функции дополнительного форматирования

«Clear, cursor, display, float, visibility в CSS» – восьмой урок учебника CSS. В этом уроке мы поговорим о дополнительном форматировании элементов методами каскадных таблиц стилей.

Данные методы позволяют применить дополнительное CSS форматирование к некоторым элементам HTML страниц и более детально настроить их отображение.

Clear.

Данный метод позволяет отменить появление плавающих элементов с определенных сторон объекта:

left – отменяет плавающие элементы слева.
right – отменяет плавающие элементы справа.
both – отменяет плавающие элементы справа и слева.
none – допускает плавающие элементы.

Cursor.

Позволяет определить курсор, который будет выводиться при наведении мышью на элемент:

url – позволяет задать уникальный курсор, введя URL адрес с файлом курсора
default – использует курсор по умолчанию
auto – браузер определяет курсор самостоятельно
crosshair – перекрестие
pointer – указатель – рука
move – изображение перемещаемого объекта
e – resize – перемещение края вправо
ne – resize – перемещение края вверх и вправо
nw – resize – перемещение края вверх и влево
n – resize – перемещение края вверх
se – resize – перемещение края вниз и вправо
sw – resize – перемещение края вниз и влево
s – resize – перемещение края вниз
w – resize – перемещение края влево
text – курсор ввода текста
wait – песочные часы
help – справка

.q1 { cursor : pointer; }	Курсор изображается как указатель (рука), который обозначает ссылку
.q2 { cursor : nw – resize; }	Курсор, определяющий перемещение края бокса вверх и влево (north/west)
.q3 { cursor : wait; }	Курсор, указывающий на занятость программы (часто песочные часы)
.q4 { cursor : help; }	Курсор, указывающий, что имеется справочная информация (часто знак вопроса)

Для того, чтобы увидеть результаты работы данного примера необходимо провести мышью над текстом.

Display.

Определяет метод отображения элемента:

none – не отображается
inline – будет выводиться, как элемент строки
block – будет выводиться, как элемент уровня блока
list–item – элемент будет выводиться списком
run–in – будет выводиться, как внутристрочный элемент
compact – элемент выведется, как блок или как внутристрочный элемент, в зависимости от контекста
table – элемент будет выведен, как таблица
inline–table – будет выводиться, как внутристрочная таблица
table–row–group – группа из одной или нескольких строк
table–header–group – группа из одной или нескольких строк
table–footer–group – группа из одной или нескольких строк
table–row – элемент будет выведен, как строка таблицы
table–column–group – группа из одного или нескольких столбцов
table–column – столбец из нескольких ячеек)
table–cell – ячейка таблицы
table–caption – заголовок таблицы

.r1 { display : list – item; }	Элемент будет выводиться как список Элемент будет выводиться как список Элемент будет выводиться как список
.r2 { display : table; }	Элемент будет выведен как таблица блока (как <table> ), с разрывом строки перед и после таблицы
.r3 { display : table – row; }	Элемент выводится как строка таблицы (как <tr> )
.r4 { display : inline; }	Элемент будет выводиться как элемент уровня блока, с разрывом строки перед и после элемента

Float

Позволяет определить, где один элемент появится внутри другого:

left – элемент смещается влево внутри родительского
right – элемент смещается вправо внутри родительского
none – элемент будет выводиться в нормальном режиме

.s1 { float : left; }	Изображение или текст смещается в родительском элементе влево.
.s2 { float : right; }	Изображение или текст смещается в родительском элементе вправо.
.s3 { float : none; }	Изображение или текст будут выводиться в том месте, где они встретились в тексте

Visibility

Позволяет управлять видимостью элемента:

visible – элемент будет выводиться в нормальном режиме
hidden – элемент не выводится
collapse – используется для удаления строки или столбца внутри таблицы. При использовании этого свойства каркас таблицы не будет нарушен, освободившееся место может быть использованно для размещения другого элемента.

Сегодня мы рассмотрели дополнительные методы CSS форматирования, такие как clear, cursor, display, float и visibility. Использование данных методов не всегда обоснованно, но позволяет вам настроить некоторые элементы страницы особенным образом и заказать Авиабилеты Киев. Например использование JavaScript вместе с методом visibility позволит скрывать некоторый элемент страницы в зависимости от ситуации.

Следующий урок будет очень интерестным, ведь в нем мы поговорим об использовании различных методов CSS форматирования в зависимости от используемого устройства вывода.

Наверх

Источник: Создание сайтов