Основы работы с CSS

Параметры форматирования в CSS

Разбить на страницы
Показывать лекцию целиком

Данные параметры позволяют:

  • управлять выводом элемента;
  • задавать положение изображения в другом элементе;
  • позиционировать элемент относительно его обычного положения;
  • позиционировать элемент с помощью абсолютного значения;
  • управлять видимостью элемента.
    •

    Данные параметры поддерживают следующие браузеры:Internet Explorer, Firefox, Netscape.

    ПараметрОписаниеЗначенияIEFNW3C
    clear Задает стороны элемента, на которых не допускаются другие перемещаемые элементы left 4 1 4 1
    right
    both
    none
    cursor Задает тип выводимого курсора url 4 1 6 2
    auto
    crosshair
    default
    pointer
    move
    e-resize
    ne-resize
    nw-resize
    n-resize
    se-resize
    sw-resize
    s-resize
    w-resize
    text
    wait
    help
    display Определяет, как в документе будет показан элемент none 4 1 4 1
    inline
    block
    list-item
    run-in
    compact
    marker
    table
    inline-table
    table-row-group
    table-header-group
    table-footer-group
    table-row
    table-column-group
    table-column
    table-cell
    table-caption
    float Определяет, где в другом элементе появится изображение или текст left 4 1 4 1
    right
    none
    position Задает статическое, относительное, абсолютное или фиксированное положение элемента static 4 1 4 2
    relative
    absolute
    fixed
    visibility Определяет, будет ли элемент видим или невидим visible 4 1 6 2
    hidden
    collapse

    Параметры форматирования в CSS: подробное рассмотрение

    Параметр 'clear'

    Данный параметр задает стороны элемента, где не допускаются другие плавающие элементы. Плавающие элементы - изображения и текстовые элементы, которые появляются в другом элементе.

    Примечание: При использовании с параметром "float" не всегда работает как ожидается.

    Наследование: нет.

    Пример:

    div
{
clear: both
} 

div
{
clear: left
}

    Может принимать следующие значения:

    ЗначениеОписание
    left Плавающие элементы не допускаются слева
    right Плавающие элементы не допускаются справа
    both Плавающие элементы не допускаются ни справа, ни слева
    none Плавающие элементы допускаются с любой стороны

    Параметр 'cursor'

    Данный параметр определяет тип курсора, который будет выводиться при указании на элемент.

    Наследование: да.

    Примеры:

    pre
{
cursor: pointer
} 

div
{
cursor : url("general.cur"), url("other.cur"), text;
}

    Может принимать следующие значения:

    ЗначениеОписание
    url url специального курсора, который будет использоваться

    Примечание: Всегда определяйте базовый курсор в конце списка, который будет использоваться, если ни один из определенных url курсоров невозможно использовать.
    default Курсор по умолчанию (часто стрелка)
    auto Курсор задает браузер
    crosshair Курсор изображается как перекрестие
    pointer Курсор изображается как указатель (рука), который обозначает ссылку
    move Курсор указывает объект, который можно переместить
    e-resize Курсор, определяющий перемещение края бокса вправо (east)
    ne-resize Курсор, определяющий перемещение края бокса вверх и вправо (north/east)
    nw-resize Курсор, определяющий перемещение края бокса вверх и влево (north/west)
    n-resize Курсор, определяющий перемещение края бокса вверх (north)
    se-resize Курсор, определяющий перемещение края бокса вниз и вправо (south/east)
    sw-resize Курсор, определяющий перемещение края бокса вниз и влево (south/west)
    s-resize Курсор, определяющий перемещение края бокса вниз (south)
    w-resize Курсор, определяющий перемещение края бокса влево (west)
    text Курсор используемый для текста
    wait Курсор, указывающий на занятость программы (часто песочные часы)
    help Курсор, указывающий, что имеется справочная информация (часто знак вопроса)

    Примечания для браузеров:

    Internet Explorer:

    Чтобы вывести изображение руки, можно использовать нестандартное значение hand следующим образом: {cursor: hand}

    Параметр 'display'

    Данный параметр определяет, как в документе будет показан элемент.

    Наследование: нет.

    Примеры:

    pre
{
display: block
}

