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 (en-US) 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 (en-US). 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
abs()
(en-US)accent-color
(en-US)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
: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
(en-US)background-position-y
(en-US)background-repeat
background-size
base-palette (@font-palette-values)
(en-US)<basic-shape>
::before (:before)
:blank
bleed (@page)
<blend-mode>
block-size
blur()
border
border-block
border-block-color
border-block-end
border-block-end-color
border-block-end-style
border-block-end-width
border-block-start
border-block-start-color
border-block-start-style
border-block-start-width
border-block-style
border-block-width
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-end-end-radius
border-end-start-radius
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
(en-US)border-image-width
(en-US)border-inline
border-inline-color
border-inline-end
border-inline-end-color
border-inline-end-style
border-inline-end-width
border-inline-start
border-inline-start-color
border-inline-start-style
border-inline-start-width
border-inline-style
border-inline-width
border-left
border-left-color
border-left-style
(en-US)border-left-width
(en-US)border-radius
(en-US)border-right
border-right-color
(en-US)border-right-style
(en-US)border-right-width
(en-US)border-spacing
border-start-end-radius
border-start-start-radius
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
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()
C
calc()
caption-side
(en-US)caret
caret-color
caret-shape
@character-variant
@charset
:checked
circle()
clamp()
(en-US)clear
clip
clip-path
(en-US)<color>
color
color-scheme
(en-US)column-count
column-fill
(en-US)column-gap
column-rule
(en-US)column-rule-color
(en-US)column-rule-style
(en-US)column-rule-width
(en-US)column-span
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>
(en-US)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>
(en-US)<display-outside>
(en-US)drop-shadow()
(en-US)resolution#dpcm
resolution#dpi
resolution#dppx
E
<easing-function>
(en-US)element()
(en-US)ellipse()
:empty
empty-cells
(en-US):enabled
env()
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()
<flex>
(en-US)flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
flex_value#fr
(en-US)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
font-optical-sizing
(en-US)font-palette
(en-US)@font-palette-values
(en-US)font-size
font-size-adjust
font-stretch
(en-US)font-stretch (@font-face)
(en-US)font-style
font-style (@font-face)
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
font-variant-alternates
font-variant-caps
(en-US)font-variant-east-asian
(en-US)font-variant-emoji
(en-US)font-variant-ligatures
(en-US)font-variant-numeric
(en-US)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()
<frequency>
<frequency-percentage>
(en-US):fullscreen
:future
(en-US)
G
angle#grad
gap
<gradient>
::grammar-error
(en-US)grayscale()
(en-US)grid
grid-area
(en-US)grid-auto-columns
grid-auto-flow
(en-US)grid-auto-rows
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-start
(en-US)grid-template
(en-US)grid-template-areas
grid-template-columns
grid-template-rows
H
frequency#Hz
hanging-punctuation
(en-US):has
height
@historical-forms
:host()
(en-US):host-context()
:hover
hsl()
(en-US)hue-rotate()
(en-US)hwb()
(en-US)hyphenate-character
(en-US)hyphenate-limit-chars
(en-US)hyphens
hypot()
(en-US)
I
<ident>
(en-US)<image>
image()
image-orientation
(en-US)image-rendering
image-resolution
(en-US)image-set()
(en-US)@import
: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()
inset-block
inset-block-end
inset-block-start
inset-inline
inset-inline-end
inset-inline-start
<integer>
:invalid
invert()
(en-US):is
isolation
length#ic
length#in
J
K
L
lab()
(en-US):lang
:last-child
:last-of-type
@layer
(en-US)layer()
layer() (@import)
lch()
(en-US)leader()
:left
left
@left-bottom
<length>
<length-percentage>
(en-US)letter-spacing
(en-US)light-dark()
(en-US)line-break
(en-US)line-clamp
(en-US)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
list-style-image
list-style-position
list-style-type
local()
:local-link
(en-US)log()
(en-US)
M
length#mm
margin
margin-block
margin-block-end
(en-US)margin-block-start
margin-bottom
margin-inline
margin-inline-end
margin-inline-start
margin-left
(en-US)margin-right
margin-top
(en-US)margin-trim
(en-US)::marker
marks (@page)
mask
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
mask-composite
(en-US)mask-image
mask-mode
(en-US)mask-origin
mask-position
mask-repeat
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-inline-size
max-lines
max-width
(en-US)@media
min()
min-block-size
min-height
min-inline-size
min-width
minmax()
mix-blend-mode
mod()
(en-US)time#ms
N
@namespace
negative (@counter-style)
(en-US):not
:nth-child
:nth-last-child
: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
@ornaments
orphans
(en-US):out-of-range
outline
outline-color
outline-offset
outline-style
outline-width
<overflow>
overflow-anchor
(en-US)overflow-block
(en-US)overflow-clip-margin
(en-US)overflow-inline
(en-US)overflow-wrap
(en-US)overflow-x
(en-US)overflow-y
overlay
(en-US)override-colors (@font-palette-values)
(en-US)overscroll-behavior
(en-US)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
padding-block-end
padding-block-start
padding-bottom
padding-inline
padding-inline-end
padding-inline-start
padding-left
(en-US)padding-right
(en-US)padding-top
@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
(en-US)::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
(en-US)place-self
(en-US)::placeholder
:placeholder-shown
:playing
(en-US)pointer-events
(en-US)polygon()
<position>
(en-US)position
pow()
(en-US)prefix (@counter-style)
(en-US)print-color-adjust
@property
(en-US)
Q
R
angle#rad
length#rem
radial-gradient()
(en-US)range (@counter-style)
(en-US)<ratio>
(en-US)ray()
(en-US):read-only
:read-write
rect()
(en-US)rem()
(en-US)repeat()
repeating-conic-gradient()
(en-US)repeating-linear-gradient()
(en-US)repeating-radial-gradient()
(en-US):required
resize
<resolution>
reversed()
revert
(en-US)rgb()
(en-US):right
right
@right-bottom
:root
rotate
(en-US)rotate()
rotate3d()
rotateX()
(en-US)rotateY()
(en-US)rotateZ()
(en-US)round()
(en-US)row-gap
(en-US)ruby-align
(en-US)ruby-merge
ruby-position
(en-US)
S
saturate()
(en-US)scale
(en-US)scale()
scale3d()
(en-US)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
(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()
(en-US)skewX()
(en-US)skewY()
(en-US)::slotted
(en-US)speak-as (@counter-style)
(en-US)::spelling-error
sqrt()
(en-US)src (@font-face)
@starting-style
(en-US)steps()
(en-US)<string>
(en-US)@styleset
@stylistic
suffix (@counter-style)
(en-US)@supports
supports() (@import)
@swash
symbols (@counter-style)
symbols()
(en-US)syntax (@property)
(en-US)system (@counter-style)
(en-US)time#s
T
angle#turn
tab-size
(en-US)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
(en-US)text-combine-upright
(en-US)text-decoration
text-decoration-color
text-decoration-line
text-decoration-skip
(en-US)text-decoration-skip-ink
(en-US)text-decoration-style
text-decoration-thickness
(en-US)text-emphasis
text-emphasis-color
text-emphasis-position
(en-US)text-emphasis-style
(en-US)text-indent
(en-US)text-justify
(en-US)text-orientation
text-overflow
text-rendering
(en-US)text-shadow
text-size-adjust
(en-US)text-transform
text-underline-offset
(en-US)text-underline-position
(en-US)text-wrap
(en-US)<time>
<time-percentage>
(en-US)timeline-scope
(en-US)top
@top-center
touch-action
(en-US)transform
transform-box
(en-US)<transform-function>
transform-origin
transform-style
transition
transition-behavior
(en-US)transition-delay
transition-duration
transition-property
transition-timing-function
(en-US)translate
(en-US)translate()
translate3d()
(en-US)translateX()
(en-US)translateY()
translateZ()
type()
U
unicode-bidi
(en-US)unicode-range (@font-face)
unset
(en-US)<url>
url()
:user-invalid
user-select
:user-valid
(en-US)
V
length#vh
length#vmax
length#vmin
length#vw
:valid
var()
vertical-align
view()
(en-US)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)visibility
:visited
W
:where
(en-US)white-space
white-space-collapse
(en-US)widows
width
will-change
(en-US)word-break
(en-US)word-spacing
(en-US)word-wrap
(en-US)writing-mode
X
Z
Others
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()
(en-US):host-context()
(en-US):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
Pseudo-elementos
::after
::backdrop
::before
::cue
::first-letter
::first-line
::grammar-error
(en-US) Experimental::marker
Experimental::placeholder
Experimental::selection
::spelling-error
Experimental
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 (en-US)
- cssRules[i].cssText (selector y estilo)
- cssRules[i].selectorText
- elem.style (en-US)
- elem.style.cssText (en-US) (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 (en-US) (principalmente con el prefijo
-webkit
) - Extensiones CSS de Microsoft (con el prefijo
-ms
)