Справочник по CSS : Тематический указатель

смотрим также

Материал из Справочник Web-языков

(Перенаправлено с css)
Перейти к: навигация, поиск


В этом разделе находятся статьи по CSS (Cascading Style Sheets)

Содержание

Справочник по свойствам и атрибутам

  • Важность - Увеличивает приоритет или важность конкретного определения.
  • Поведение - Этот раздел описывает свойство, с помощью которого Dynamic HTML (DHTML) поведение назначается элементам посредством CSS.
behavior
  • Расположение и границы - Данный раздел содержит список свойст CSS, которые применяются для описания поведения расположения и границ объекта:
border, border-bottom, border-bottom-color, border-bottom-style, border-bottom-width, border-collapse, 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-spacing, border-style, border-top, border-top-color, border-top-style, border-top-width, border-width, box-sizing, clear, empty-cells, float, margin, margin-bottom, margin-left, margin-right, margin-top, padding, padding-bottom, padding-left, padding-right, padding-top, table-layout
  • Цвет и фон - Данный раздел содержит список свойств CSS, которые применяются для описания цвета и фона объектов.
background, background-attachment, background-color, background-image, background-position, background-position-x, background-position-y, background-repeat, color
  • Фильтр - Этот раздел описывает свойство фильтра, используемое для визуальных стилей и переходов.
filter
  • Шрифт и Текст - Данный раздел содержит список свойств CSS, применимых для стилей шрифта, визуализации и форматирования текста.
caption-side, content, counter-increment, counter-reset, direction, font, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, ime-mode, quotes, layout-flow, layout-grid, layout-grid-char, layout-grid-line, layout-grid-mode, layout-grid-type, letter-spacing, line-break, line-height, ruby-align, ruby-overhang, ruby-position, text-align, text-align-last, text-autospace, text-decoration, text-decoration-blink, text-decoration-line-through, text-decoration-none, text-decoration-overline, text-decoration-underline, text-indent, text-justify, text-kashida-space, text-overflow, text-rendering, text-transform, text-shadow, text-underline-position, unicode-bidi, vertical-align, white-space, word-break, word-spacing, word-wrap, writing-mode,
  • Списки - Данный раздел содержит набор свойств CSS для разметки списков.
list-style, list-style-image, list-style-position, list-style-type
  • Позиционирование - Данный раздел содержит набор свойств CSS, которые описывают размеры и позицию элементов, а также их z-index и видимость.
bottom, clip, display, height, left, max-height, max-width, min-height, min-width, overflow-x, overflow-y, overflow, pixelBottom, pixelHeight, pixelLeft, pixelRight, pixelTop, pixelWidth, posBottom, posHeight, position, posLeft, posRight, posTop, posWidth, right, top, visibility, width, z-index
  • Печать - Данный раздел содержит список свойств CSS, влияющих на отображение web-страницы при выводе ее на печать.
orphans, pagebreakafter, pagebreakbefore, page-break-inside, widows
  • Интерфейс пользователя - Данный раздел содержит список свойств CSS, описывающих взаимодействие пользователя с web-страницей.
accelerator, cursor, ms-interpolation-mode, image-rendering, opacity, outline, outline-color, outline-offset, outline-style, outline-width, scrollbar-3dlight-color, scrollbar-arrow-color, scrollbar-base-color, scrollbar-dark-shadow-color, scrollbar-face-color, scrollbar-highlight-color, scrollbar-shadow-color, scrollbar-track-color, zoom

Расширения CSS для Firefox (Gecko)

-moz-appearance - Используется в Gecko (Firefox), чтобы сделать внешний вид элементов управления таким же, как в операционной системе.

-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-initial - Применяет к элементу значение свойства по умолчанию. Применяется ко всем свойствам.

-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-alt-text - Позволяет отображать текст в качестве альтернативы незагруженным изображениям.

:-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 - Используется, чтобы растянуть или свернуть дочерние строки.
@-moz-document - Используется в Gecko (Firefox), чтобы подключить стили к странице в зависимости от URL, домена или префикса. Применяется в основном в пользовательских таблицах стилей.

Селекторы

:active - Задает стиль активной ссылки a.

: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-letter - Задает один или более стилей для отображения первой буквы текста в объекте.

:first-line - Задает один или более стилей для отображения первой строки текста в объекте.

::selection - Применяется к той части web-документа, которую пользователь выделяет курсором мыши. К выделенному тексту применяются различные CSS-свойства.
Adjacent Sibling (+) Combinator - Соседний родственный комбинатор. Определяет связь между соседними родственными простыми селекторами.

Child (>) Combinator - Наследственный комбинатор. Определяет наследственную связь между простыми селекторами.

Descendant Combinator - Потомственный комбинатор. Определяет произвольную потомственную связь между простыми селекторами.

General Sibling (~) Combinator - Обобщенный родственный комбинатор. Определяет обобщенную связь между родственными простыми селекторами.
Equality [=] Attribute Selector - В точности определяет значение атрибута.

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 - С помощью этого метода задают выражение для нужного свойства.
Добавить страницу в закладки:
РАЗРЕШАЕТСЯ перепечатывать и копировать информацию ТОЛЬКО ПРИ РАЗМЕЩЕНИИ ссылки на оригинал!
(<A href="https://www.spravkaweb.ru/">Справочник Web-языков</A>)
другие проекты
Rambler\'s Top100 Индекс цитирования