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.

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

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 (más información)
  • Selectores de hermanos adyacentes A + B
  • Selectores de hermanos generales A ~ B
  • Selectores de hijo A > B
  • Selectores de descendiente A B
• Pseudo-elementos (más información)
  • ::after
  • ::before
  • ::first-letter
  • ::first-line
  • ::selection
  • ::backdrop
  • ::placeholder
  • ::marker
  • ::spelling-error
  • ::grammar-error
• 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:

• CSSStyleSheet.insertRule
• CSSStyleSheet.deleteRule