Основы разработки web-страниц
«CSS-шпаргалка»
Статья из библиотеки сайта Макинтош и образование
Страница основана на Cascading Style Cheatsheet, созданной Brett Merkey
Основы синтаксиса |
|
| Атрибут style |
Свойства, действующие на единственный тег, могут быть описаны непосредственно в атрибуте style этого тега. <h1 style="color: purple;"> |
| Тег style |
Включается в «головную» часть документа (<head></head>). Действует на все теги этого документа. <style> |
| Подключение внешнего файла стилей |
Может быть создана общая таблица стилей, подключаемая к группе html-файлов (чаще всего, всем файлам сайта). <link rel="stylesheet" type="text/css" href="styles.css" />
(Импорт поддерживается только более новыми версиями браузеров) |
| Media |
CSS-2 позволяет определять разные таблицы стилей для различных устройств вывода. Сейчас поддерживаются, в основном, только «screen» и «print». <style media="print"> /* стили для печати */ |
| Комментарии |
Комментарии в таблице стилей помогают разобраться в назначении отдельных ее элементов. Текст комментария не обрабатывается браузером. /* Все это — комментарий */ |
| Теги div и span |
Эти теги позволяют применить стили к фрагментам страницы, не оказывая более никакого влияния на нее. div создает блок. <div style="color:green; font-weight:bold">Этот текст будет отделен от предшествующего и последующего</div> span форматирует часть символов внутри строки/абзаца. .example { color: red; } <p>Это — <span class="example">красные слова</span> в тексте абзаца</p> |
| Краткая запись свойств |
Для ряда свойств допустима сокращенная запись. Возможно указание одного значения (действует во всех направлениях), двух (сверху/снизу справа/слева) или четырех (сверху справа снизу слева). Примеры:
div { padding: 5px 10% 0 10% }
|
Селекторы |
|
| Класс |
Стили, определенные для селектора класса, будут применены к каждому тегу с таким значением атрибута class. В таблице стилей имя класса начинается с точки, в атрибуте тега точка не пишется. .example {color: red;} <p class="example">Пример красного текста.</p> |
| ID |
Стили, определенные для селектора ID, будут применены к тегу с таким значением атрибута id. ID должен встречаться в документе только 1 раз. В таблице стилей имя ID начинается со знака «#», в атрибуте тега # не пишется. #i5 {color: red;} |
| Группировка |
Если необходимо описать одинаковые свойства для нескольких разных элементов, селекторы перечисляются через запятую. h1, h2, h3, h5 {color: purple;} |
| Контекстный селектор |
Если несколько селекторов записано через пробел, стиль будет применен только к элементу, описанному вторым селектором, вложенному в элемент, описанный первым селектором. h1 b {color: red;} |
| «Потомок» |
Действует аналогично контекстному селектору, но только в случае, если второй элемент непосредственно вложен в первый. h1 > b {color: red;} |
| «Сосед» |
Действует только на элемент, описанный вторым селектором, непосредственно следующий за элементом, описанным первым селектором. h1 + p {color: red;} |
Псевдоклассы и псевдоэлементы |
|
| :link :visited :active |
Псевдоклассы, используемые совместно с селектором ссылки «a». a:link {color: #900} /* для ссылки */ Имя нормального класса (если есть) должно предшествовать указанию псевдокласса: a.external:link { color: magenta } |
| :hover |
Псевдокласс, используемый чаще всего с селектором ссылки (возможно применение и с другими элементами). a:hover { background:#ffff00; } /* при наведении мыши на элемент */ |
| :first-line |
Первая строка текста элемента. Только для элементов уровня блока. p:first-line {color: red;} |
| :first-letter |
Первая буква текста элемента. Только для элементов уровня блока. p:first-letter {color: red;} |
Каскадирование |
|
| Наследование |
Любой элемент наследует свойства от элемента, в котором он содержится. |
| !important |
Определение, имеющее наивысший приоритет, независимо от своего расположения. h1 {color: maroon !important;} |
| Приоритеты |
Чем ближе к элементу описано свойство, тем выше его приоритет. Приоритеты от высшего к низшему:
|
Значения свойств |
|
| Единицы длины |
Единицы измерения записываются в виде двухсимвольного сокращения без пробела между ними и числом.
width: 50px; |
| Проценты |
Относительный размер (исходная величина зависит от контекста). Например, здесь заголовок h2 уменьшен до 75% его размера «по умолчанию». h2 {font-size: 75% } |
| Условные |
Для ряда свойств в CSS имеются условные значения. |
| Цвет |
Может указываться в форме шестнадцатеричного кода, процентных соотношений или имени. color: #ff00ff; /* возможна краткая запись в виде #f0f */ |
| URL |
Используется для ссылки на графический файл. url(picture.gif) |
Свойства шрифта |
|
| font-family |
Определяет шрифт или тип шрифта (в порядке предпочтения). p {font-family: "Times New Roman", serif;} |
| font-style |
Выбор начертания: italic или normal. em {font-style: italic;} |
| font-variant |
Выбор из вариантов: small-caps и normal. В будущем возможно добавление вариантов. h3 {font-variant: small-caps;} <h3>Этот текст набран капителью (Small Caps)</h3> |
| font-weight |
Насыщенность шрифта. Возможны словесные обозначения: bold, normal, lighter, bolder и числовые значения от 100 до 900. b {font-weight: 700;} |
| font-size |
Размер шрифта: абсолютный (pt, in, cm, px), относительный (em, ex) либо в процентах от нормального. h2 {font-size: 200%;} |
| font |
Сокращенное обозначение для всех свойств шрифта. Порядок записи значений: p {font: bold 12pt/14pt Helvetica,sans-serif;} |
Свойства цветов и фона |
|
| color |
Устанавливает основной цвет элемента. h6 {color: green;} |
| background-color |
Устанавливает фоновый цвет. По умолчанию: transparent (прозрачный). div { background-color: #cccc00 } |
| background-image |
Устанавливает фоновый рисунок. Изображение может «застилать» всю площадь элемента либо повторяться только в заданном направлении. Рекомендуется совместно использовать свойство background-color. body {background-image: url(bg41.gif);} |
| background-repeat |
Определяет, как будет использовано фоновое изображение. Допустимые значения: repeat (по всей поверхности), no-repeat, repeat-x (повторять только по горизонтали), repeat-y (только по вертикали). По умолчанию: repeat. body { background-repeat: repeat-y } |
| background-attachment |
Определяет, будет ли изображение перемещаться при прокрутке страницы. Допустимые значения: scroll и fixed. body {background-attachment: fixed;} |
| background-position |
Определяет положение фона. Допустимые значения: в единицах длины, процентах либо словесные (top, center, bottom, left, right). body {background-position: top center;} |
| background |
Сокращение для свойств фона. Порядок записи — произвольный. body {background: white url(bg41.gif) fixed center;} |
Свойства текста |
|
| letter-spacing |
Устанавливает межсимвольный интервал. p {letter-spacing: 0.5em;} |
| line-height |
Устанавливает интерлиньяж. Отрицательные значения недопустимы p {line-height: 18pt;} |
| text-decoration |
Выделение текста. Допустимые значения: none, underline, overline, line-through, blink. Допустимо использовать несколько значений одновременно. .dualline {text-decoration: underline overline;} |
| text-transform |
Изменяет регистр букв в тексте. Допустимые значения: capitalize (делает заглавной первую букву каждого слова), uppercase, lowercase. h1 {text-transform: uppercase;} |
| text-align |
Горизонтальное выравнивание текста. Используется только в элементах уровня блока. p {text-align: justify;} |
| text-indent |
Отступ первой строки текста. Используется только в элементах уровня блока. Допустимы отрицательные значения p {text-indent: 5em;} |
| vertical-align |
Положение по вертикали в строке текста или ячейке таблицы. Допустимые значения: baseline; middle; sub; super; top; text-top; bottom; text-bottom. .super {vertical-align: super;} |
| word-spacing |
Величина межсловного пробела. p {word-spacing: 0.5em;} |
Позиционирование |
|
| Модель блока |
Каждый элемент уровня блока (<p>, <h1>и т. д.) можно представить как прямоугольник. Изменением размеров этого прямоугольника с помощью CSS можно добиваться разнообразных эффектов.
Заметьте: в IE6.0 свойство width обрабатывается не так, как предусмотрено стандартами W3C! |
| margin-top margin-right margin-bottom margin-left |
Размеры полей элемента. Отрицательные значения допустимы, но могут вызывать проблемы в Netscape 4 и IE 4 ul {margin-top: 0.5in; |
| margin |
Сокращение для размеров полей. Следующее определение эквивалентно приведенному выше: ul {margin: 0.5in 30px 0.5in 3em;} |
| padding-top padding-right padding-bottom padding-left |
Размеры отбивки между рамкой элемента и его содержимым. Отрицательные значения недопустимы. ul {padding-top: 0.5in; |
| padding |
Сокращение для размеров отбивок. Следующее определение эквивалентно приведенному выше: ul {padding: 0.5in 30px 0.5in 3em;} |
| border-top-width border-right-width border-bottom-width border-left-width |
Толщина рамки. Отрицательные значения недопустимы. ul {border-top-width: 0.5in; |
| border-width |
Сокращение для размеров рамки. Следующее определение эквивалентно приведенному выше: ul {border-width: 0.5in 30px 0.5in 3em;} |
| border-color |
Цвет рамки элемента. В данном примере, верхняя и нижняя линии рамки будут серебристо-серыми, а боковые — черными. Можно указать все 4 линии по отдельности. h1 {border-color: silver black;} |
| border-style |
Тип линий рамки элемента. Значения: dashed; dotted; double; groove; inset; outset; ridge; solid; none. По умолчанию: none (рамки нет). h1 {border-style: solid; border-color: purple;} 
|
| border-top border-right border-bottom border-left |
Сокращения для свойств границ рамки. ul {border-top: 0.1in solid black; |
| border |
Сокращение, определяющее все свойства рамки. h1 {border: 2px dashed tan;} |
| width |
Ширина элемента. Только для заменяемых элементов и элементов уровня блока. Отрицательные значения недопустимы. table {width: 80%;} |
| height |
Высота элемента. Только для заменяемых элементов (любых) и элементов уровня блока (с ограничениями). Отрицательные значения недопустимы. img.icon {height: 50px;} |
| overflow |
Определяет поведение блока, если содержимое не укладывается в заданные размеры. Допустимые значения: visible (показывать все); hidden (скрыть то, что не поместилось); scroll (обеспечить прокрутку); auto (обработать, как предусмотрено в браузере) div.pane { overflow: auto } |
| float |
Элемент размещается с указанной стороны, остальной текст «обтекает» его. Допустимые значения: left; right; none. img {float: left;} |
| clear |
Указывает, с какой стороны от блока не может быть «плавающих» элементов. Допустимые значения: both; left; right; none. По умолчанию none. h1 {clear: both;} |
| position |
Определяет метод позиционирования элемента. Допустимые значения: static (в общем потоке); relative (относительно нормального положения в потоке); absolute (относительно левого верхнего угла «родительского» элемента); fixed (не прокручивается вместе с содержимым страницы; значение не поддерживается в IE 5/6 for Windows и Netscape 6). По умолчанию static. a { position: relative } |
| left top |
Смещение по горизонтали и вертикали при относительном и абсолютном позиционировании. Допустимые значения: auto, либо значение в единицах длины (pt, in, cm, px), либо в процентах. Допустимы отрицательные значения. div { left: 2%; top: -20px;} |
| z-index |
Определяет «слой», в котором расположен элемент. Допустимые значения: auto (по порядку описания элементов в html-файле) либо целое число. Чем больше число, тем «ближе» расположен элемент. { z-index: 2 } |
Видимость |
|
| display |
Определяет тип отображения элемента. Допустимые значения: block; inline; list-item; none. По умолчанию block. При {display: none;} место для элемента не оставляется. (См. visibility.) .hide {display: none;} |
| visibility |
Определяет, будет ли элемент видимым. Место для элемента выделяется в любом случае. Допустимые значения: visible; hidden. (См. display) .visy { visibility: hidden } |
| clip |
Определяет отображаемую область абсолютно позиционированного элемента. Допустимые значения: rect (top right left bottom), где top right left bottom — auto или значение с единицами длины (pt, in, cm, px). img.p1 { clip: rect (5pt auto auto auto) } |
Управление разрывом страниц при печати |
|
| page-break-after page-break-before |
Разрыв страницы после элемента / перед элементом. Управление разрывом страниц при печати сейчас рекомендуется использовать только в атрибутах тегов (рекомендуется: h1-h6, p, div и т. п.) Пример 1: Пример 2: |
Прочие свойства |
|
| white-space |
Определяет обработку пробелов. Допустимые значения: normal, pre (выводить пробелы и переводы строки как в исходном тексте), nowrap (не переносить строку до окончания блока или до тега <br />). td {white-space: nowrap;} |
| list-style-type |
Тип меток элементов списка. Допустимые значения: disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none. ul {list-style-type: square;} |
| list-style-image |
Изображение в качестве метки элементов списка. Применимо к элементам со свойством {display: list-item}. ul {list-style-image: url(bullet3.gif);} |
| list-style-position |
Положение метки элемента по отношению к его границам. Допустимые значения: inside; outside. По умолчанию: outside. li {list-style-position: inside;} |
| list-style |
Сокращение для описания всех свойств элемента списка. ul {list-style: square url(bullet3.gif) outer;} |
| cursor |
Вид курсора мыши над элементом. Допустимые значения: auto; crosshair; default (обычно, стрелка); help; move; pointer; text; wait; e-resize; ne-resize; nw-resize; n-resize; se-resize; sw-resize; s-resize; w-resize. blockquote { cursor: help } |
© М. Е. Крекин, 2005-2006. Макинтош и образование