Referencia CSS
Esta Referencia CSS muestra la sintáxis básica de una regla CSS; lista todas las propiedades estándares CSS, pseudo-classes y pseudo-elementos, reglas-at, unidades, y selectores, todos juntos en orden alfabético, así como los selectores por tipo; y le permitirá acceso rápido a la información detallada de cada uno de ellos. No solo lista las propiedades de CSS 1 y CSS 2.1, sino que también es una referencia de CSS3 que enlaza cualquier propiedad y concepto de CSS3 estandarizado, o ya establecido. También incluye una breve referencia DOM-CSS / CSSOM.
Tenga en cuenta que las definiciones de reglas CSS son completamente basadas en texto (ASCII), mientras que DOM-CSS / CSSOM, el sistema de gestión de reglas, está basado en objetos.
Vea también las Extensiones CSS de Mozilla para propiedades específicas de Gecko, que usan el prefijo -moz; y las Extensiones CSS de WebKit para propiedades específicas de WebKit. Vea Vendor-prefixed CSS Property Overview de Peter Beverloo como referencia a todas las propiedades con prefijo.
Sintaxis de regla básica
Se advierte que cualquier error de sintaxis en una definición de regla invalidará la regla por completo.
Sintaxis de regla de estilo
selectorlist {
property: value;
[more property:value; pairs]
}
...where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
Ver selector, pseudo-elemento, pseudo-clase más abajo.
Ejemplos de reglas de estilo
strong {
color: red;
}
div.menu-bar li:hover > ul {
display: block;
}
Para una introducción de nivel principiante a la sintaxis de los selectores de CSS, consulte este tutorial. Tenga en cuenta que cualquier error de sintaxis CSS en una definición de regla hace que la regla completa se invalide. El navegador ignora las reglas no válidas. Tenga en cuenta que las definiciones de reglas CSS son totalmente (ASCII) basadas en texto, mientras que DOM-CSS / CSSOM (el sistema de gestión de reglas) está basado en objetos.
Sintaxis de las reglas-at (@rules)
Debido a que éstas tienen formatos de estructura variados, revise la sección reglas-At para ver la sintaxis de la regla deseada.
Índice de palabras clave
Nota: Los nombres de propiedad en este índice no incluyen los nombres de JavaScript donde difieren de los nombres estándar de CSS.
-
A
Attribute selectorsabs() CSS function<absolute-size>accent-coloracos() CSS function:active CSS pseudo-class:active-view-transition CSS pseudo-class:active-view-transition-type() CSS pseudo-classadditive-symbols (@counter-style)::after CSS pseudo-elementalign-contentalign-itemsalign-selfalignment-baselineall<alpha-value>anchor() CSS functionanchor-nameanchor-scopeanchor-size() CSS function<angle><angle-percentage>animationanimation-compositionanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-rangeanimation-range-endanimation-range-startanimation-timelineanimation-timing-function:any-link CSS pseudo-classappearanceascent-override (@font-face)asin() CSS functionaspect-ratioatan() CSS functionatan2() CSS functionattr() CSS function:autofill CSS pseudo-class<axis>
B
::backdrop CSS pseudo-elementbackdrop-filterbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-position-xbackground-position-ybackground-repeatbackground-repeat-xbackground-repeat-ybackground-sizebase-palette (@font-palette-values)<baseline-position>baseline-shiftbaseline-source<basic-shape>::before CSS pseudo-element:blank CSS pseudo-class<blend-mode>block-sizeblur() CSS functionborderborder-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-end-end-radiusborder-end-start-radiusborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-start-end-radiusborder-start-start-radiusborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-break<box-edge>box-shadowbox-sizingbreak-afterbreak-beforebreak-insidebrightness() CSS function:buffering CSS pseudo-class
C
Class selectorsCustom properties (--*): CSS variablescalc() CSS function<calc-keyword>calc-size() CSS function<calc-sum>caption-sidecaretcaret-animationcaret-colorcaret-shape@charset:checked CSS pseudo-class::checkmark CSS pseudo-elementcircle() CSS functionclamp() CSS functionclearclip-pathclip-rule<color>colorcolor() CSS functioncolor-interpolationcolor-interpolation-filters<color-interpolation-method>color-mix() CSS function@color-profilecolor-scheme::column CSS pseudo-elementcolumn-countcolumn-fillcolumn-gapcolumn-heightcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumn-wrapcolumnsconic-gradient() CSS functioncontaincontain-intrinsic-block-sizecontain-intrinsic-heightcontain-intrinsic-inline-sizecontain-intrinsic-sizecontain-intrinsic-width@containercontainercontainer-namecontainer-typecontent<content-distribution><content-position>content-visibilitycontrast() CSS functioncontrast-color() CSS functioncorner-block-end-shapecorner-block-start-shapecorner-bottom-left-shapecorner-bottom-right-shapecorner-bottom-shapecorner-end-end-shapecorner-end-start-shapecorner-inline-end-shapecorner-inline-start-shapecorner-left-shapecorner-right-shapecorner-shape<corner-shape-value>corner-start-end-shapecorner-start-start-shapecorner-top-left-shapecorner-top-right-shapecorner-top-shapecos() CSS functioncounter() CSS functioncounter-incrementcounter-resetcounter-set@counter-stylecounters() CSS functioncross-fade() CSS functioncubic-bezier() CSS function::cue CSS pseudo-element:current CSS pseudo-classcursor<custom-ident>@custom-mediacxcy
D
d<dashed-function>: CSS custom functions<dashed-ident>:default CSS pseudo-class:defined CSS pseudo-classdescent-override (@font-face)::details-content CSS pseudo-elementdevice-cmyk() CSS function<dimension>:dir() CSS pseudo-classdirection:disabled CSS pseudo-classdisplay<display-box><display-inside><display-internal><display-legacy><display-listitem><display-outside>dominant-baselinedrop-shadow() CSS functiondynamic-range-limitdynamic-range-limit-mix() CSS function
E
<easing-function>element() CSS functionellipse() CSS function:empty CSS pseudo-classempty-cells:enabled CSS pseudo-classenv() CSS functionexp() CSS function
F
fallback (@counter-style)field-sizing::file-selector-button CSS pseudo-elementfillfill-opacityfill-rulefilter<filter-function>:first CSS pseudo-class:first-child CSS pseudo-class::first-letter CSS pseudo-element::first-line CSS pseudo-element:first-of-type CSS pseudo-classfit-contentfit-content() CSS function<flex>flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatflood-colorflood-opacity:focus CSS pseudo-class:focus-visible CSS pseudo-class:focus-within CSS pseudo-classfontfont-display (@font-face)font-display (@font-feature-values)@font-facefont-familyfont-family (@font-face)font-family (@font-palette-values)font-feature-settingsfont-feature-settings (@font-face)@font-feature-valuesfont-kerningfont-language-overridefont-optical-sizingfont-palette@font-palette-valuesfont-sizefont-size-adjustfont-stretchfont-stretch (@font-face)font-stylefont-style (@font-face)font-synthesisfont-synthesis-positionfont-synthesis-small-capsfont-synthesis-stylefont-synthesis-weightfont-variantfont-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-emojifont-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settingsfont-variation-settings (@font-face)font-weightfont-weight (@font-face)font-widthfont-width (@font-face)forced-color-adjust<frequency><frequency-percentage>:fullscreen CSS pseudo-class@function:future CSS pseudo-class
G
gap<generic-family><gradient>::grammar-error CSS pseudo-elementgrayscale() CSS functiongridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rows
H
hanging-punctuation:has() CSS pseudo-class:has-slotted CSS pseudo-class:heading CSS pseudo-class:heading() CSS pseudo-classheight<hex-color>::highlight() CSS pseudo-element:host CSS pseudo-class:host() CSS pseudo-class:hover CSS pseudo-classhsl() CSS function<hue><hue-interpolation-method>hue-rotate() CSS functionhwb() CSS functionhyphenate-characterhyphenate-limit-charshyphenshypot() CSS function
I
ID selectors<ident>if() CSS function<image>image() CSS functionimage-orientationimage-renderingimage-resolutionimage-set() CSS function@import!important:in-range CSS pseudo-class:indeterminate CSS pseudo-classinheritinherits (@property)initialinitial-letterinitial-value (@property)inline-sizeinsetinset() CSS functioninset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-start<integer>interactivityinterest-delayinterest-delay-endinterest-delay-start:interest-source CSS pseudo-class:interest-target CSS pseudo-classinterpolate-size:invalid CSS pseudo-classinvert() CSS function:is() CSS pseudo-classisolation
J
K
L
lab() CSS function:lang() CSS pseudo-class:last-child CSS pseudo-class:last-of-type CSS pseudo-class@layerlayer() CSS functionlch() CSS functionleft:left CSS pseudo-class<length><length-percentage>letter-spacinglight-dark() CSS functionlighting-colorline-breakline-clampline-gap-override (@font-face)line-heightline-height-step<line-style>linear() CSS functionlinear-gradient() CSS function:link CSS pseudo-classlist-stylelist-style-imagelist-style-positionlist-style-type:local-link CSS pseudo-classlog() CSS function
M
marginmargin-blockmargin-block-endmargin-block-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-topmargin-trimmarker::marker CSS pseudo-elementmarker-endmarker-midmarker-startmaskmask-bordermask-border-modemask-border-outsetmask-border-repeatmask-border-slicemask-border-sourcemask-border-widthmask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask-typemath-depthmath-shiftmath-stylematrix() CSS functionmatrix3d() CSS functionmax() CSS functionmax-block-sizemax-contentmax-heightmax-inline-sizemax-width@mediamin() CSS functionmin-block-sizemin-contentmin-heightmin-inline-sizemin-widthminmax() CSS functionmix-blend-modemod() CSS function:modal CSS pseudo-class:muted CSS pseudo-class
N
Namespace separator<named-color>@namespacenegative (@counter-style)& nesting selector:not() CSS pseudo-class:nth-child() CSS pseudo-class:nth-last-child() CSS pseudo-class:nth-last-of-type() CSS pseudo-class:nth-of-type() CSS pseudo-class<number>
O
object-fitobject-positionobject-view-boxoffsetoffset-anchoroffset-distanceoffset-pathoffset-positionoffset-rotateoklab() CSS functionoklch() CSS function:only-child CSS pseudo-class:only-of-type CSS pseudo-classopacityopacity() CSS function:open CSS pseudo-class:optional CSS pseudo-classorderorphans:out-of-range CSS pseudo-classoutlineoutline-coloroutline-offsetoutline-styleoutline-width<overflow>overflowoverflow-anchoroverflow-blockoverflow-clip-marginoverflow-inline<overflow-position>overflow-wrapoverflow-xoverflow-yoverlayoverride-colors (@font-palette-values)overscroll-behavioroverscroll-behavior-blockoverscroll-behavior-inlineoverscroll-behavior-xoverscroll-behavior-y
P
pad (@counter-style)paddingpadding-blockpadding-block-endpadding-block-startpadding-bottompadding-inlinepadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-top@pagepagepage-orientation (@page)paint() CSS functionpaint-orderpalette-mix() CSS function::part() CSS pseudo-element:past CSS pseudo-classpath() CSS function:paused CSS pseudo-class<percentage>perspectiveperspective() CSS functionperspective-origin::picker() CSS pseudo-element::picker-icon CSS pseudo-element:picture-in-picture CSS pseudo-classplace-contentplace-itemsplace-self::placeholder CSS pseudo-element:placeholder-shown CSS pseudo-class:playing CSS pseudo-classpointer-eventspolygon() CSS function:popover-open CSS pseudo-class<position>positionposition-anchor<position-area>position-area@position-tryposition-tryposition-try-fallbacksposition-try-orderposition-visibilitypow() CSS functionprefix (@counter-style)print-color-adjustprogress() CSS function@property
Q
R
rradial-gradient() CSS functionrandom() CSS functionrange (@counter-style)<ratio>ray() CSS function:read-only CSS pseudo-class:read-write CSS pseudo-classreading-flowreading-orderrect() CSS function<relative-size>rem() CSS functionrepeat() CSS functionrepeating-conic-gradient() CSS functionrepeating-linear-gradient() CSS functionrepeating-radial-gradient() CSS function:required CSS pseudo-classresize<resolution>revertrevert-layerrgb() CSS functionright:right CSS pseudo-class:root CSS pseudo-classrotaterotate() CSS functionrotate3d() CSS functionrotateX() CSS functionrotateY() CSS functionrotateZ() CSS functionround() CSS functionrow-gapruby-alignruby-overhangruby-positionrule-listrxry
S
Selector listsaturate() CSS functionscalescale() CSS functionscale3d() CSS functionscaleX() CSS functionscaleY() CSS functionscaleZ() CSS function@scope:scope CSS pseudo-classscroll() CSS functionscroll-behavior::scroll-button() CSS pseudo-elementscroll-initial-targetscroll-marginscroll-margin-blockscroll-margin-block-endscroll-margin-block-startscroll-margin-bottomscroll-margin-inlinescroll-margin-inline-endscroll-margin-inline-startscroll-margin-leftscroll-margin-rightscroll-margin-top::scroll-marker CSS pseudo-elementscroll-marker-group::scroll-marker-group CSS pseudo-elementscroll-paddingscroll-padding-blockscroll-padding-block-endscroll-padding-block-startscroll-padding-bottomscroll-padding-inlinescroll-padding-inline-endscroll-padding-inline-startscroll-padding-leftscroll-padding-rightscroll-padding-topscroll-snap-alignscroll-snap-stopscroll-snap-typescroll-target-groupscroll-timelinescroll-timeline-axisscroll-timeline-namescrollbar-colorscrollbar-gutterscrollbar-width::search-text CSS pseudo-element:seeking CSS pseudo-class::selection CSS pseudo-element<self-position>sepia() CSS functionshape() CSS functionshape-image-thresholdshape-marginshape-outsideshape-renderingsibling-count() CSS functionsibling-index() CSS functionsign() CSS functionsin() CSS functionsize (@page)size-adjust (@font-face)skew() CSS functionskewX() CSS functionskewY() CSS function::slotted() CSS pseudo-elementspeak-asspeak-as (@counter-style)::spelling-error CSS pseudo-elementsqrt() CSS functionsrc (@font-face):stalled CSS pseudo-class@starting-style:state() CSS pseudo-classsteps() CSS functionstop-colorstop-opacity<string>strokestroke-dasharraystroke-dashoffsetstroke-linecapstroke-linejoinstroke-miterlimitstroke-opacitystroke-widthsuffix (@counter-style)superellipse() CSS function@supportssymbols (@counter-style)symbols() CSS functionsyntax (@property)system (@counter-style)<system-color>
T
Type selectorstab-sizetable-layouttan() CSS function:target CSS pseudo-class:target-after CSS pseudo-class:target-before CSS pseudo-class:target-current CSS pseudo-class::target-text CSS pseudo-elementtext-aligntext-align-lasttext-anchortext-autospacetext-boxtext-box-edgetext-box-trimtext-combine-uprighttext-decorationtext-decoration-colortext-decoration-insettext-decoration-linetext-decoration-skip-inktext-decoration-styletext-decoration-thickness<text-edge>text-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-size-adjusttext-spacing-trimtext-transformtext-underline-offsettext-underline-positiontext-wraptext-wrap-modetext-wrap-style<time><time-percentage><timeline-range-name>timeline-scopetoptouch-actiontransformtransform-box<transform-function>transform-origintransform-styletransitiontransition-behaviortransition-delaytransition-durationtransition-propertytransition-timing-functiontranslatetranslate() CSS functiontranslate3d() CSS functiontranslateX() CSS functiontranslateY() CSS functiontranslateZ() CSS functiontype() CSS function
U
Universal selectorsunicode-bidiunicode-range (@font-face)unset<url>url() CSS function:user-invalid CSS pseudo-classuser-select:user-valid CSS pseudo-class
V
:valid CSS pseudo-classvar() CSS functionvector-effectvertical-alignview() CSS functionview-timelineview-timeline-axisview-timeline-insetview-timeline-name@view-transition::view-transition CSS pseudo-elementview-transition-class::view-transition-group() CSS pseudo-element::view-transition-image-pair() CSS pseudo-elementview-transition-name::view-transition-new() CSS pseudo-element::view-transition-old() CSS pseudo-elementvisibility:visited CSS pseudo-class:volume-locked CSS pseudo-class
W
:where() CSS pseudo-classwhite-spacewhite-space-collapsewidowswidthwill-changeword-breakword-spacingwriting-mode
X
Y
Z
Selectores
>Selectores básicos
- Selectores de tipo
elementname - Selectores de clase
.classname - Selectores de ID
#idname - Selectores universales
*,ns|*,*|*,|* - Selectores de atributo
[attr=value]
Combinadores
Pseudo-clases
:active:any:any-link:checked:default:defined:dir():disabled:empty:enabled:first:first-child:first-of-type:fullscreen:focus:focus-visible:host:host():host-context():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:target:valid:visited
Pseudo-elementos
::after::backdrop::before::cue::first-letter::first-line::grammar-errorExperimental::markerExperimental::placeholderExperimental::selection::spelling-errorExperimental
Nota: Ver también: Una lista completa de selectores en la especificación de Nivel 3 de Selectores.
Conceptos
>Sintaxis y semántica
Valores
Diseño
DOM-CSS / CSSOM
>Tipos de objetos principales
- document.styleSheets
- styleSheets[i].cssRules
- cssRules[i].cssText (selector y estilo)
- cssRules[i].selectorText
- elem.style
- elem.style.cssText (solo estilo)
- elem.className
- elem.classList
Métodos importantes
Tutoriales CSS3
Estas páginas describen las nuevas tecnologías que aparecieron en CSS3, o las de CSS2.1 que no tienen mucho soporte:
Ver también
- Extensiones CSS de Mozilla (con el prefijo
-moz) - Extensiones CSS de WebKit (principalmente con el prefijo
-webkit) - Extensiones CSS de Microsoft (con el prefijo
-ms)