- •Синтаксис
- •Селектор класса (class)
- •Селектор идентификатора (id)
- •Комментарии css
- •Примеры использования css
- •Подключение таблицы стилей
- •Несколько таблиц стилей
- •Примеры
- •Параметры фона в css: подробное рассмотрение
- •Параметр 'background'
- •Параметр 'background-attachment'
- •Параметр 'background-color'
- •Параметр 'background-image'
- •Параметр 'background-position'
- •Параметр 'background-repeat'
- •Примеры
- •Параметр 'text-align'
- •Параметр 'text-decoration'
- •Параметр 'text-indent'
- •Параметр 'text-transform'
- •Параметр 'white-space'
- •Параметр 'word-spacing'
- •Параметры границы в css
- •Границы в css: подробное рассмотрение Параметр 'border'
- •Параметр 'border-bottom'
- •Параметр 'border-bottom-color'
- •Параметр 'border-bottom-style'
- •Параметр 'border-bottom-width'
- •Параметр 'border-color'
- •Параметр 'border-left'
- •Параметр 'border-left-color'
- •Параметр 'border-left-style'
- •Параметр 'border-left-width'
- •Параметр 'border-right'
- •Параметр 'border-right-color'
- •Параметр 'border-right-style'
- •Параметр 'border-right-width'
- •Параметр 'border-style'
- •Параметр 'border-top'
- •Параметр 'border-top-color'
- •Параметр 'border-top-style'
- •Параметр 'border-top-width'
- •Параметр 'border-width'
- •Примеры
- •Отступы в css
- •Отступы в css: подробное рассмотрение Параметр 'margin'
- •Параметр 'margin-bottom'
- •Параметр 'margin-left'
- •Параметр 'margin-right'
- •Параметр 'margin-top'
- •Примеры
- •Параметры полей в css
- •Поля в css: подробное рассмотрение Параметр 'padding'
- •Параметр 'padding-bottom'
- •Параметр 'padding-left'
- •Параметр 'padding-right'
- •Параметр 'padding-top'
- •Примеры:
- •Параметры списков в css
- •Списки в css: подробное рассмотрение Параметр 'list-style'
- •Параметр 'list-style-image'
- •Параметр 'list-style-position'
- •Параметр 'list-style-type'
- •Пример:
- •Параметры размеров элементов css
- •Размеры элементов в css: подробное рассмотрение Параметр 'height'
- •Параметр 'line-height'
- •Параметр 'max-height'
- •Параметр 'max-width'
- •Параметры форматирования в css: подробное рассмотрение Параметр 'clear'
- •Параметр 'cursor'
- •Параметр 'display'
- •Свойство 'float'
- •Параметр 'position'
- •Параметр 'visibility'
- •Примеры:
- •Параметры позиционирования в css
- •Параметры позиционирования в css: подробное рассмотрение Параметр 'bottom'
- •Параметр 'clip'
- •Параметр 'left'
- •Параметр 'overflow'
- •Параметр 'position'
- •Параметр 'right'
- •Параметр 'top'
- •Параметр 'vertical-align'
- •Параметр 'z-index'
Параметр 'clip'
Данный параметр задает форму элемента.
В ситуации если, например, изображение больше того элемента в котором располагается, параметр позволяет определить размеры изображения, обрезать по форме и вывести.
Примечание: Этот параметр нельзя использовать для элементов с параметром "overflow", заданным как "visible".
Наследование: нет.
Пример:
p
{
position:absolute;
clip:rect(2px 175px 100px 0px)
}
Может принимать следующие значения:
Значение |
Описание |
shape |
Задает форму элемента. Допустимым значением формы является: rect (top, right, bottom, left) |
auto |
Браузер задает форму элемента |
Параметр 'left'
Данный параметр определяет левый край элемента.
Примечание: Если параметр "position" имеет значение "static", параметр "left" не оказывает влияния.
Наследование: нет.
Примеры:
В примере показано, как задать левый край элемента pre в 50 px справа от левого края окна:
pre
{
position: absolute;
left: 50px
}
В примере показано, как задать левый край элемента pre в 50 px слева от левого края окна:
pre
{
position: absolute;
left: -50px
}
Может принимать следующие значения:
Значение |
Описание |
auto |
Позволяет браузеру вычислить левую позицию. |
% |
Задает левую позицию в % от значения для левого края окна. |
length |
Задает левую позицию в px, см и т.д. от левого края окна. Допускаются отрицательные значения. |
Параметр 'overflow'
Данный параметр определяет, что происходит, когда содержимое элемента переполняет его область.
Наследование: нет.
Пример:
div
{
overflow: auto
}
Может принимать следующие значения:
Значение |
Описание |
visible |
Содержимое не обрезается. Оно выводится за пределами элемента. |
hidden |
Содержимое обрезается, но браузер не выводит полосу прокрутки для просмотра всего содержимого. |
scroll |
Содержимое обрезается, но браузер выводит полосу прокрутки для просмотра всего содержимого. |
auto |
Если содержимое обрезается, то браузер должен вывести полосу прокрутки для просмотра всего содержимого. |
Параметр 'position'
Данный параметр помещает элемент в статическое, относительное, абсолютное или фиксированное положение.
Наследование: нет.
Пример:
p
{
position:static;
}
Может принимать следующие значения:
Значение |
Описание |
static |
Элемент помещается в обычное положение (согласно нормальному потоку). Для значения "static" параметры "left" и "top" не используются. |
relative |
Перемещает элемент относительно нормального положения, так что "left:20" добавляет 20 пикселей к позиции LEFT элемента |
absolute |
С помощью значения "absolute" элемент можно разместить в любом месте страницы. Позиция элемента определяется параметрами "left", "top", "right", и "bottom" |
fixed |
|