Руководство по 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]
Смотрите списки селекторов, псевдоэлементов и псевдоклассов ниже.
Примеры
strong { color: red; }
div.menu-bar li:hover > ul { display: block; }
Больше о примерах: #1 (en-US), #2 (en-US)
@-правила
Так как у них есть много различных структурных форматов, смотрите нужный синтаксис @-правил.
Справочный указатель
-
A
abs()(en-US)accent-coloracos()(en-US):activeadditive-symbols (@counter-style)::after (:after)align-contentalign-itemsalign-selfalign-tracks(en-US)all<an-plus-b><angle><angle-percentage>(en-US)animationanimation-composition(en-US)animation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timeline(en-US)animation-timing-function@annotationannotation()(en-US):any-linkappearanceascent-override (@font-face)(en-US)asin()(en-US)aspect-ratio(en-US)atan()(en-US)atan2()(en-US)attr()
B
::backdropbackdrop-filterbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-position-xbackground-position-y(en-US)background-repeatbackground-size<basic-shape>(en-US)::before (:before):blankbleed (@page)<blend-mode>(en-US)block-overflowblock-sizeblur()borderborder-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-bottomborder-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-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-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-radiusborder-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-widthbottom@bottom-centerbox-decoration-break(en-US)box-shadowbox-sizingbreak-after(en-US)break-before(en-US)break-inside(en-US)brightness()(en-US)
C
calc()caption-side(en-US)caretcaret-color(en-US)caret-shape@character-variantcharacter-variant()(en-US)@charset(en-US):checkedcircle()(en-US)clamp()clearclip(en-US)clip-path<color>color(en-US)color-schemecolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-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)contentcontent-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-stylecounters()(en-US)cross-fade()(en-US)cubic-bezier()(en-US)::cue::cue-region(en-US):current(en-US)cursor<custom-ident>length#caplength#chlength#cm
D
angle#deg:default:defineddescent-override (@font-face)(en-US)<dimension>(en-US):dirdirection:disableddisplay<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):emptyempty-cells(en-US):enabledenv()(en-US)exp()(en-US)length#emlength#ex
F
fallback (@counter-style)(en-US)filter<filter-function>:first:first-child::first-letter (:first-letter)::first-line (:first-line):first-of-typefit-content()(en-US)<flex>flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapflex_value#frfloat:focus:focus-visible:focus-withinfontfont-display (@font-face)@font-facefont-familyfont-family (@font-face)font-feature-settings(en-US)font-feature-settings (@font-face)@font-feature-valuesfont-kerning(en-US)font-language-override(en-US)font-optical-sizing(en-US)font-sizefont-size-adjust(en-US)font-stretch(en-US)font-stretch (@font-face)(en-US)font-stylefont-style (@font-face)(en-US)font-synthesis(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-ligaturesfont-variant-numericfont-variant-position(en-US)font-variation-settings(en-US)font-variation-settings (@font-face)(en-US)font-weightfont-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#gradgap<gradient>(en-US)::grammar-errorgrayscale()(en-US)gridgrid-areagrid-auto-columns(en-US)grid-auto-flowgrid-auto-rows(en-US)grid-column(en-US)grid-column-end(en-US)grid-column-start(en-US)grid-row(en-US)grid-row-end(en-US)grid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rows
H
frequency#Hz(en-US)hanging-punctuation:hasheightheight (@viewport)(en-US)@historical-forms:host():host-context():hoverhsl()hsla()hue-rotate()(en-US)hwb()hyphenate-character(en-US)hyphenate-limit-chars(en-US)hyphenshypot()(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:indeterminateinheritinherits (@property)(en-US)initialinitial-letter(en-US)initial-letter-align(en-US)initial-value (@property)(en-US)inline-sizeinput-securityinsetinset()(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>:invalidinvert():isisolationlength#iclength#in
J
K
L
lab():lang:last-child:last-of-type@layer(en-US)layer()layer() (@import)lch()leader():leftleft(en-US)@left-bottom<length><length-percentage>(en-US)letter-spacingline-breakline-clampline-gap-override (@font-face)(en-US)line-heightline-height-step(en-US)linear-gradient()(en-US):linklist-style(en-US)list-style-imagelist-style-position(en-US)list-style-type(en-US)local()(en-US):local-link(en-US)log()(en-US)
M
length#mmmarginmargin-block(en-US)margin-block-end(en-US)margin-block-start(en-US)margin-bottommargin-inline(en-US)margin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-topmargin-trim(en-US)::markermarks (@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-sizemax-heightmax-height (@viewport)(en-US)max-inline-size(en-US)max-linesmax-widthmax-width (@viewport)(en-US)max-zoom (@viewport)(en-US)@mediamin()(en-US)min-block-size(en-US)min-heightmin-height (@viewport)(en-US)min-inline-size(en-US)min-widthmin-width (@viewport)(en-US)min-zoom (@viewport)(en-US)minmax()mix-blend-modemod()(en-US)time#ms
N
@namespacenegative (@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-fitobject-positionoffset(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-typeopacityopacity()(en-US):optionalorderorientation (@viewport)(en-US)@ornamentsornaments()(en-US)orphans:out-of-rangeoutline(en-US)outline-color(en-US)outline-offset(en-US)outline-style(en-US)outline-width(en-US)overflowoverflow-anchor(en-US)overflow-blockoverflow-clip-margin(en-US)overflow-inline(en-US)overflow-wrapoverflow-x(en-US)overflow-y(en-US)overscroll-behavioroverscroll-behavior-block(en-US)overscroll-behavior-inline(en-US)overscroll-behavior-x(en-US)overscroll-behavior-y(en-US)
P
Pseudo-classesPseudo-elementslength#pclength#ptlength#pxpad (@counter-style)(en-US)paddingpadding-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-leftpadding-rightpadding-top(en-US)@pagepage-break-after(en-US)page-break-before(en-US)page-break-inside(en-US)paint()(en-US)paint-order::part(en-US):past(en-US)path()(en-US):paused(en-US)<percentage>perspectiveperspective()(en-US)perspective-origin(en-US):picture-in-picture(en-US)place-content(en-US)place-itemsplace-self(en-US)::placeholder:placeholder-shown:playing(en-US)pointer-eventspolygon()(en-US)<position>(en-US)positionpow()(en-US)prefix (@counter-style)(en-US)print-color-adjust(en-US)@property(en-US)
Q
R
angle#radlength#remradial-gradient()(en-US)range (@counter-style)(en-US)<ratio>:read-only:read-writerect()(en-US)rem()(en-US)repeat()(en-US)repeating-conic-gradient()(en-US)repeating-linear-gradient()(en-US)repeating-radial-gradient()(en-US):requiredresize(en-US)<resolution>(en-US)reversed()revertrgb()rgba():rightright@right-bottom:rootrotate(en-US)rotate()rotate3d()rotateX()(en-US)rotateY()(en-US)rotateZ()(en-US)round()(en-US)row-gapruby-alignruby-mergeruby-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)scroll()(en-US)scroll-behaviorscroll-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)::selectionselector()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)::slottedspeak-as (@counter-style)(en-US)::spelling-error(en-US)sqrt()(en-US)src (@font-face)(en-US)steps()(en-US)<string>(en-US)@stylesetstyleset()(en-US)@stylisticstylistic()(en-US)suffix (@counter-style)(en-US)@supportssupports() (@import)@swashswash()(en-US)symbols (@counter-style)(en-US)symbols()(en-US)syntax (@property)(en-US)system (@counter-style)(en-US)time#s
T
angle#turntab-sizetable-layout(en-US)tan()(en-US):targettarget-counter()target-counters()::target-text(en-US)target-text():target-within(en-US)text-aligntext-align-lasttext-combine-upright(en-US)text-decoration(en-US)text-decoration-color(en-US)text-decoration-line(en-US)text-decoration-skiptext-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-indenttext-justifytext-orientation(en-US)text-overflow(en-US)text-rendering(en-US)text-shadowtext-size-adjusttext-transform(en-US)text-underline-offset(en-US)text-underline-position(en-US)<time><time-percentage>(en-US)<timing-function>(en-US)top@top-centertouch-actiontransformtransform-box(en-US)<transform-function>transform-origin(en-US)transform-styletransitiontransition-delay(en-US)transition-durationtransition-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)(en-US)
V
length#vhlength#vmaxlength#vminlength#vw:validvar()vertical-align@viewportviewport-fit (@viewport)(en-US)visibility:visited
W
:wherewhite-spacewidowswidthwidth (@viewport)(en-US)will-changeword-breakword-spacingword-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
важные методы: