Разработка магазинов с гарантией попадания в ТОП поисковых систем

Узнать подробнее
Eltisbook > CSS учебник > Clear, cursor, display, float, visibility — функции дополнительного форматирования

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

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

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

Clear.

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

Cursor.

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

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

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

Display.

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

.r1 {
display : list – item;
}

Элемент будет выводиться как список

Элемент будет выводиться как список

Элемент будет выводиться как список

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

 Float

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

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

Visibility

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


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

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