Руководство по CSS
Данный справочник по CSS перечисляет все стандартные свойства, псевдоклассы и псевдоэлементы, @-правила, единицы измерения и селекторы CSS в алфавитном порядке. Справочник позволит вам быстро найти подробную информацию о каждом из них. Он не только перечисляет свойства CSS 1 и CSS 2.1, но является и справочником по CSS3 со ссылками на описание каждого стандартизированного или уже стабилизированного свойства CSS3. Также включает в себя краткое руководство DOM-CSS / CSSOM.
Заметьте, что определения CSS-правил полностью (ASCII) текста-ориентированы, в то время как определения правил DOM-CSS / CSSOM объектно-ориентированы.
Смотрите также Mozilla CSS Extensions (en-US) для Gecko-специфичных свойств с префиксом -moz
; и WebKit CSS Extensions (en-US) для WebKit-специфичных свойств. Смотрите Обзор CSS-префиксов для разных браузеров от Peter Beverloo для всех свойств с префиксами.
Базовый синтаксис правил
Имейте в виду, что любая синтаксическая ошибка в задании правил сделает некорректным всё правило.
Стили
selectorlist { property: value; [more property:value; pairs] }
...где selectorlist: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
Смотрите списки селекторов, псевдоэлементов и псевдоклассов ниже.
Примеры
css
strong {
color: red;
}
div.menu-bar li:hover > ul {
display: block;
}
Больше о примерах: #1 (en-US), #2 (en-US)
@-правила
Так как у них есть много различных структурных форматов, смотрите нужный синтаксис @-правил.
Справочный указатель
-
A
abs()
(en-US)accent-color
acos()
(en-US):active
additive-symbols (@counter-style)
::after (:after)
align-content
align-items
align-self
align-tracks
(en-US)all
<an-plus-b>
<angle>
<angle-percentage>
(en-US)animation
animation-composition
(en-US)animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-range
(en-US)animation-range-end
(en-US)animation-range-start
(en-US)animation-timeline
(en-US)animation-timing-function
@annotation
annotation()
(en-US):any-link
appearance
ascent-override (@font-face)
(en-US)asin()
(en-US)aspect-ratio
(en-US)atan()
(en-US)atan2()
(en-US)attr()
B
::backdrop
backdrop-filter
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-position-x
background-position-y
(en-US)background-repeat
background-size
base-palette (@font-palette-values)
(en-US)<basic-shape>
(en-US)::before (:before)
:blank
bleed (@page)
<blend-mode>
(en-US)block-overflow
block-size
blur()
border
border-block
(en-US)border-block-color
(en-US)border-block-end
(en-US)border-block-end-color
(en-US)border-block-end-style
(en-US)border-block-end-width
(en-US)border-block-start
(en-US)border-block-start-color
(en-US)border-block-start-style
(en-US)border-block-start-width
(en-US)border-block-style
(en-US)border-block-width
(en-US)border-bottom
border-bottom-color
(en-US)border-bottom-left-radius
(en-US)border-bottom-right-radius
(en-US)border-bottom-style
(en-US)border-bottom-width
(en-US)border-collapse
(en-US)border-color
(en-US)border-end-end-radius
(en-US)border-end-start-radius
(en-US)border-image
(en-US)border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-inline
(en-US)border-inline-color
(en-US)border-inline-end
(en-US)border-inline-end-color
(en-US)border-inline-end-style
(en-US)border-inline-end-width
(en-US)border-inline-start
(en-US)border-inline-start-color
(en-US)border-inline-start-style
(en-US)border-inline-start-width
(en-US)border-inline-style
(en-US)border-inline-width
(en-US)border-left
(en-US)border-left-color
(en-US)border-left-style
(en-US)border-left-width
(en-US)border-radius
border-right
(en-US)border-right-color
(en-US)border-right-style
(en-US)border-right-width
(en-US)border-spacing
(en-US)border-start-end-radius
(en-US)border-start-start-radius
(en-US)border-style
(en-US)border-top
(en-US)border-top-color
(en-US)border-top-left-radius
(en-US)border-top-right-radius
(en-US)border-top-style
(en-US)border-top-width
(en-US)border-width
bottom
@bottom-center
box-decoration-break
(en-US)box-shadow
box-sizing
break-after
(en-US)break-before
(en-US)break-inside
(en-US)brightness()
(en-US)
C
calc()
caption-side
(en-US)caret
caret-color
(en-US)caret-shape
@character-variant
character-variant()
(en-US)@charset
(en-US):checked
circle()
(en-US)clamp()
clear
clip
(en-US)clip-path
<color>
color
(en-US)color-scheme
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
(en-US)column-span
(en-US)column-width
(en-US)columns
(en-US)conic-gradient()
(en-US)contain
(en-US)contain-intrinsic-block-size
(en-US)contain-intrinsic-height
(en-US)contain-intrinsic-inline-size
(en-US)contain-intrinsic-size
(en-US)contain-intrinsic-width
(en-US)container
(en-US)container-name
(en-US)container-type
(en-US)content
content-visibility
(en-US)contrast()
(en-US)cos()
(en-US)<counter>
(en-US)counter-increment
(en-US)counter-reset
(en-US)counter-set
(en-US)@counter-style
counters()
(en-US)cross-fade()
(en-US)cubic-bezier()
(en-US)::cue
::cue-region
(en-US):current
(en-US)cursor
<custom-ident>
length#cap
length#ch
length#cm
D
angle#deg
<dashed-ident>
(en-US):default
:defined
descent-override (@font-face)
(en-US)<dimension>
(en-US):dir
direction
:disabled
display
<display-box>
(en-US)<display-inside>
(en-US)<display-internal>
(en-US)<display-legacy>
(en-US)<display-listitem>
<display-outside>
drop-shadow()
(en-US)resolution#dpcm
(en-US)resolution#dpi
(en-US)resolution#dppx
(en-US)
E
element()
(en-US)ellipse()
(en-US):empty
empty-cells
(en-US):enabled
env()
(en-US)exp()
(en-US)length#em
length#ex
F
fallback (@counter-style)
(en-US)filter
<filter-function>
:first
:first-child
::first-letter (:first-letter)
::first-line (:first-line)
:first-of-type
fit-content()
(en-US)<flex>
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
flex_value#fr
float
:focus
:focus-visible
:focus-within
font
font-display (@font-face)
@font-face
font-family
font-family (@font-face)
font-family (@font-palette-values)
(en-US)font-feature-settings
(en-US)font-feature-settings (@font-face)
(en-US)@font-feature-values
font-kerning
(en-US)font-language-override
(en-US)font-optical-sizing
(en-US)font-palette
(en-US)@font-palette-values
(en-US)font-size
font-size-adjust
(en-US)font-stretch
(en-US)font-stretch (@font-face)
(en-US)font-style
font-style (@font-face)
(en-US)font-synthesis
(en-US)font-synthesis-position
(en-US)font-synthesis-small-caps
(en-US)font-synthesis-style
(en-US)font-synthesis-weight
(en-US)font-variant
(en-US)font-variant (@font-face)
(en-US)font-variant-alternates
(en-US)font-variant-caps
(en-US)font-variant-east-asian
(en-US)font-variant-emoji
(en-US)font-variant-ligatures
font-variant-numeric
font-variant-position
(en-US)font-variation-settings
(en-US)font-variation-settings (@font-face)
(en-US)font-weight
font-weight (@font-face)
(en-US)forced-color-adjust
(en-US)format()
(en-US)<frequency>
(en-US)<frequency-percentage>
(en-US):fullscreen
:future
(en-US)
G
angle#grad
gap
<gradient>
(en-US)::grammar-error
grayscale()
(en-US)grid
grid-area
grid-auto-columns
(en-US)grid-auto-flow
grid-auto-rows
(en-US)grid-column
grid-column-end
(en-US)grid-column-start
(en-US)grid-row
(en-US)grid-row-end
(en-US)grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
H
frequency#Hz
(en-US)hanging-punctuation
:has
height
height (@viewport)
@historical-forms
:host()
:host-context()
:hover
hsl()
hsla()
hue-rotate()
(en-US)hwb()
hyphenate-character
(en-US)hyphenate-limit-chars
(en-US)hyphens
hypot()
(en-US)
I
<ident>
(en-US)<image>
(en-US)image()
(en-US)image-orientation
(en-US)image-rendering
(en-US)image-resolution
(en-US)image-set()
(en-US)@import
(en-US):in-range
:indeterminate
inherit
inherits (@property)
(en-US)initial
initial-letter
(en-US)initial-letter-align
(en-US)initial-value (@property)
(en-US)inline-size
input-security
inset
inset()
(en-US)inset-block
(en-US)inset-block-end
(en-US)inset-block-start
(en-US)inset-inline
(en-US)inset-inline-end
(en-US)inset-inline-start
(en-US)<integer>
:invalid
invert()
:is
isolation
length#ic
length#in
J
K
L
lab()
:lang
:last-child
:last-of-type
@layer
(en-US)layer()
layer() (@import)
lch()
leader()
:left
left
(en-US)@left-bottom
<length>
<length-percentage>
(en-US)letter-spacing
line-break
line-clamp
line-gap-override (@font-face)
(en-US)line-height
line-height-step
(en-US)<line-style>
(en-US)linear-gradient()
(en-US):link
list-style
(en-US)list-style-image
list-style-position
(en-US)list-style-type
(en-US)local()
(en-US):local-link
(en-US)log()
(en-US)
M
length#mm
margin
margin-block
(en-US)margin-block-end
(en-US)margin-block-start
(en-US)margin-bottom
margin-inline
(en-US)margin-inline-end
margin-inline-start
margin-left
margin-right
margin-top
margin-trim
(en-US)::marker
marks (@page)
mask
(en-US)mask-border
(en-US)mask-border-mode
(en-US)mask-border-outset
(en-US)mask-border-repeat
(en-US)mask-border-slice
(en-US)mask-border-source
(en-US)mask-border-width
(en-US)mask-clip
(en-US)mask-composite
(en-US)mask-image
(en-US)mask-mode
(en-US)mask-origin
(en-US)mask-position
(en-US)mask-repeat
(en-US)mask-size
(en-US)mask-type
(en-US)masonry-auto-flow
(en-US)math-depth
(en-US)math-shift
(en-US)math-style
(en-US)matrix()
(en-US)matrix3d()
(en-US)max()
(en-US)max-block-size
max-height
max-height (@viewport)
max-inline-size
(en-US)max-lines
max-width
max-width (@viewport)
max-zoom (@viewport)
@media
min()
(en-US)min-block-size
(en-US)min-height
min-height (@viewport)
min-inline-size
(en-US)min-width
min-width (@viewport)
min-zoom (@viewport)
minmax()
mix-blend-mode
mod()
(en-US)time#ms
N
@namespace
negative (@counter-style)
(en-US):not
:nth-child
:nth-col
(en-US):nth-last-child
:nth-last-col
(en-US):nth-last-of-type
:nth-of-type
<number>
O
object-fit
object-position
offset
(en-US)offset-anchor
(en-US)offset-distance
(en-US)offset-path
(en-US)offset-position
(en-US)offset-rotate
(en-US):only-child
:only-of-type
opacity
opacity()
(en-US):optional
order
orientation (@viewport)
@ornaments
ornaments()
(en-US)orphans
:out-of-range
outline
outline-color
outline-offset
outline-style
outline-width
<overflow>
overflow-anchor
(en-US)overflow-block
overflow-clip-margin
(en-US)overflow-inline
(en-US)overflow-wrap
overflow-x
(en-US)overflow-y
(en-US)overlay
(en-US)override-colors (@font-palette-values)
(en-US)overscroll-behavior
overscroll-behavior-block
(en-US)overscroll-behavior-inline
(en-US)overscroll-behavior-x
(en-US)overscroll-behavior-y
(en-US)
P
Pseudo-classes
Pseudo-elements
length#pc
length#pt
length#px
pad (@counter-style)
(en-US)padding
padding-block
(en-US)padding-block-end
(en-US)padding-block-start
(en-US)padding-bottom
(en-US)padding-inline
(en-US)padding-inline-end
(en-US)padding-inline-start
(en-US)padding-left
padding-right
padding-top
(en-US)@page
page
(en-US)page-break-after
(en-US)page-break-before
(en-US)page-break-inside
(en-US)page-orientation (@page)
(en-US)paint()
(en-US)paint-order
::part
(en-US):past
(en-US)path()
(en-US):paused
(en-US)<percentage>
perspective
perspective()
(en-US)perspective-origin
(en-US):picture-in-picture
(en-US)place-content
(en-US)place-items
place-self
(en-US)::placeholder
:placeholder-shown
:playing
(en-US)pointer-events
polygon()
(en-US)<position>
(en-US)position
pow()
(en-US)prefix (@counter-style)
(en-US)print-color-adjust
(en-US)@property
(en-US)
Q
R
angle#rad
length#rem
radial-gradient()
(en-US)range (@counter-style)
(en-US)<ratio>
ray()
(en-US):read-only
:read-write
rect()
(en-US)rem()
(en-US)repeat()
(en-US)repeating-conic-gradient()
(en-US)repeating-linear-gradient()
(en-US)repeating-radial-gradient()
(en-US):required
resize
(en-US)<resolution>
(en-US)reversed()
revert
rgb()
rgba()
:right
right
@right-bottom
:root
rotate
(en-US)rotate()
rotate3d()
rotateX()
(en-US)rotateY()
(en-US)rotateZ()
(en-US)round()
(en-US)row-gap
ruby-align
ruby-merge
ruby-position
(en-US)
S
saturate()
(en-US)scale
(en-US)scale()
(en-US)scale3d()
scaleX()
(en-US)scaleY()
(en-US)scaleZ()
(en-US):scope
(en-US)@scope
(en-US)scroll()
(en-US)scroll-behavior
scroll-margin
(en-US)scroll-margin-block
(en-US)scroll-margin-block-end
(en-US)scroll-margin-block-start
(en-US)scroll-margin-bottom
(en-US)scroll-margin-inline
(en-US)scroll-margin-inline-end
(en-US)scroll-margin-inline-start
(en-US)scroll-margin-left
(en-US)scroll-margin-right
(en-US)scroll-margin-top
(en-US)scroll-padding
(en-US)scroll-padding-block
(en-US)scroll-padding-block-end
(en-US)scroll-padding-block-start
(en-US)scroll-padding-bottom
(en-US)scroll-padding-inline
(en-US)scroll-padding-inline-end
(en-US)scroll-padding-inline-start
(en-US)scroll-padding-left
(en-US)scroll-padding-right
(en-US)scroll-padding-top
(en-US)scroll-snap-align
(en-US)scroll-snap-stop
(en-US)scroll-snap-type
@scroll-timeline
(en-US)scroll-timeline
(en-US)scroll-timeline-axis
(en-US)scroll-timeline-name
(en-US)scrollbar-color
(en-US)scrollbar-gutter
(en-US)scrollbar-width
(en-US)::selection
selector()
sepia()
(en-US)<shape>
(en-US)shape-image-threshold
(en-US)shape-margin
(en-US)shape-outside
(en-US)sign()
(en-US)sin()
(en-US)size (@page)
(en-US)size-adjust (@font-face)
(en-US)skew()
skewX()
(en-US)skewY()
(en-US)::slotted
speak-as (@counter-style)
(en-US)::spelling-error
(en-US)sqrt()
(en-US)src (@font-face)
(en-US)@starting-style
(en-US)steps()
(en-US)<string>
(en-US)@styleset
styleset()
(en-US)@stylistic
stylistic()
(en-US)suffix (@counter-style)
(en-US)@supports
supports() (@import)
@swash
swash()
(en-US)symbols (@counter-style)
(en-US)symbols()
(en-US)syntax (@property)
(en-US)system (@counter-style)
(en-US)time#s
T
angle#turn
tab-size
table-layout
(en-US)tan()
(en-US):target
target-counter()
target-counters()
::target-text
(en-US)target-text()
:target-within
(en-US)text-align
text-align-last
text-combine-upright
(en-US)text-decoration
(en-US)text-decoration-color
(en-US)text-decoration-line
(en-US)text-decoration-skip
text-decoration-skip-ink
(en-US)text-decoration-style
(en-US)text-decoration-thickness
(en-US)text-emphasis
(en-US)text-emphasis-color
(en-US)text-emphasis-position
(en-US)text-emphasis-style
(en-US)text-indent
text-justify
text-orientation
(en-US)text-overflow
(en-US)text-rendering
(en-US)text-shadow
text-size-adjust
text-transform
(en-US)text-underline-offset
(en-US)text-underline-position
(en-US)text-wrap
(en-US)<time>
<time-percentage>
(en-US)timeline-scope
(en-US)<timing-function>
(en-US)top
@top-center
touch-action
transform
transform-box
(en-US)<transform-function>
(en-US)transform-origin
(en-US)transform-style
transition
transition-behavior
(en-US)transition-delay
(en-US)transition-duration
transition-property
(en-US)transition-timing-function
(en-US)translate
(en-US)translate()
(en-US)translate3d()
(en-US)translateX()
(en-US)translateY()
(en-US)translateZ()
(en-US)type()
U
unicode-bidi
(en-US)unicode-range (@font-face)
(en-US)unset
(en-US)<url>
url()
:user-invalid
(en-US)user-select
:user-valid
(en-US)user-zoom (@viewport)
V
length#vh
length#vmax
length#vmin
length#vw
:valid
var()
vertical-align
view()
view-timeline
(en-US)view-timeline-axis
(en-US)view-timeline-inset
(en-US)view-timeline-name
(en-US)::view-transition
(en-US)::view-transition-group
(en-US)::view-transition-image-pair
(en-US)view-transition-name
(en-US)::view-transition-new
(en-US)::view-transition-old
(en-US)@viewport
viewport-fit (@viewport)
visibility
:visited
W
:where
white-space
white-space-collapse
(en-US)white-space-trim
widows
width
width (@viewport)
will-change
word-break
word-spacing
word-wrap
(en-US)writing-mode
X
Z
Others
Селекторы
- Базовые селекторы
- По тегу
elementname
- По классу
.classname
- По ID
#idname
- Универсальные
* ns|* *|*
- По атрибутам
[attr=value]
- По тегу
- Комбинационные
- смежный селектор
A + B
- следующего элемента
A ~ B
- дочерних элементов
A > B
- потомков
A B
- смежный селектор
- Псевдоэлементы (больше информации)
::after
::before
::first-letter
::first-line
::selection
::backdrop
::placeholder
Экспериментальная возможность::marker
Экспериментальная возможность::spelling-error
(en-US) Экспериментальная возможность::grammar-error
Экспериментальная возможность
- Псевдоклассы (больше информации)
:active
:any
(en-US):checked
:default
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
(en-US):target
:valid
:visited
Полный список селекторов в спецификации Selectors Level 3.
Обучение CSS3
Эти маленькие страницы описывают технологии, появившиеся в CSS3 или CSS2.1, но с плохой поддержкой браузерами до недавнего времени:
Концепции
- CSS синтаксис
- @-правила
- Комментарии
- Специфичность
- Начальное значение
- Наследование
- Указанное значение
- Высчитанное значение
- Используемое значение
- Актуальное значение
- Вычисленное значение (почти то же, что высчитанное)
- Box-модель
- Замещаемый элемент
- Синтаксис определения значений (en-US)
- Сокращённые свойства
- Объединение отступов
- Модель визуального форматирования
- Слои
DOM-CSS / CSSOM
Важнейшие типы объектов:
- document . styleSheets (en-US)
- styleSheets[x] . cssRules (en-US)
- cssRules[x] . cssText (en-US) (селекторы и стили)
- cssRules[x] . selectorText (en-US)
- elem . style (en-US)
- elem . style . cssText (en-US) (только стили)
- elem . className
- elem . classList
важные методы: