Справочник по CSS : Тематический указатель
смотрим также
Материал из Справочник Web-языков
В этом разделе находятся статьи по CSS (Cascading Style Sheets)
Содержание |
Справочник по свойствам и атрибутам
- Важность - Увеличивает приоритет или важность конкретного определения.
- Поведение - Этот раздел описывает свойство, с помощью которого Dynamic HTML (DHTML) поведение назначается элементам посредством CSS.
- Расположение и границы - Данный раздел содержит список свойст CSS, которые применяются для описания поведения расположения и границ объекта:
- Цвет и фон - Данный раздел содержит список свойств CSS, которые применяются для описания цвета и фона объектов.
- Фильтр - Этот раздел описывает свойство фильтра, используемое для визуальных стилей и переходов.
- Шрифт и Текст - Данный раздел содержит список свойств CSS, применимых для стилей шрифта, визуализации и форматирования текста.
- Списки - Данный раздел содержит набор свойств CSS для разметки списков.
- Позиционирование - Данный раздел содержит набор свойств CSS, которые описывают размеры и позицию элементов, а также их z-index и видимость.
- Печать - Данный раздел содержит список свойств CSS, влияющих на отображение web-страницы при выводе ее на печать.
- Интерфейс пользователя - Данный раздел содержит список свойств CSS, описывающих взаимодействие пользователя с web-страницей.
- Полный список - Содержит полный список свойств и атрибутов.
Расширения CSS для Firefox (Gecko)
-moz-background-clip - Определяет зону отображения фона, который может быть задан в виде рисунка или цвета.
-moz-background-inline-policy - Используется для задания поведения фонового изображения строкового элемента, который разделен на несколько строк. Расположение изображения сказывается на количестве его повторов.
-moz-background-origin - Используется в Firefox для определения области позиционирования фонового изображения.
-moz-background-size - Задает размер фонового изображения.
-moz-binding - Используется, чтобы присоединить XBL связку к элементу DOM.
-moz-border-top-colors - Задает цвет верхней границы элемента.
-moz-border-bottom-colors - Задает цвет нижней границы элемента.
-moz-border-left-colors - Задает цвет левой границы элемента.
-moz-border-right-colors - Задает цвет правой границы элемента.
-moz-border-image - Задает изображение, с помощью которого рисуется рамка вокруг элемента.
-moz-border-radius - Используется, чтобы сделать углы границ элемента закругленными.
-moz-border-radius-topleft - Задает радиус закругления верхнего левого угла элемента.
-moz-border-radius-topright - Задает радиус закругления верхнего правого угла элемента.
-moz-border-radius-bottomright - Задает радиус закругления нижнего правого угла элемента.
-moz-border-radius-bottomleft - Задает радиус закругления нижнего левого угла элемента.
-moz-box-align - Определяет как будет выровнен контент в XUL контейнере.
-moz-box-direction - Задает обычное (от верхней или левой границ) или обратное (от нижней или правой) направление контента в элементе.
-moz-box-flex - Определяет будет ли увеличен (растянут) внутренний контейнер, чтобы заполнить внешний для него контейнер.
-moz-box-orient - Задает горизонтальную или вертикальную ориентацию контента в элементе.
-moz-box-pack - Определяет как будет выровнен (уплотнен) контент вдоль ориентации в XUL контейнере.
-moz-box-shadow - Определяет и задает тень объекта.
-moz-column-count - Задает оптимальное число столбцов, в которые будет вписан контент элемента.
-moz-column-gap - Задает промежуток между столбцами у элементов, для которых определено, что их контент располагается в несколько колонок.
-moz-column-width - Определяет оптимальную ширину столбца.
-moz-column-rule - Позволяет задать стилевое правило для прямой линии, которая отрисовывается между столбцами в элементе.
-moz-column-rule-width - Позволяет задать ширину прямой линии, которая отрисовывается между столбцами в элементе.
-moz-column-rule-style - Позволяет задать стиль для прямой линии, которая отрисовывается между столбцами в элементе.
-moz-column-rule-color - Позволяет задать цвет прямой линии, которая отрисовывается между столбцами в элементе.
-moz-force-broken-image-icon - Позволяет показать пиктограмму "Не удалось загрузить изображение" вместо самого изображения, даже есть для него указан текст в alt, или если оно недоступно.
-moz-image-region - Используется чтобы заменить изображение, описанное с помощью list-style-image, фрагментом этого изображения.
-moz-margin-end - В ситуациях "слева направо" определяет правое поле (работает аналогично margin-right), в ситуациях "справа налево" определяет левое поле (работает аналогично margin-left).
-moz-margin-start - В ситуациях "слева направо" определяет левое поле (работает аналогично margin-left), в ситуациях "справа налево" определяет правое поле (работает аналогично margin-right).
-moz-outline-radius - Используется, чтобы сделать углы контура элемента закругленными.
-moz-outline-radius-topleft - Используется, чтобы сделать верхний левый угол контура элемента закругленным.
-moz-outline-radius-topright - Используется, чтобы сделать верхний правый угол контура элемента закругленным.
-moz-outline-radius-bottomleft - Используется, чтобы сделать нижний левый угол контура элемента закругленным.
-moz-outline-radius-bottomright - Используется, чтобы сделать нижний правый угол контура элемента закругленным.
-moz-padding-end - Если текст идет слева направо, то это свойство определяет правый отступ (расстояние от правого края элемента до его границы (border)); если текст идет справа налево, то это свойство определяет левый отступ.
-moz-padding-start - Если текст идет слева направо, то это свойство определяет левый отступ (расстояние от правого края элемента до его границы (border)); если текст идет справа налево, то это свойство определяет правый отступ.
-moz-stack-sizing - Используется при высчитывании размера стека.
-moz-transform - Используется для поворота, наклона или масштабирования элементов.
-moz-transform-origin - Используется при определении точки отсчета для применения трансформации к элементу. Например, при повороте rotate по умолчанию точкой отсчета будет центр элемента.
-moz-user-focus - Используется, чтобы установить имеет ли элемент фокус ввода.
-moz-user-input - Определяет, может ли пользователь использовать элемент для ввода данных.
-moz-user-select - Служит для управления выделением текста.
-moz-window-shadow - Определяет должно ли окно иметь тень. В настоящее время это свойство работает только для Mac OS X.-moz-linear-gradient - Обозначает линейный градиент. Применяется к background-image, background.
-moz-repeating-linear-gradient - Обозначает повторяющийся линейный градиент. Применяется к background-image, background.
-moz-radial-gradient - Обозначает радиальный (круговой) градиент. Применяется к background-image, background.
-moz-repeating-radial-gradient - Обозначает повторяющийся радиальный (круговой) градиент. Применяется к background-image, background.
-moz-grab - Курсор такого типа показывает, что элемент или объект может быть "взят" и перенесен или переставлен на другое место. Применяется к cursor.
-moz-grabbing - Курсор такого типа показывает, что элемент или объект уже "взят", и его можно перенести или переставить на другое место. Применяется к cursor.
-moz-zoom-in - Курсор такого типа показывает, что элемент или объект на web-странице можно посмотреть в большем размере или в большем масштабе. Применяется к cursor.
-moz-zoom-out - Курсор такого типа показывает, что элемент или объект на web-странице можно посмотреть в меньшем размере или в меньшем масштабе. Применяется к cursor.
-moz-hidden-unscrollable - Если использовать это значение, то отключается скроллинг с помощью стрелок и колеса мыши для корневых (root) XML элементов, а также для html и body. Применяется для overflow.:-moz-broken - Позволяет отображать ссылки на утерянные или незагруженные изображения вместо самих изображений.
:-moz-drag-over - Этот псевдокласс используется, чтобы применить новый стиль к элементу, с которым происходит событие drag-over.
:-moz-first-node - Этот псевдокласс используется, чтобы задать стиль первому потомку элемента. Отличие от :first-child состоит в том, что не учитываются элементы-потомки с текстом (но не пробелами) перед ними.
:-moz-last-node - Этот псевдокласс используется, чтобы задать стиль посленему потомку элемента. Отличие от :last-child состоит в том, что не учитываются элементы-потомки с текстом (но не пробелами) перед ними.
:-moz-list-bullet - Этот псевдокласс используется, чтобы изменить внешний вид маркера в списке.
:-moz-locale-dir(ltr) - Определяет способ ориентации текста для интерфейса пользователя, который отображается "слева направо".
:-moz-locale-dir(rtl) - Определяет способ ориентации текста для интерфейса пользователя, который отображается "справа налево".
:-moz-lwtheme - Используется в документах chrome когда выбрана определенная тема и атрибуту lightweightthemes задано значение true.
:-moz-lwtheme-brighttext - Используется в документах chrome когда :-moz-lwtheme принимает значение true, и выбрана легкая тема lightweightс ярким цветом текста.
:-moz-lwtheme-darktext - Используется в документах chrome когда :-moz-lwtheme принимает значение true, и выбрана легкая тема lightweight с темным цветом текста.
:-moz-only-whitespace - Определяет стиль для элемента, который не имеет потомков или в этом потомке есть только пробелы (без текста).
:-moz-placeholder - Определяет элемент, который будет представлять собой placeholder для изображений, которые еще не загружены.
:-moz-system-metric(images-in-menus) - Будет определять какой-либо элемент, если интерфейс пользовательского компьютера поддерживает использование изображений в меню.
:-moz-system-metric(mac-graphite-theme) - Будет определять какой-либо элемент, если пользователь выберет внешний вид "Graphite" в панели "Appearance" в системных настройках Mac OS X.
:-moz-system-metric(scrollbar-end-backward) - Будет определять какой-либо элемент, если интерфейс пользовательского компьютера включает в себя кнопку со стрелочкой "вниз" или "назад" на конце полос прокрутки (скроллбарах).
:-moz-system-metric(scrollbar-end-forward) - Будет определять какой-либо элемент, если интерфейс пользовательского компьютера включает в себя кнопку со стрелочкой "вверх" или "вперед" на конце полос прокрутки (скроллбарах).
:-moz-system-metric(scrollbar-start-backward) - Будет определять какой-либо элемент, если интерфейс пользовательского компьютера включает в себя кнопку со стрелочкой "вниз" или "назад" в начале полос прокрутки (скроллбарах).
:-moz-system-metric(scrollbar-start-forward) - Будет определять какой-либо элемент, если интерфейс пользовательского компьютера включает в себя кнопку со стрелочкой "вверх" или "вперед" в начале полос прокрутки (скроллбарах).
:-moz-system-metric(scrollbar-thumb-proportional) - Будет определять какой-либо элемент, если в интерфейсе пользовательского компьютера используется полоса прокрутки с бегунком, который изменяет свой размер пропорционально размеру видимой области документа.
:-moz-system-metric(touch-enabled) - Будет определять какой-либо элемент, если устройство, на котором просматривают web-станицу (например, тачпад), поддерживает сенсорное управление.
:-moz-system-metric(windows-default-theme) - Будет определять какой-либо элемент, если пользователь использует одну из тем для Windows: Luna, Royale, Zune или Aero.
:-moz-tree-cell - Ячейка. Используется, чтобы задать границы и фон элемента.
:-moz-tree-cell-text - Текст в ячейке. Используется, чтобы задать цвет и шрифт текста.
:-moz-tree-cell-text(hover) - Будет определять какой-либо элемент, если курсор мыши в настоящий момент наведен на текст в ячейке дерева.
:-moz-tree-column - Столбец. Используется, чтобы задать стиль столбцу дерева.
:-moz-tree-drop-feedback - Отвечает за отклик на операции drag-n-drop (перетащить и оставить).
:-moz-tree-image - Изображение для ячейки. Вы можете установить изображение с помощью свойства list-style-image.
:-moz-tree-indentation - Используется для задания абзацных отступов слева в строках, которые сами являются потомками других строк.
:-moz-tree-line - Это линия, которая рисуется для соединения дочерних и родительских строк.
:-moz-tree-progressmeter - Определяет контент для ячеек типа progressmeter.
:-moz-tree-row - Используется для задания стиля строкам дерева.
:-moz-tree-row(hover) - Будет определять какой-либо элемент, если курсор мыши в настоящий момент наведен на строку дерева.
:-moz-tree-separator - Используется как разделитель в дереве.
:-moz-tree-twisty - Используется, чтобы растянуть или свернуть дочерние строки.Селекторы
:after - Определяет сгенерированный контент, который будет выведен после элемента.
:before - Определяет сгенерированный контент, который будет выведен перед элементом.
:first-child - Задает один или более стилей для первого из ряда дочерних элементов для объекта.
:last-child - Задает один или более стилей для последнего из ряда дочерних элементов для объекта.
:focus - Задает стиль элемента, получающего фокус.
:hover - Задает стиль элемента, на который наведен курсор мыши.
:lang(C) - Ставит элементу в соответствие определенный язык.
:link - Задает стиль еще не посещенной ссылки a.
:visited - Задает стиль уже посещенной ссылки a.
:root - Структурный псевдокласс. Обозначает корневой элемент XML-документа.
:nth-child - Используется для добавления стиля к элементам на основе нумерации в дереве элементов.
:nth-last-child - Используется для добавления стиля к элементам на основе нумерации в дереве элементов, начиная с последнего.
:nth-of-type - Аналогично :nth-child. Действует лишь на потомков, которые соответствуют элементу в селекторе (имеют тот же тип).
:nth-last-of-type - Аналогично :nth-last-child. Действует лишь на потомков, которые соответствуют элементу в селекторе (имеют тот же тип).
:first-of-type - Используется для добавления стиля к первому дочернему элементу заданного типа из списка потомков родительского элемента.
:last-of-type - Используется для добавления стиля к последнему дочернему элементу заданного типа из списка потомков родительского элемента.
:only-of-type - Используется для добавления стиля к дочернему элементу заданного типа, который является единственным потомком для родительского элемента.
:empty - Используется для добавления стиля к пустому элементу, т.е. который не содержит текста, пробелов и т.п., и у которого нет потомков.
:target - Используется для добавления стиля к целевому элементу (якорной ссылке) на странице.
:checked - Используется для добавления стиля к выбранному пользователем элементу управления.
:disabled - Используется для добавления стиля к неактивным элементам управления.
:enabled - Используется для добавления стиля к активным элементам управления.
:indeterminate - Используется для добавления стиля к элементам управления, находящимся ни в установленном, ни в сброшенном состоянии.
:default - Используется для добавления стиля к элементу управления, который является элементом по умолчанию в группе одинаковых элементов.:first-line - Задает один или более стилей для отображения первой строки текста в объекте.
::selection - Применяется к той части web-документа, которую пользователь выделяет курсором мыши. К выделенному тексту применяются различные CSS-свойства.Child (>) Combinator - Наследственный комбинатор. Определяет наследственную связь между простыми селекторами.
Descendant Combinator - Потомственный комбинатор. Определяет произвольную потомственную связь между простыми селекторами.
General Sibling (~) Combinator - Обобщенный родственный комбинатор. Определяет обобщенную связь между родственными простыми селекторами.Existence [] Attribute Selector - Определяет атрибут независимо от его значения.
Prefix [^=] Attribute Selector - Задает префикс, с которого начинается значение атрибута.
Substring [*=] Attribute Selector - Задает последовательность символов, которая должна входить в значение атрибута.
Whitespace [~=] Attribute Selector - Определяет значение, которому должно соответствовать одно из значений атрибута.
Hyphen [|=] Attribute Selector - Применяется для атрибутов, чье значение состоит из пары слов, разделенных дефисом.
Suffix [$=] Attribute Selector - Задает суффикс, которым заканчивается значение атрибута.- Class Selector - Селектор класса. Задает класс элемента.
- ID Selector - Селектор идентификатора. Задает идентификатор атрибута.
- Type Selector - Селектор типа. Задает тип элемента.
- Universal (*) Selector - Универсальный селектор. Определяет любой тип элемента.
Правила
- @charset - Задает кодировку внешней таблицы стилей.
- @font-face - Задает шрифт, встраиваемый в html-документ.
- @import - Позволяет импортировать в web-документ внешнюю таблицу стилей.
- @media - Задает список мультимедиа устройств, для которых необходимо использовать таблицу стилей.
- @page - Задает размеры, ориентацию и поля страничного блока в таблице стилей.
Совокупности
- imports - Определяет всю совокупность импортируемых таблиц стилей для соответствующего объекта styleSheet.
- pages - Определяет совокупность объектов page, которые соответствуют правилам @page объекта styleSheet.
- rules - Определяет всю совокупность правил, определенных для таблицы стилей.
- styleSheets - Определяет всю совокупность объектов styleSheet, представляющих таблицы стилей, которые соответствуют каждой копии объектов link или style в документе.
Методы
- addImport - Добавляет таблицу стилей в совокупность imports.
- addRule - Добавляет новое правило для таблицы стилей.
- createStyleSheet - Создает таблицу стилей для web-документа.
- getExpression - С помощью этого метода получают выражение для нужного свойства.
- removeExpression - Удаляет выражение для заданного свойства.
- removeImport - Удаляет таблицу стилей из совокупности imports, основываясь на ее порядковом номере.
- removeRule - Удаляет уже существующее для объекта styleSheet правило и соответствующую запись в совокупности rules.
- setExpression - С помощью этого метода задают выражение для нужного свойства.