CSS-шпаргалка

Любой элемент наследует свойства от элемента, в котором он содержится.

Определение, имеющее наивысший приоритет, независимо от своего расположения.

h1 {color: maroon !important;}

Чем ближе к элементу описано свойство, тем выше его приоритет. Приоритеты от высшего к низшему:

1. атрибут тега style="..."
   1. Пример: <p style="color: red; font-family: 'Times New Roman', serif">некоторый текст</p>
2. тег <style> в головной части документа
   1. Пример:
   2. <style>
   3. .title { font-family: 'Snap ITC', cursive;
   4. font-size: 60pt;}
   5. </style>
3. внешняя таблица стилей
   1. Пример: <link rel="stylesheet" type="text/css" href="demo.css">
4. настройки браузера «по умолчанию»

Каждый элемент уровня блока (<p>, <h1>и т. д.) можно представить как прямоугольник. Изменением размеров этого прямоугольника с помощью CSS можно добиваться разнообразных эффектов.

Заметьте: в IE6.0 свойство width обрабатывается не так, как предусмотрено стандартами W3C!

Размеры полей элемента. Отрицательные значения допустимы, но могут вызывать проблемы в Netscape 4 и IE 4

ul {margin-top: 0.5in;

margin-right: 30px;

margin-bottom: 0.5in;

margin-left: 3em;}

Сокращение для размеров полей. Следующее определение эквивалентно приведенному выше:

ul {margin: 0.5in 30px 0.5in 3em;}

Размеры отбивки между рамкой элемента и его содержимым. Отрицательные значения недопустимы.

ul {padding-top: 0.5in;

padding-right: 30px;

padding-bottom: 0.5in;

padding-left: 3em;}

Сокращение для размеров отбивок. Следующее определение эквивалентно приведенному выше:

ul {padding: 0.5in 30px 0.5in 3em;}

Толщина рамки. Отрицательные значения недопустимы.

ul {border-top-width: 0.5in;

border-right-width: 30px;

border-bottom-width: 0.5in;

border-left-width: 3em;}

Сокращение для размеров рамки. Следующее определение эквивалентно приведенному выше:

ul {border-width: 0.5in 30px 0.5in 3em;}

Цвет рамки элемента. В данном примере, верхняя и нижняя линии рамки будут серебристо-серыми, а боковые — черными. Можно указать все 4 линии по отдельности.

h1 {border-color: silver black;}

Тип линий рамки элемента. Значения: dashed; dotted; double; groove; inset; outset; ridge; solid; none. По умолчанию: none (рамки нет).

h1 {border-style: solid; border-color: purple;}

Сокращения для свойств границ рамки.

ul {border-top: 0.1in solid black;

border-right: 3px solid red;

border-bottom: 2px dashed red;

border-left: 0.3em dotted black;}

Сокращение, определяющее все свойства рамки.

h1 {border: 2px dashed tan;}

Ширина элемента. Только для заменяемых элементов и элементов уровня блока. Отрицательные значения недопустимы.

table {width: 80%;}

Высота элемента. Только для заменяемых элементов (любых) и элементов уровня блока (с ограничениями). Отрицательные значения недопустимы.

img.icon {height: 50px;}

Определяет поведение блока, если содержимое не укладывается в заданные размеры. Допустимые значения: visible (показывать все); hidden (скрыть то, что не поместилось); scroll (обеспечить прокрутку); auto (обработать, как предусмотрено в браузере)

div.pane { overflow: auto }

Элемент размещается с указанной стороны, остальной текст «обтекает» его. Допустимые значения: left; right; none.

img {float: left;}

Указывает, с какой стороны от блока не может быть «плавающих» элементов. Допустимые значения: both; left; right; none. По умолчанию none.

h1 {clear: both;}

Определяет метод позиционирования элемента. Допустимые значения: static (в общем потоке); relative (относительно нормального положения в потоке); absolute (относительно левого верхнего угла «родительского» элемента); fixed (не прокручивается вместе с содержимым страницы; значение не поддерживается в IE 5/6 for Windows и Netscape 6). По умолчанию static.

a { position: relative }

Смещение по горизонтали и вертикали при относительном и абсолютном позиционировании. Допустимые значения: auto, либо значение в единицах длины (pt, in, cm, px), либо в процентах. Допустимы отрицательные значения.

div { left: 2%; top: -20px;}

Определяет «слой», в котором расположен элемент. Допустимые значения: auto (по порядку описания элементов в html-файле) либо целое число. Чем больше число, тем «ближе» расположен элемент.

{ z-index: 2 }

Определяет тип отображения элемента. Допустимые значения: block; inline; list-item; none. По умолчанию block. При {display: none;} место для элемента не оставляется. (См. visibility.)

.hide {display: none;}

Определяет, будет ли элемент видимым. Место для элемента выделяется в любом случае. Допустимые значения: visible; hidden. (См. display)

.visy { visibility: hidden }

Определяет отображаемую область абсолютно позиционированного элемента. Допустимые значения: rect (top right left bottom), где top right left bottom — auto или значение с единицами длины (pt, in, cm, px).

img.p1 { clip: rect (5pt auto auto auto) }

Разрыв страницы после элемента / перед элементом.

Управление разрывом страниц при печати сейчас рекомендуется использовать только в атрибутах тегов (рекомендуется: h1-h6, p, div и т. п.)

Отрабатывается не всеми браузерами (например, не отрабатывается в Firefox 1.5 и Safari 2)

Допустимые значения:

auto делать разрыв как обычно

always всегда начинать новую страницу

Пример 1:

<style>

.page {page-break-after: always;}

</style>

...

<p class="page">

...

Пример 2:

...

<p style="page-break-after: always;">

...