Estamos trabajando sobre este documento. Si deseas ayudarnos a redactar o mejorar alguna de las páginas listadas a continuación, te animamos a que lo hagas.
Si vas a agregar o modificar una página, por favor, ajústate a la plantilla Referencia CSS:Plantilla de propiedades y modifica según sea necesario.
La plantilla básica para las páginas de ejemplo se puede encontrar aquí: samples/cssref/TEMPLATE.html.
Siéntete libre para discutir sobre cualquier pregunta o sugerencia en la página Talk:CSS Reference.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.
Regla Básica de Sintaxis
Se advierte que cualquier error de sintaxis en una definición de regla invalidará la regla por completo.
Reglas de Estilo
selectorlist { property: value; [more property:value; pairs] } ...where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists] See selector, pseudo-element, pseudo-class lists below.
Ejemplos
strong { color: red;}
div.menu-bar li:hover > ul { display: block; }
Más acerca de ejemplos: #1, #2
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 por palabra clave
:active { <var>style properties</var> }
additive-symbols (@counter-style)
::after (:after)
align-content
align-items
align-self
all
<angle>
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
@annotation (@font-feature-values)
annotation()
attr()
::backdrop
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
<basic-shape>
::before (:before)
<blend-mode>
block-size
blur()
border
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-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
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-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside
brightness()
calc()
caption-side
ch
@character-variant (@font-feature-values)
character-variant()
@charset
:checked { <var>style properties</var> }
circle()
clear
clip
clip-path
cm
<color>
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
contrast()
<counter>
counter-increment
counter-reset
@counter-style
cross-fade()
cubic-bezier()
cursor
<custom-ident>
:default { <var>style properties</var> }
deg
:dir( ltr | rtl ) { <var>style properties</var> }
direction
:disabled { <var>style properties</var> }
display
dpcm
dpi
dppx
drop-shadow()
element()
ellipse()
em
empty-cells
:empty { <var>style properties</var> }
:enabled { <var>style properties</var> }
ex
fallback (@counter-style)
filter
:first-child { <var>style properties</var> }
::first-letter (:first-letter)
::first-line (:first-line)
:first-of-type { <var>style properties</var> }
:first { <var>style properties</var> }
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
:focus { <var>style properties</var> }
font
@font-face
font-family
font-family (@font-face)
font-feature-settings
font-feature-settings (@font-face)
@font-feature-values
font-kerning
font-language-override
font-size
font-size-adjust
font-stretch
font-stretch (@font-face)
font-style
font-style (@font-face)
font-synthesis
font-variant
font-variant (@font-face)
font-variant-alternates
font-variant-caps
font-variant-east-asian
font-variant-ligatures
font-variant-numeric
font-variant-position
font-weight
font-weight (@font-face)
format()
format() (@font-face)
<frequency>
:fullscreen { <var>style properties</var> }
grad
<gradient>
grayscale()
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
height
height (@viewport)
:hover { <var>style properties</var> }
hsl()
hsla()
hue-rotate()
hyphens
hz
<image>
image()
image-orientation
image-rendering
image-resolution
image-set()
ime-mode
@import
in
:in-range { <var>style properties</var> }
:indeterminate { <var>style properties</var> }
inherit
initial
inline-size
inset()
<integer>
:invalid { <var>style properties</var> }
invert()
isolation
:lang( <language-code> ) { <var>style properties</var> }
:last-child { <var>style properties</var> }
:last-of-type { <var>style properties</var> }
left
:left { <var>style properties</var> }
<length>
letter-spacing
line-break
line-height
linear-gradient()
:link { <var>style properties</var> }
list-style
list-style-image
list-style-position
list-style-type
local()
margin
margin-block-end
margin-block-start
margin-bottom
margin-inline-end
margin-inline-start
margin-left
margin-right
margin-top
mask
mask-clip
mask-composite
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
mask-type
matrix()
matrix3d()
max-block-size
max-height
max-height (@viewport)
max-inline-size
max-width
max-width (@viewport)
max-zoom (@viewport)
@media
min-block-size
min-height
min-height (@viewport)
min-inline-size
min-width
min-width (@viewport)
min-zoom (@viewport)
minmax()
mix-blend-mode
mm
ms
@namespace
negative (@counter-style)
:not( <selector># ) { <var>style properties</var> }
:nth-child( <an-plus-b> [ of <selector># ]? ) { <var>style properties</var> }
:nth-last-child( <an-plus-b> [ of <selector># ]? ) { <var>style properties</var> }
:nth-last-of-type( <an-plus-b> ) { <var>style properties</var> }
:nth-of-type( <an-plus-b> ) { <var>style properties</var> }
<number>
object-fit
object-position
offset-block-end
offset-block-start
offset-inline-end
offset-inline-start
:only-child { <var>style properties</var> }
:only-of-type { <var>style properties</var> }
opacity
opacity()
:optional { <var>style properties</var> }
order
orientation (@viewport)
@ornaments (@font-feature-values)
ornaments()
orphans
:out-of-range { <var>style properties</var> }
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-wrap
overflow-x
overflow-y
pad (@counter-style)
padding
padding-block-end
padding-block-start
padding-bottom
padding-inline-end
padding-inline-start
padding-left
padding-right
padding-top
@page
page-break-after
page-break-before
page-break-inside
pc
<percentage>
perspective
perspective()
perspective-origin
pointer-events
polygon()
<position>
position
prefix (@counter-style)
pt
px
rad
radial-gradient()
range (@counter-style)
<ratio>
:read-only { <var>style properties</var> }
:read-write { <var>style properties</var> }
rect()
rem
repeating-linear-gradient()
repeating-radial-gradient()
:required { <var>style properties</var> }
resize
<resolution>
revert
rgb()
rgba()
right
:right { <var>style properties</var> }
:root { <var>style properties</var> }
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
ruby-align
ruby-merge
ruby-position
s
saturate()
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
:scope { <var>style properties</var> }
scroll-behavior
scroll-snap-coordinate
scroll-snap-destination
scroll-snap-type
::selection
sepia()
<shape>
shape-image-threshold
shape-margin
shape-outside
skew()
skewX()
skewY()
speak-as (@counter-style)
src (@font-face)
steps()
<string>
@styleset (@font-feature-values)
styleset()
@stylistic (@font-feature-values)
stylistic()
suffix (@counter-style)
@supports
@swash (@font-feature-values)
swash()
symbols (@counter-style)
symbols()
system (@counter-style)
tab-size
table-layout
:target { <var>style properties</var> }
text-align
text-align-last
text-combine-upright
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-emphasis
text-emphasis-color
text-emphasis-position
text-emphasis-style
text-indent
text-orientation
text-overflow
text-rendering
text-shadow
text-transform
text-underline-position
<time>
<timing-function>
top
touch-action
transform
transform-box
<transform-function>
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
translate()
translate3d()
translateX()
translateY()
translateZ()
turn
unicode-bidi
unicode-range (@font-face)
:unresolved { <var>style properties</var> }
unset
<url>
url()
<user-ident>
user-zoom (@viewport)
:valid { <var>style properties</var> }
var()
vertical-align
vh
@viewport
visibility
:visited { <var>style properties</var> }
vmax
vmin
vw
Selectors
- Selectores Básicos
- Selectores de tipo
elementname
- Selectores de clase
.classname
- Selectores de ID
#idname
- Selectores universales
* ns|* *|*
- Selectores de atributo
[attr=value]
- Selectores de tipo
- Combinadores (más información)
- Pseudo-elementos (más información)
- Pseudo-clases estándares (más información)
:active
:any
: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
:target
:valid
:visited
La lista de selectores completa está en la especificación de Selectores Nivel 3.
Tutoriales de CSS3
Estas páginas How-To describen las nuevas tecnologías que aparecieron en CSS3, o las de CSS2.1 que no tienen mucho soporte:
- Uso de media queries con CSS
- Uso de contadores con CSS
- Uso de gradientes con CSS
- Uso de transformaciones con CSS
- Uso de animaciones con CSS
- Uso de transiciones con CSS
- Uso de múltiples fondos con CSS
- Uso de las cajas flexibles con CSS
- Uso de columnas con CSS
Conceptos
- Sintáxis CSS
- Regla-At
- Comentarios
- Especificidad
- Valor inicial
- Herencia
- Valor especificado
- Valor calculado
- Valor usado
- Valor real
- Resolved value
- Modelo de caja
- Elemento de reemplazo
- Sintaxis de definición de valor
- Propiedades de abreviatura
- Entendiendo el colapso de margen
- Modelo de formato visual
- Modelo de presentación
DOM-CSS / CSSOM
Tipos de objetos principales:
- document . styleSheets
- styleSheets[x] . cssRules
- cssRules[x] . cssText (selector & style)
- cssRules[x] . selectorText
- elem . style
- elem . style . cssText (just style)
- elem . className
- elem . classList
Métodos importantes: