Свойства CSS на Xhtml.co.il регулярно тестируются в основных браузерах.
Протестированно: 02 Июля, 2010.
Селекторы CSS
В CSS, селекторы используются для выбора элемента(ов), которые вы хотите стилизовать.
Номер в колонке "CSS" указывает, в какой версии CSS свойство определено (CSS1 или CSS2).
| Селектор | Пример | Пример селекторов: | CSS |
|---|---|---|---|
| .class | .intro | Все элементы с class="intro" | 1 |
| #id | #firstname | Элемент с id="firstname" | 1 |
| * | * | Все элементы | 2 |
| element | p | Все элементы <p> | 1 |
| element,element | div,p | Все элементы <div> и все элементы <p> | 1 |
| element element | div p | Все элементы <p> внутри <div> | 1 |
| element>element | div>p | Все элементы <p> где родитель является элементом <div> | 2 |
| element+element | div+p | Все элементы <p> находящиеся сразу за элементом <div> | 2 |
| [attribute] | [target] | Все элементы с атрибутом target | 2 |
| [attribute=value] | [target=_blank] | Все элементы с атрибутом target равным "_blank" | 2 |
| [attribute~=value] | [title=flower] | Все элементы с атрибутом title, который включает слова разделенные пробелом, одно из которых "flower" | 2 |
| [attribute|=language] | [lang|=en] | Все элементы где значение атрибута lang является "en", даже если значение включает дефис (-), как "en-us" | 2 |
| :link | a:link | Все ссылки (<a> элементы с href) | 1 |
| :visited | a:visited | Все посещенные ссылки | 1 |
| :active | a:active | Активные ссылки | 1 |
| :hover | a:hover | Ссылки на прохождение мышкой | 1 |
| :focus | input:focus | Фокусируемые элементы ввода | 2 |
| :first-letter | p:first-letter | Первая буква всех элементов <p> | 1 |
| :first-line | p:first-line | Первая строка всех элементов <p> | 1 |
| :first-child | p:first-child | Все элементы <p>, которые являются первым потомком их родителей | 2 |
| :before | p:before | Содержание будет помещено до каждого элемента <p> | 2 |
| :after | p:after | Содержание будет помещено после каждого элемента <p> | 2 |
| :lang(language) | p:lang(it) | Все элементы <p> с атрибутом lang, включающим "it" | 2 |
Свойства CSS
Группы свойств CSS
Номер в колонке "CSS" указывает, в какой версии CSS свойство определено (CSS1 или CSS2).
Свойства фона
| Свойство | Описание | CSS |
|---|---|---|
| background | Устанавливает все свойства фона в одной декларации | 1 |
| background-attachment | Устанавливает фоновое изображение фиксированным или прокручиваемым с остальной частью страницы | 1 |
| background-color | Устанавливает цвет фона элемента | 1 |
| background-image | Устанавливает фоновое изображение для элемента | 1 |
| background-position | Устанавливает начальное положение фонового изображения | 1 |
| background-repeat | Устанавливает как фоновое изображение будет повторяться | 1 |
Свойства границы и контура
| Свойиво | Описание | CSS |
|---|---|---|
| border | Устанавливает все свойства границы в одной декларации | 1 |
| border-bottom | Устанавливает все свойства верхней границы в одной декларации | 1 |
| border-bottom-color | Устанавливает цвет нижней границы | 1 |
| border-bottom-style | Устанавливает стиль нижней границы | 1 |
| border-bottom-width | Устанавливает ширину нижней границы | 1 |
| border-color | Устанавливает цвет четырех границ | 1 |
| border-left | Устанавливает все свойства левой границы в одной декларации | 1 |
| border-left-color | Устанавливает цвет левой границы | 1 |
| border-left-style | Устанавливает стиль левой границы | 1 |
| border-left-width | Устанавливает ширину левой границы | 1 |
| border-right | Устанавливает все свойства правой границы в одной декларации | 1 |
| border-right-color | Устанавливает цвет правой границы | 1 |
| border-right-style | Устанавливает стиль правой границы | 1 |
| border-right-width | Устанавливает ширину правой границы | 1 |
| border-style | Устанавливает стиль четырех границ | 1 |
| border-top | Устанавливает все свойства верхней границы в одной декларации | 1 |
| border-top-color | Устанавливает цвет верхней границы | 1 |
| border-top-style | Устанавливает стиль верхней границы | 1 |
| border-top-width | Устанавливает ширину верхней границы | 1 |
| border-width | Устанавливает ширину четырех границ | 1 |
| outline | Устанавливает все свойства контура в одной декларации | 2 |
| outline-color | Устанавливает цвет контура | 2 |
| outline-style | Устанавливает стиль контура | 2 |
| outline-width | Устанавливает ширину контура | 2 |
Свойства размеров
| Свойство | Описание | CSS |
|---|---|---|
| height | Устанавливает высоту элемента | 1 |
| max-height | Устанавливает максимальную высоту элемента | 2 |
| max-width | Устанавливает максимальную ширину элемента | 2 |
| min-height | Устанавливает минимальную высоту элемента | 2 |
| min-width | Устанавливает минимальную ширину элемента | 2 |
| width | Устанавливает ширину элемента | 1 |
Свойства шрифта
| Свойство | Описание | CSS |
|---|---|---|
| font | Устанавливает все свойства шрифта в одной декларации | 1 |
| font-family | Определяет семейство шрифта для текста | 1 |
| font-size | Определяет размер шрифта текста | 1 |
| font-style | Определяет стиль шрифта для текста | 1 |
| font-variant | Определяет, должен ли текст отображаться в капитель шрифта | 1 |
| font-weight | Определяет вес шрифта | 1 |
Свойства генерированного содержания
| Свойство | Описание | CSS |
|---|---|---|
| content | Используется вместе с псевдо-элементами :before и :after, для внесения генерированного содержания | 2 |
| counter-increment | Увеличивает один или несколько счетчиков | 2 |
| counter-reset | Создает или сбрасывает один или несколько счетчиков | 2 |
| quotes | Устанавливает тип кавычек для встраиваемых цитат | 2 |
Свойства списка
| Свойство | Описание | CSS |
|---|---|---|
| list-style | Устанавливает все свойства для списка в одной декларации | 1 |
| list-style-image | Определяет изображение как маркер элемента списка | 1 |
| list-style-position | Указывает, если маркеры элемента списка должны находиться внутри или за пределами содержания | 1 |
| list-style-type | Задает тип маркера элемента списка | 1 |
Свойства полей
| Свойство | Описание | CSS |
|---|---|---|
| margin | Устанавливает все свойств полей в одной декларации | 1 |
| margin-bottom | Устанавливает нижнее поле элемента | 1 |
| margin-left | Устанавливает левое поле элемента | 1 |
| margin-right | Устанавливает правое поле элемента | 1 |
| margin-top | Устанавливает верхнее поле элемента | 1 |
Свойства заполнения
| Свойство | Описание | CSS |
|---|---|---|
| padding | Устанавливает все свойства заполнения в одной декларации | 1 |
| padding-bottom | Устанавливает нижнее заполнение элемента | 1 |
| padding-left | Устанавливает левое заполнение элемента | 1 |
| padding-right | Устанавливает правое заполнение элемента | 1 |
| padding-top | Устанавливает верхнее заполнение элемента | 1 |
Свойства позиционирования
| Свойство | Описание | CSS |
|---|---|---|
| bottom | Устанавливает нижний отступ для позиционируемого блока | 2 |
| clear | Определяет стороны элемента, где другие плавающие элементы не допускаются | 1 |
| clip | Обрезает абсолютно-позиционируемые элементы | 2 |
| cursor | Задает тип курсора, который будет отображаться | 2 |
| display | Указывает тип коробки элемента для генерирования | 1 |
| float | Определяет, должна ли коробка плавать | 1 |
| left | Устанавливает левый отступ для позиционируемого блока | 2 |
| overflow | Указывает, что произойдет, если содержимое окна переполнит элемент | 2 |
| position | Указывает тип позиционирования для элементов | 2 |
| right | Устанавливает правый отступ для позиционируемого блока | 2 |
| top | Устанавливает верхний отступ для позиционируемого блока | 2 |
| visibility | Определяет, должен ли элемент быть видимым | 2 |
| z-index | Устанавливает порядок стека элемента | 2 |
Свойства печати
| Свойство | Описание | CSS |
|---|---|---|
| orphans | Устанавливает минимальное число линий, которые должны быть оставлены в нижней части страницы, когда разрыв страницы происходит внутри элемента | 2 |
| page-break-after | Устанавливает поведение разрыва страницы после элемента | 2 |
| page-break-before | Устанавливает поведение разрыва страницы до элемента | 2 |
| page-break-inside | Устанавливает поведение разрыва страницы внутри элемента | 2 |
| widows | Устанавливает минимальное число линий, которые должны быть оставлены в верхней части страницы, когда разрыв страницы происходит внутри элемента | 2 |
Свойства таблицы
| Свойство | Описание | CSS |
|---|---|---|
| border-collapse | Указывает, следует ли или нет свернуть границы таблицы | 2 |
| border-spacing | Задает расстояние между границами соседних ячеек | 2 |
| caption-side | Указывает размещение заголовка таблицы | 2 |
| empty-cells | Указывает, следует ли отображать границы и фон на пустые ячейки в таблице | 2 |
| table-layout | Устанавливает алгоритм расположения, используемый для таблицы | 2 |
Свойства текста
| Свойство | Описание | CSS |
|---|---|---|
| color | Устанавливает цвет текста | 1 |
| direction | Определяет направление текста | 2 |
| letter-spacing | Увеличивает или уменьшает пространство между символами в тексте | 1 |
| line-height | Устанавливает высоту строки | 1 |
| text-align | Определяет горизонтальное выравнивание текста | 1 |
| text-decoration | Указывает добавленные украшения к тексту | 1 |
| text-indent | Указывает отступ первой строки в текстовом блоке | 1 |
| text-shadow | Указывает, эффект тени текста | 2 |
| text-transform | Управление капитализацией текста | 1 |
| unicode-bidi | 2 | |
| vertical-align | Устанавливает вертикальное выравнивание элемента | 1 |
| white-space | Указывает, как обрабатывается пустое пространство внутри элемента | 1 |
| word-spacing | Увеличивает или уменьшает пробел между словами в тексте | 1 |
Была ли эта информация полезной?