strong
{
display: inline
}

img
{
display: none
}

h1, h3
{
display: none
}

    Может принимать следующие значения:

    ЗначениеОписание
    none Элемент не будет выводиться
    block Элемент будет выводиться как элемент уровня блока, с разрывом строки перед и после элемента
    inline Элемент будет выводиться как элемент строки, без разрыва строки перед или после элемента.
    list-item Элемент будет выводиться как список
    run-in Элемент будет выводиться на уровне блока или как внутристрочный элемент, в зависимости от контекста.
    compact Элемент будет выводиться на уровне блока или как внутристрочный элемент, в зависимости от контекста.
    marker
    table Элемент будет выведен как таблица блока (как <table> ), с разрывом строки перед и после таблицы
    inline-table Элемент будет выведен как внутристрочная таблица (как <table> ), без разрыва строки перед или после таблицы.
    table-row-group Элемент выводится как группа из одной или нескольких строк (как <tbody> )
    table-header-group Элемент выводится как группа из одной или нескольких строк (как <thead> )
    table-footer-group Элемент выводится как группа из одной или нескольких строк (как <tfoot> )
    table-row Элемент выводится как строка таблицы (как <tr> )
    table-column-group Элемент выводится как группа из одного или нескольких столбцов (как <colgroup> )
    table-column Элемент выводится как столбец ячеек (как <col> )
    table-cell Элемент выводится как ячейка таблицы (как <td> и <th> )
    table-caption Элемент выводится как заголовок таблицы (как <caption> )

    Свойство 'float'

    Данное свойство определяет, где появится в другом элементе изображение или текст.

    Примечания:

  • Если в строке слишком мало места для плавающего элемента, он переносится на следующую строку и продолжается пока строка имеет достаточно места.
  • Перед float должны идти - содержание, фон и границы внутристрочных элементов, содержание блочного элемента, после - фон и границы блочного элемента.
    •

    Наследование: нет.

    Пример:

    p
{
float: right
}

    Может принимать следующие значения:

    ЗначениеОписание
    left Изображение или текст смещается в родительском элементе влево.
    right Изображение или текст смещается в родительском элементе вправо.
    none Изображение или текст будут выводиться в том месте, где они встретились в тексте

    Параметр 'position'

    Данный параметр помещает элемент в статическое, относительное, абсолютное или фиксированное положение.

    Наследование: нет.

    Пример:

    p
{
position:static;
}

    Может принимать следующие значения:

    ЗначениеОписание
    static Элемент помещается в обычное положение (согласно нормальному потоку). Со значением "static" не используются параметры "left" и "top".
    relative Смещает элемент относительно его нормального положения, поэтому "left:20" добавляет 20 пикселей к позиции LEFT элемента.
    absolute С помощью значения "absolute" элемент можно поместить в любом месте страницы. Позиция элемента определяется с помощью параметров "left", "top", "right", и "bottom"
    fixed

    Параметр 'visibility'

    Этот параметр определяет видимость или невидимость элемента.

    Примечания:

  • Невидимые элементы занимают место на странице. Для того, чтобы создать невидимые элементы, которые не занимают место необходимо использовать параметр "display".
  • Этот параметр можно использовать со сценариями для создания Динамического HTML.
    •

    Наследование: нет.

    Примеры:

    pre
{
visibility: hidden
}

    Может принимать следующие значения:

    ЗначениеОписание
    visible Элемент видим
    hidden Элемент невидим
    collapse При использовании в табличных элементах это значение удаляет строку или столбец, но не влияет на компоновку таблицы. Пространство, занимаемое строкой или столбцом, будет доступно для другого содержимого. Если этот параметр используется с другими элементами, он действует как "hidden"
    Страницы:

    Данные параметры позволяют:

  • управлять выводом элемента;
  • задавать положение изображения в другом элементе;
  • позиционировать элемент относительно его обычного положения;
  • позиционировать элемент с помощью абсолютного значения;
  • управлять видимостью элемента.
    •

    Данные параметры поддерживают следующие браузеры:Internet Explorer, Firefox, Netscape.

    ПараметрОписаниеЗначенияIEFNW3C
    clear Задает стороны элемента, на которых не допускаются другие перемещаемые элементы left 4 1 4 1
    right
    both
    none
    cursor Задает тип выводимого курсора url 4 1 6 2
    auto
    crosshair
    default
    pointer
    move
    e-resize
    ne-resize
    nw-resize
    n-resize
    se-resize
    sw-resize
    s-resize
    w-resize
    text
    wait
    help
    display Определяет, как в документе будет показан элемент none 4 1 4 1
    inline
    block
    list-item
    run-in
    compact
    marker
    table
    inline-table
    table-row-group
    table-header-group
    table-footer-group
    table-row
    table-column-group
    table-column
    table-cell
    table-caption
    float Определяет, где в другом элементе появится изображение или текст left 4 1 4 1
    right
    none
    position Задает статическое, относительное, абсолютное или фиксированное положение элемента static 4 1 4 2
    relative
    absolute
    fixed
    visibility Определяет, будет ли элемент видим или невидим visible 4 1 6 2
    hidden
    collapse

    Параметры форматирования в CSS: подробное рассмотрение

    Параметр 'clear'

    Данный параметр задает стороны элемента, где не допускаются другие плавающие элементы. Плавающие элементы - изображения и текстовые элементы, которые появляются в другом элементе.

    Примечание: При использовании с параметром "float" не всегда работает как ожидается.

    Наследование: нет.

    Пример:

    div
{
clear: both
} 

