- •Синтаксис
- •Селектор класса (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'
Параметры форматирования в 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> ) |