Каскадные таблицы стилей: язык CSS 

Ширина содержимого: свойство width Синтаксис: width: <размер> | <процент> | auto | inherit Начально: auto Применимо: ко всем элементам, кроме текстовых, строк таблиц и групп строк Наследуемо: нет Проценты: относительно ширины вмещающего блока Устройства: визуальные Поддержка: Соответствует стандарту (5.0+) Соответствует стандарту (4.0+) Свойство width задает ширину содержимого при генерации объемлющего прямоугольника блочных элементов и элементов, внешних по отношению к CSS (т. е. графических образов, объектов и некоторых элементов форм). Ширина не может быть отрицательной и задается одним из следующих способов: <размер> Задает фиксированный размер. <процент> Вычисляется относительно ширины вмещающего блока. auto См. чуть ниже. Пример: следующее правило устанавливает ширину абзаца, равной 300 пикселей. P { width: 300px } Вычисление ширин и границ Вычисленные значения свойств width, margin-left, margin-right, left и right зависят от типа генерируемого прямоугольника. Как правило, вычисленное значение совпадает со специфицированным (кроме значения auto, которое заменяется на вычисленное значение по умолчанию), но есть и исключения. Различаются следующие типы элементов: блочные и текстовые; внешние по отношению к CSS и прочие; плавающие и нет; абсолютно позиционированные и остальные. Обратите внимание, что для относительно позиционированных элементов значения перечисленных свойств вычисляются так же, как для непозиционированных. Не внешние текстовые элементы Специфицированное значение auto свойств margin-left, margin-right, left и right заменяется вычисленным значением 0. Свойство width здесь не применимо, т. к. ширина содержимого однозначно определяется самим содержимым элемента. Внешние текстовые элементы Специфицированное значение auto свойств margin-left, margin-right, left и right заменяется вычисленным значением 0. Специфицированное значение auto свойства width заменяется вычисленным значением ширины соответствующего объекта (которая задается либо его собственными размерами, либо атрибутом языка документа). Не внешние блочные элементы в обычном потоке элементов Специфицированное значение auto свойств left и right заменяется вычисленным значением 0. Остальные свойства связаны между собой следующим соотношением: margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = ширина вмещающего блока Поэтому, если мы явно зададим значения всех этих свойств, отличные от auto, то одно из значений будет изменено обозревателем в соответствии с приведенным соотношением (обычно это margin-left, если direction = ltr, и margin-right, если direction = rtl). Если ровно одно значение задано как auto, то оно вычисляется из приведенного соотношения. Если width равно auto, то все остальные значения auto заменяются на 0, и ширина вычисляется из приведенного соотношения. Если margin-left и margin-right равны auto, то их вычисленные значения будут равны между собой. Внешние блочные элементы в обычном потоке элементов Специфицированное значение auto свойств left и right заменяется вычисленным значением 0. Остальные свойства связаны между собой приведенным выше соотношением. Если width равно auto, то оно заменяется вычисленным значением ширины соответствующего объекта (которая задается либо его собственными размерами, либо атрибутом языка документа). Если одна из границ равна auto, то ее значение вычисляется из приведенного соотношения. Если margin-left и margin-right равны auto, то их вычисленные значения будут равны между собой. Не внешние плавающие элементы Специфицированное значение auto свойств width, margin-left, margin-right, left и right заменяется вычисленным значением 0. Внешние плавающие элементы Специфицированное значение auto свойств margin-left, margin-right, left и right заменяется вычисленным значением 0. Специфицированное значение auto свойства width заменяется вычисленным значением ширины соответствующего объекта (которая задается либо его собственными размерами, либо атрибутом языка документа). Не внешние абсолютно позиционированные элементы Вычисленные значения свойств связаны между собой следующим соотношением: left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = ширина вмещающего блока При этом вычисление значений свойств производится в следующем порядке: Если left равно auto, а direction равно ltr, то auto заменяется на расстояние от левого края вмещающего блока до левой границы гипотетического прямоугольника, который был бы первым объемлющим прямоугольником данного элемента, если бы он был статическим. Это значение отрицательно, если гипотетический прямоугольник расположен слева от объемлющего блока. Если right равно auto, а direction равно rtl, то auto заменяется на расстояние от правого края вмещающего блока до правой границы гипотетического прямоугольника, который был бы первым объемлющим прямоугольником данного элемента, если бы он был статическим. Это значение отрицательно, если гипотетический прямоугольник расположен справа от объемлющего блока. Если width равно auto, то значения auto для left и right заменяются на 0. Если left, right или width все еще равны auto, то значения auto для margin-left и margin-right заменяются на 0. Если margin-left и margin-right все еще равны auto, то их значения вычисляются из приведенного выше соотношения так, чтобы они были равны между собой. Если к этому моменту только одно значение равно auto, то оно вычисляется из приведенного соотношения. Если оказалось, что было задано слишком много явных значений, то пересчитывается на основе приведенного соотношения значение left (если direction равно ltr) или right (если direction равно rtl). Внешние абсолютно позиционированные элементы Вычисления производятся так же, как в предыдущем случае, но с одним отличием. Если width равно auto, то оно заменяется вычисленным значением ширины соответствующего объекта (которая задается либо его собственными размерами, либо атрибутом языка документа), а затем производятся все перечисленные расчеты. Минимальная и максимальная ширина: свойства min-width и max-width Синтаксис: min-width: <размер> | <процент> | inherit Начально: определяется обозревателем Применимо: ко всем элементам, кроме текстовых и табличных Наследуемо: нет Проценты: относительно ширины вмещающего блока Устройства: визуальные Синтаксис: max-width: <размер> | <процент> | none | inherit Начально: none Применимо: ко всем элементам, кроме текстовых и табличных Наследуемо: нет Проценты: относительно ширины вмещающего блока Устройства: визуальные Поддержка: Не поддерживаются Не поддерживаются Эти свойства позволяют нам ограничить ширину содержимого при генерации объемлющего прямоугольника минимально и максимально допустимыми значениями. Ширина не может быть отрицательной и задается одним из следующих способов: <размер> Задает фиксированный размер. <процент> Вычисляется относительно ширины вмещающего блока. none Неограниченная ширина прямоугольника. Эти свойства применяются следующим образом. Сначала вычисляется свойство width, как описано в предыдущем разделе. Затем проверяется, попадает ли оно в диапазон от min-width до max-width, и, если нет, то вычисленное значение width заменяется на соответствующее предельно допустимое значение. Пример: следующее правило устанавливает пределы для ширины абзаца. P { min-width: 20px; max-width: 400px } Высота содержимого: свойство height Синтаксис: height: <размер> | <процент> | auto | inherit Начально: auto Применимо: ко всем элементам, кроме текстовых, столбцов таблиц и групп столбцов Наследуемо: нет Проценты: относительно высоты вмещающего блока Устройства: визуальные Поддержка: Соответствует стандарту (5.0+) Соответствует стандарту (4.0+) Свойство height задает высоту содержимого при генерации объемлющего прямоугольника блочных элементов и элементов, внешних по отношению к CSS (т. е. графических образов, объектов, аплетов и т. п.). Отметим, что высота текстовых элементов задается свойством line-height. Высота не может быть отрицательной и задается одним из следующих способов: <размер> Задает фиксированный размер. <процент> Вычисляется относительно высоты вмещающего блока. Если эта высота явно не задана, то значение интерпретируется как auto. auto См. раздел ниже. Пример: следующее правило устанавливает высоту абзаца, равной 100 пикселей. P { height: 100px } Если высота какого-то абзаца будет превышать 100 пикселей, то такой абзац отображается в соответствии со значением свойства overflow. Вычисление высот и границ Вычисленные значения свойств height, margin-top, margin-bottom, top и bottom зависят от типа генерируемого прямоугольника. Как правило, вычисленное значение совпадает со специфицированным (кроме значения auto, которое заменяется на вычисленное значение по умолчанию), но есть и исключения. Различаются следующие типы элементов: блочные и текстовые; внешние по отношению к CSS и прочие; плавающие и нет; абсолютно позиционированные и остальные. Обратите внимание, что для относительно позиционированных элементов значения перечисленных свойств вычисляются так же, как для непозиционированных. Не внешние текстовые элементы Специфицированное значение auto свойств margin-top, margin-bottom, top и bottom заменяется вычисленным значением 0. Свойство height здесь не применимо, но высоту такого элемента можно задать свойством line-height. Внешние элементы (текстовые, блочные в обычном потоке элементов и плавающие) Специфицированное значение auto свойств margin-top, margin-bottom, top и bottom заменяется вычисленным значением 0. Специфицированное значение auto свойства height заменяется вычисленным значением высоты соответствующего объекта (которая задается либо его собственными размерами, либо атрибутом языка документа). Не внешние блочные элементы (в обычном потоке элементов или плавающие) Специфицированное значение auto свойств margin-top, margin-bottom, top и bottom заменяется вычисленным значением 0. Если height равно auto, то его вычисленное значение зависит от того, имеет ли данный элемент блочных детей. Если все его дети являются текстовыми, то высота элемента вычисляется как расстояние от верхней линии самого верхнего строчного блока до нижней линии самого нижнего строчного блока. Если же элемент имеет блочных детей, то его высота вычисляется как расстояние от верхнего края рамки самого верхнего блока до нижнего края рамки самого нижнего блока. При этом учитываются только те дети, которые находятся в обычном потоке элементов (иными словами, плавающие и абсолютно позиционированные элементы игнорируются, а относительно позиционированные учитываются без своего смещения). Не внешние абсолютно позиционированные элементы Вычисленные значения свойств связаны между собой следующим соотношением: top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom + bottom = высота вмещающего блока При этом вычисление значений свойств производится в следующем порядке: Если top равно auto, то auto заменяется на расстояние от верхнего края вмещающего блока до верхней границы гипотетического прямоугольника, который был бы первым объемлющим прямоугольником данного элемента, если бы он был статическим. Это значение отрицательно, если гипотетический прямоугольник расположен выше объемлющего блока. Если и height, и bottom равны auto, то значение auto для bottom заменяется на 0. Если bottom или height все еще равны auto, то значения auto для margin-top и margin-bottom заменяются на 0. Если margin-top и margin-bottom все еще равны auto, то их значения вычисляются из приведенного выше соотношения так, чтобы они были равны между собой. Если к этому моменту только одно значение равно auto, то оно вычисляется из приведенного соотношения. Если оказалось, что было задано слишком много явных значений, то пересчитывается на основе приведенного соотношения значение bottom. Внешние абсолютно позиционированные элементы Вычисления производятся так же, как в предыдущем случае, но с одним отличием. Если height равно auto, то оно заменяется вычисленным значением высоты соответствующего объекта (которая задается либо его собственными размерами, либо атрибутом языка документа), а затем производятся все перечисленные расчеты. Минимальная и максимальная высота: свойства min-height и max-height Синтаксис: min-height: <размер> | <процент> | inherit Начально: определяется обозревателем Применимо: ко всем элементам, кроме текстовых и табличных Наследуемо: нет Проценты: относительно высоты вмещающего блока Устройства: визуальные Синтаксис: max-height: <размер> | <процент> | none | inherit Начально: none Применимо: ко всем элементам, кроме текстовых и табличных Наследуемо: нет Проценты: относительно высоты вмещающего блока Устройства: визуальные Поддержка: Не поддерживаются Не поддерживаются Эти свойства позволяют нам ограничить высоту содержимого при генерации объемлющего прямоугольника минимально и максимально допустимыми значениями. Высота не может быть отрицательной и задается одним из следующих способов: <размер> Задает фиксированный размер. <процент> Вычисляется относительно высоты вмещающего блока. Если эта высота явно не задана, то значение интерпретируется как auto. none Неограниченная высота прямоугольника. Эти свойства применяются следующим образом. Сначала вычисляется свойство height, как описано в уже рассмотренном выше разделе. Затем проверяется, попадает ли оно в диапазон от min-height до max-height, и, если нет, то вычисленное значение height заменяется на соответствующее предельно допустимое значение. Пример: следующее правило устанавливает пределы для высоты абзаца. P { min-height: 200px; max-height: 1000px } Отображение текстовых элементов При отображении текстовых элементов их прямоугольники располагаются горизонтально друг за другом. При этом их взаимное расположение по вертикали определяется свойством vertical-align. Прямоугольная область, содержащая прямоугольники, образующие строку текста, называется строчным блоком. Ширина строчного блока определяется шириной вмещающего блока. Его высота вычисляется на основе высот всех прямоугольников данной строки и может быть изменена свойством line-height. Высота текста: свойство line-height Синтаксис: line-height: normal | <число> | <размер> | <процент> | inherit Начально: normal Применимо: ко всем элементам Наследуемо: да Проценты: относительно размера шрифта элемента Устройства: визуальные Поддержка: Соответствует стандарту (4.0+) Соответствует стандарту (4.0+) Свойство line-height задает высоту строки текста при генерации объемлющего прямоугольника. Если элемент является блочным, то это свойство задает минимальную высоту входящих в него строчных блоков. Если элемент является текстовым, то это свойство задает точную высоту его строчного блока. Высота не может быть отрицательной и задается одним из следующих способов: normal Высота строчного блока по умолчанию, которую обозреватель определяет на основе размера его шрифта. <число> Вычисленное значение равно данному числу, умноженному на размер шрифта. <размер> Задает фиксированный размер. <процент> Вычисляется относительно размера шрифта элемента. Следующие три правила дадут один и тот же результат: DIV { font-size: 10pt; line-height: 1.2 } DIV { font-size: 10pt; line-height: 1.2em } DIV { font-size: 10pt; line-height: 120% } Если текст элемента отображается несколькими шрифтами, то выбирается наибольший из размеров этих шрифтов. Вертикальное выравнивание: свойство vertical-align Синтаксис: vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <размер> | <процент> | inherit Начально: baseline Применимо: к текстовым элементам и ячейкам таблиц Наследуемо: нет Проценты: относительно значения line-height элемента Устройства: визуальные Поддержка: Соответствует стандарту (4.0+) Не поддерживается Свойство vertical-align задает положение по вертикали объемлющего прямоугольника текстового элемента внутри содержащего его строчного блока. Оно может принимать следующие значения: baseline Выравнивание по базовой линии строчного блока. sub Расположение в позиции нижних индексов (но без изменения размера шрифта). super Расположение в позиции верхних индексов (но без изменения размера шрифта). top Выравнивание по верху строчного блока. text-top Выравнивание по верхней линии шрифта строчного блока. middle Выравнивание по центру строчного блока. bottom Выравнивание по низу строчного блока. text-bottom Выравнивание по нижней линии шрифта строчного блока. <размер> Увеличить (положительное значение) или уменьшить (отрицательное значение) на данную величину. <процент> Увеличить (положительное значение) или уменьшить (отрицательное значение) на данную величину в процентах от значения line-height. Пример: EM.center { vertical-align: middle } Переполнение и обрезка В большинстве случаев содержимое блочного элемента располагается внутри края содержимого его объемлющего прямоугольника. Однако, в некоторых случаях происходит переполнение, т. е. часть содержимого оказывается за пределами этого прямоугольника, например: Строка текста не может быть разорвана, и строчный блок становится шире блочного прямоугольника. Блочный прямоугольник слишком широк для вмещающего блока. Высота элемента больше, чем значение свойства height вмещающего блока. Элемент абсолютно позиционирован. Объемлющий прямоугольник имеет отрицательные границы. Всякий раз, когда происходит переполнение, значение свойства overflow указывает как следует (и следует ли вообще) обрезать содержимое блока; размер и форма области обрезки при этом задается свойством clip. Реакция на переполнение: свойство overflow Синтаксис: overflow: visible | hidden | scroll | auto | inherit Начально: visible Применимо: к блочным и внешним элементам Наследуемо: нет Проценты: не используются Устройства: визуальные Поддержка: Соответствует стандарту (4.0+) Не поддерживается Свойство overflow определяет правила обрезки содержимого элемента при переполнении. Оно может принимать следующие значения: visible Содержимое не обрезается, т. е. отображается за пределами объемлющего прямоугольника. hidden Содержимое обрезается; размер и форма области обрезки при этом задается свойством clip. scroll Содержимое обрезается, но обозреватель должен обеспечить механизм прокрутки содержимого для того, чтобы пользователь мог получить доступ ко всему содержимому элемента. При отображении на устройства print и projection должно печататься все содержимое элемента. auto Содержимое обрезается, и при необходимости обеспечивается прокрутка содержимого. Рассмотрим следующий пример. <DIV style="width: 100px; height: 100px; border: thin solid red; overflow: scroll"> <BLOCKQUOTE style="width: 125px; height: 100px; margin-top: 50px; margin-left: 50px; border: thin dashed black"> <P>Если бы строители строили здания так же, как программисты пишут программы, первый залетевший дятел разрушил бы цивилизацию.</P> <P style="text-align: right">Второй закон Вейнберга</P> </BLOCKQUOTE> </DIV> Здесь элемент BLOCKQUOTE выходит за пределы содержащего его элемента DIV, поэтому этот фрагмент будет отображаться так (Netscape Navigator 4.x не поддерживает обрезку и прокрутку!): Если бы строители строили здания так же, как программисты пишут программы, первый залетевший дятел разрушил бы цивилизацию. Второй закон Вейнберга Область обрезки: свойство clip Синтаксис: clip: rect(<top>,<right>,<bottom>,<left>) | auto | inherit Начально: auto Применимо: к блочным и внешним элементам Наследуемо: нет Проценты: не используются Устройства: визуальные Поддержка: Поддерживается только для абсолютно позиционированных элементов (4.0+) Поддерживается только для слоев (layers) (4.0+) Свойство clip задает облесть обрезки содержимого элемента при переполнении. Оно может принимать следующие значения: auto Область обрезки совпадает с объемлющим прямоугольником. rect(<top>,<right>,<bottom>,<left>) Область вырезки является прямоугольником с заданными координатами, где <top>,<right>,<bottom> и <left> — это смещения от соответствующих сторон объемлющего прямоугольника. Каждое из этих смещений должно быть равно либо auto (что означает нулевое смещение), либо <размер>. Отрицательные смещения допускаются. Пример: P { clip: rect(5px, -5px, 10px, 5px); } Видимость элемента: свойство visibility Синтаксис: visibility: visible | hidden | collapse | inherit Начально: inherit Применимо: ко всем элементам Наследуемо: нет Проценты: не используются Устройства: визуальные Поддержка: Поддерживаются только значения visible, hidden и inherit (4.0+) Поддерживается только для слоев (layers) (4.0+) Свойство visibility задает видимость элемента при отображении. Оно может принимать следующие значения: visible Объемлющий прямоугольник элемента видим. hidden Объемлющий прямоугольник элемента невидим. collapse То же, что hidden. Применяется только в таблицах, где имеет особое назначение  (см. ниже). Примечания: Невидимость элемента означает, что его объемлющий прямоугольник становится прозрачным, но продолжает занимать свое место в структуре отображения. Для того, чтобы полностью удалить элемент, следует использовать значение none свойства display. Это свойство широко применяется в сценариях для создания динамических эффектов. Форма курсора: свойство cursor Синтаксис: cursor: [[<uri>,]* [auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help]] | inherit Начально: auto Применимо: ко всем элементам Наследуемо: да Проценты: не используются Устройства: визуальные интерактивные Поддержка: Вместо pointer используется hand, список <uri> не поддерживается (4.0+) Не поддерживается Свойство cursor задает форму курсора мыши при наведении ее на данный элемент. Оно может принимать следующие значения: auto Форма курсора определяется обозревателем в зависимости от содержимого элемента. crosshair Перекрестье. default Курсор операционной системы по умолчанию. В Windows это стрелка. pointer Указатель на гиперссылку. Обычно это кисть руки. move Скрещенные стрелки, указывающие на то, что что-то должно переместиться. *-resize Стрелка, указывающая на сдвигаемую границу; * задает направление сдвига (n = север, s = север, w = запад, e = восток и т. п.). text Указывает на редактируемый текст. Обычно имеет форму буквы I. wait Песочные часы, указывающие на то, что программа занята, и пользователь должен подождать. help Вопросительный знак, указывающий, что для данного элемента можно получить справку. <uri> Задает список URI ресурсов, содержащих курсоры. Если значение данного списка задано списком URI, то обозреватель пытается сначала загрузить первый курсор из списка, при неудаче — второй и т. д. Рекомендуется заканчивать такой список одним из ключевых слов, чтобы при невозможности загрузить курсор обозреватель знал, какую из предопределенных форм курсоров ему использовать, например: P { cursor: url("mycursor.cur"), url("second.csr"), text } Динамические контуры Общее описание CSS допускает создание вокруг отображаемых элементов динамических контуров. Это удобно для выделения таких объектов, как кнопки, активные поля форм или карты ссылок. Контуры отличаются от рамок в двух отношениях: во-первых, они не занимают экранного пространства, во-вторых, не обязаны иметь прямоугольную форму. Отображение контура производится поверх окружающих элементов, непосредственно от края рамки данного элемента. Сценарии обеспечивают возможность динамического оконтуривания элементов. Кроме того, для этого можно использовать псевдоклассы :focus и :active. К сожалению, обозреватели пока не поддерживают перечисленных здесь свойств. Размер контура: свойство outline-width Синтаксис: outline-width: <размер-рамки> | inherit Начально: medium Применимо: ко всем элементам Наследуемо: нет Проценты: не используются Устройства: визуальные интерактивные Поддержка: Не поддерживается Не поддерживается Свойство outline-width задает размер динамического контура. Оно принимает те же значения, что и border-width. Пример: A:active { outline-width: thick } Стиль контура: свойство outline-style Синтаксис: outline-style: <стиль-рамки> | inherit Начально: none Применимо: ко всем элементам Наследуемо: нет Проценты: не используются Устройства: визуальные интерактивные Поддержка: Не поддерживается Не поддерживается Свойство outline-style задает стиль динамического контура. Оно принимает те же значения, что и border-style. Пример: A:focus { outline-style: double } Цвет контура: свойство outline-color Синтаксис: outline-color: <цвет> | invert | inherit Начально: invert Применимо: ко всем элементам Наследуемо: нет Проценты: не используются Устройства: визуальные интерактивные Поддержка: Не поддерживается Не поддерживается Свойство outline-color задает цвет динамического контура. Его значениями могут быть любые цвета, а также invert, что означает, что цвет контура должен быть получен обращением цветов пикселей экрана. Пример: A:focus { outline-color: red } Свойства контура: свойство outline Синтаксис: outline: [<outline-width> || <outline-style> || <outline-color>] | inherit Начально: см. индивидуальные свойства Применимо: ко всем элементам Наследуемо: нет Проценты: не используются Устройства: визуальные интерактивные Поддержка: Не поддерживается Не поддерживается Свойство outline задает размер, стиль и цвет контура одновременно. Если какое-то из этих свойств не задано, то принимается его начальное значение. Пример: A:active { outline: thick solid red }