div
{
clear: left
}

    Может принимать следующие значения:

    ЗначениеОписание
    left Плавающие элементы не допускаются слева
    right Плавающие элементы не допускаются справа
    both Плавающие элементы не допускаются ни справа, ни слева
    none Плавающие элементы допускаются с любой стороны

    Параметр 'cursor'

    Данный параметр определяет тип курсора, который будет выводиться при указании на элемент.

    Наследование: да.

    Примеры:

    pre
{
cursor: pointer
} 

div
{
cursor : url("general.cur"), url("other.cur"), text;
}

    Может принимать следующие значения:

    ЗначениеОписание
    url url специального курсора, который будет использоваться

    Примечание: Всегда определяйте базовый курсор в конце списка, который будет использоваться, если ни один из определенных url курсоров невозможно использовать.
    default Курсор по умолчанию (часто стрелка)
    auto Курсор задает браузер
    crosshair Курсор изображается как перекрестие
    pointer Курсор изображается как указатель (рука), который обозначает ссылку
    move Курсор указывает объект, который можно переместить
    e-resize Курсор, определяющий перемещение края бокса вправо (east)
    ne-resize Курсор, определяющий перемещение края бокса вверх и вправо (north/east)
    nw-resize Курсор, определяющий перемещение края бокса вверх и влево (north/west)
    n-resize Курсор, определяющий перемещение края бокса вверх (north)
    se-resize Курсор, определяющий перемещение края бокса вниз и вправо (south/east)
    sw-resize Курсор, определяющий перемещение края бокса вниз и влево (south/west)
    s-resize Курсор, определяющий перемещение края бокса вниз (south)
    w-resize Курсор, определяющий перемещение края бокса влево (west)
    text Курсор используемый для текста
    wait Курсор, указывающий на занятость программы (часто песочные часы)
    help Курсор, указывающий, что имеется справочная информация (часто знак вопроса)

    Примечания для браузеров:

    Internet Explorer:

    Чтобы вывести изображение руки, можно использовать нестандартное значение hand следующим образом: {cursor: hand}

    Параметр 'display'

    Данный параметр определяет, как в документе будет показан элемент.

    Наследование: нет.

    Примеры:

    pre
{
display: block
}

strong
{
display: inline
}

img
{
display: none
}

h1, h3
{
display: none
}

    Может принимать следующие значения:

    ЗначениеОписание
    none Элемент не будет выводиться
    block Элемент будет выводиться как элемент уровня блока, с разрывом строки перед и после элемента
    inline Элемент будет выводиться как элемент строки, без разрыва строки перед или после элемента.
    list-item Элемент будет выводиться как список
    run-in Элемент будет выводиться на уровне блока или как внутристрочный элемент, в зависимости от контекста.
    compact Элемент будет выводиться на уровне блока или как внутристрочный элемент, в зависимости от контекста.
    marker
    table Элемент будет выведен как таблица блока (как <table> ), с разрывом строки перед и после таблицы
    inline-table Элемент будет выведен как внутристрочная таблица (как <table> ), без разрыва строки перед или после таблицы.
    table-row-group Элемент выводится как группа из одной или нескольких строк (как <tbody> )
    table-header-group Элемент выводится как группа из одной или нескольких строк (как <thead> )
    table-footer-group Элемент выводится как группа из одной или нескольких строк (как <tfoot> )
    table-row Элемент выводится как строка таблицы (как <tr> )
    table-column-group Элемент выводится как группа из одного или нескольких столбцов (как <colgroup> )
    table-column Элемент выводится как столбец ячеек (как <col> )
    table-cell Элемент выводится как ячейка таблицы (как <td> и <th> )
    table-caption Элемент выводится как заголовок таблицы (как <caption> )

    Свойство 'float'

    Данное свойство определяет, где появится в другом элементе изображение или текст.

    Примечания:

  • Если в строке слишком мало места для плавающего элемента, он переносится на следующую строку и продолжается пока строка имеет достаточно места.
  • Перед float должны идти - содержание, фон и границы внутристрочных элементов, содержание блочного элемента, после - фон и границы блочного элемента.
    •

    Наследование: нет.

    Пример:

    p
{
float: right
}

    Может принимать следующие значения:

    ЗначениеОписание
    left Изображение или текст смещается в родительском элементе влево.
    right Изображение или текст смещается в родительском элементе вправо.
    none Изображение или текст будут выводиться в том месте, где они встретились в тексте

    Параметр 'position'

    Данный параметр помещает элемент в статическое, относительное, абсолютное или фиксированное положение.

    Наследование: нет.

    Пример:

    p
{
position:static;
}

    Может принимать следующие значения:

    ЗначениеОписание
    static Элемент помещается в обычное положение (согласно нормальному потоку). Со значением "static" не используются параметры "left" и "top".
    relative Смещает элемент относительно его нормального положения, поэтому "left:20" добавляет 20 пикселей к позиции LEFT элемента.
    absolute С помощью значения "absolute" элемент можно поместить в любом месте страницы. Позиция элемента определяется с помощью параметров "left", "top", "right", и "bottom"
    fixed

    Параметр 'visibility'

    Этот параметр определяет видимость или невидимость элемента.

    Примечания:

  • Невидимые элементы занимают место на странице. Для того, чтобы создать невидимые элементы, которые не занимают место необходимо использовать параметр "display".
  • Этот параметр можно использовать со сценариями для создания Динамического HTML.
    •

    Наследование: нет.

    Примеры:

    pre
{
visibility: hidden
}

    Может принимать следующие значения:

    ЗначениеОписание
    visible Элемент видим
    hidden Элемент невидим
    collapse При использовании в табличных элементах это значение удаляет строку или столбец, но не влияет на компоновку таблицы. Пространство, занимаемое строкой или столбцом, будет доступно для другого содержимого. Если этот параметр используется с другими элементами, он действует как "hidden"
    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^