CSS Manual de referencia

NoteEl manual de referencia CSS de Tutorial para novatos ha sido probado en todos los navegadores principales.

Propiedades CSS

Grupos de propiedades CSS:

La columna "CSS" indica en qué versión de CSS se definió la propiedad (CSS1, CSS2 o CSS3).

Propiedades de animación

Propiedad Descripción CSS
@keyframes Define una animación; el nombre de la animación definido por @keyframes es utilizado por animation-name. 3
animation Propiedad compuesta. Recupera o establece los efectos de animación aplicados al objeto. 3
animation-name Recupera o establece el nombre de la animación aplicada al objeto; debe usarse junto con la regla @keyframes, porque el nombre de la animación lo define @keyframes. 3
animation-duration Recupera o establece la duración de la animación del objeto. 3
animation-timing-function Recupera o establece la función de temporización de la animación del objeto. 3
animation-delay Recupera o establece el tiempo de retardo de la animación del objeto. 3
animation-iteration-count Recupera o establece el número de veces que se repite la animación del objeto. 3
animation-direction Recupera o establece si la animación del objeto se invierte en el ciclo. 3
animation-play-state Recupera o establece el estado de la animación del objeto. 3

Propiedades de fondo

Propiedad Descripción CSS
background Propiedad compuesta. Establece las características de fondo del objeto. 1
background-attachment Establece o recupera si la imagen de fondo se desplaza con el contenido del objeto o si es fija. Primero debe especificarse la propiedad background-image. 1
background-color Establece o recupera el color de fondo del objeto. 1
background-image Establece o recupera la imagen de fondo del objeto. 1
background-position Establece o recupera la posición de la imagen de fondo del objeto. Primero debe especificarse la propiedad background-image. 1
background-repeat Establece o recupera cómo se repite o rellena la imagen de fondo del objeto. Primero debe especificarse la propiedad background-image. 1
background-clip Especifica el área de recorte exterior de la imagen de fondo del objeto. 3
background-origin Establece o recupera el origen de referencia (posición) de la imagen de fondo del objeto al calcular background-position. 3
background-size Recupera o establece el tamaño de la imagen de fondo del objeto. 3

Propiedades de borde (Border) y contorno (Outline)

Propiedad Descripción CSS
border Propiedad compuesta. Establece las características del borde del objeto. 1
border-bottom Propiedad compuesta. Establece las características del borde inferior del objeto. 1
border-bottom-color Establece o recupera el color del borde inferior del objeto. 1 
border-bottom-style Establece o recupera el estilo del borde inferior del objeto. 1
border-bottom-width Establece o recupera el ancho del borde inferior del objeto. 1
border-color Establece o recupera el color del borde del objeto. 1
border-left Propiedad compuesta. Establece las características del borde izquierdo del objeto. 1
border-left-color Establece o recupera el color del borde izquierdo del objeto. 1
border-left-style Establece o recupera el estilo del borde izquierdo del objeto. 1
border-left-width Establece o recupera el ancho del borde izquierdo del objeto. 1
border-right Propiedad compuesta. Establece las características del borde derecho del objeto. 1
border-right-color Establece o recupera el color del borde derecho del objeto. 1
border-right-style Establece o recupera el estilo del borde derecho del objeto. 1
border-right-width Establece o recupera el ancho del borde derecho del objeto. 1
border-style Establece o recupera el estilo del borde del objeto. 1
border-top Propiedad compuesta. Establece las características del borde superior del objeto. 1
border-top-color Establece o recupera el color del borde superior del objeto. 1
border-top-style Establece o recupera el estilo del borde superior del objeto. 1
border-top-width Establece o recupera el ancho del borde superior del objeto. 1
border-width Establece o recupera el ancho del borde del objeto. 1
outline Propiedad compuesta. Establece o recupera el contorno exterior del objeto. 2
outline-color Establece o recupera el color del contorno exterior del objeto. 2
outline-style Establece o recupera el estilo del contorno exterior del objeto. 2
outline-width Establece o recupera el ancho del contorno exterior del objeto. 2
border-bottom-left-radius Establece o recupera el borde redondeado de la esquina inferior izquierda del objeto. Acepta 2 parámetros separados por un espacio; cada parámetro permite un valor. El primer parámetro representa el radio horizontal y el segundo el radio vertical. Si se omite el segundo parámetro, es igual al primero por defecto. 3
border-bottom-right-radius Establece o recupera el borde redondeado de la esquina inferior derecha del objeto. 3
border-image Establece o recupera el estilo del borde del objeto usando una imagen para rellenarlo. 3
border-image-outset Especifica la cantidad en que la imagen del borde se extiende más allá del borde. 3
border-image-repeat Especifica si la imagen del borde debe repetirse (repeated), estirarse (stretched) o completarse (rounded). 3
border-image-slice Especifica el desplazamiento hacia adentro de la imagen del borde. 3
border-image-source Especifica la imagen que se usará en lugar del estilo de borde establecido por la propiedad border-style. 3
border-image-width Especifica el ancho de la imagen del borde. 3
border-radius Establece o recupera el borde redondeado del objeto. 3
border-top-left-radius Define la forma del borde de la esquina superior izquierda. 3
border-top-right-radius Define la forma del borde de la esquina superior derecha. 3
box-decoration-break Especifica el ajuste de línea de los elementos en línea. 3
box-shadow Agrega una o más sombras a la caja. 3

Propiedades de caja (Box)

Propiedad Descripción CSS
overflow-x Si el contenido desborda el área de contenido del elemento, especifica si los bordes izquierdo/derecho del contenido deben recortarse. 3
overflow-y Si el contenido desborda el área de contenido del elemento, especifica si los bordes superior/inferior del contenido deben recortarse. 3
overflow-style Especifica el método de desplazamiento preferido para el desbordamiento del elemento. 3
rotation Rota el elemento alrededor del punto definido por la propiedad rotation-point. 3
rotation-point Define el punto de desplazamiento desde el borde superior-izquierdo. 3

Propiedades de color (Color)

Propiedad Descripción CSS
color-profile Permite usar especificaciones distintas de las predeterminadas del perfil de color de la fuente. 3
opacity Establece el nivel de transparencia de un elemento. 3
rendering-intent Permite otras especificaciones de intención de renderizado además del perfil de color predeterminado. 3

Propiedades de relleno (Padding)

Propiedad Descripción CSS
padding Establece todas las propiedades de relleno en una sola declaración. 1
padding-bottom Establece el relleno inferior del elemento. 1
padding-left Establece el relleno izquierdo del elemento. 1
padding-right Establece el relleno derecho del elemento. 1
padding-top Establece el relleno superior del elemento. 1

Propiedades de contenido de medios de página

Propiedad Descripción CSS
bookmark-label Especifica la etiqueta del marcador. 3
bookmark-level Especifica el nivel del marcador. 3
bookmark-target Especifica el destino del enlace del marcador. 3
float-offset Empuja los elementos flotantes en dirección opuesta; siempre tienen flotación. 3
hyphenate-after Especifica el número mínimo de caracteres después del guion en una palabra dividida. 3
hyphenate-before Especifica el número mínimo de caracteres antes del guion en una palabra dividida. 3
hyphenate-character Especifica la cadena que se muestra cuando ocurre una división de palabra. 3
hyphenate-lines Indica el número máximo de líneas consecutivas con división de palabras en un elemento. 3
hyphenate-resource Los recursos externos especifican una lista separada por comas que puede ayudar a determinar los puntos de división de palabras del navegador. 3
hyphens Establece cómo dividir las palabras para mejorar el diseño del párrafo. 3
image-resolution Especifica la resolución correcta de la imagen. 3
marks Agrega marcas de corte y/o cruce al documento. 3
string-set   3

Propiedades de dimensiones (Dimension)

Propiedad Descripción CSS
height Establece la altura del elemento. 1
max-height Establece la altura máxima del elemento. 2
max-width Establece el ancho máximo del elemento. 2
min-height Establece la altura mínima del elemento. 2
min-width Establece el ancho mínimo del elemento. 2
width Establece el ancho del elemento. 1

Propiedades del modelo de caja flexible (Flexible Box) (nuevo)

Propiedad Descripción CSS
flex Propiedad compuesta. Establece o recupera cómo los elementos secundarios del objeto de caja flexible asignan el espacio. 3
flex-grow Establece o recupera la tasa de expansión de la caja flexible. 3
flex-shrink Establece o recupera la tasa de contracción de la caja flexible. 3
flex-basis Establece o recupera el valor base de la contracción/expansión de la caja flexible. 3
flex-flow Propiedad compuesta. Establece o recupera el modo de disposición de los elementos secundarios del objeto de caja flexible. 3
flex-direction Esta propiedad determina la posición de los elementos flex dentro del contenedor flex definiendo la dirección del eje principal del contenedor flex. 3
flex-wrap Esta propiedad controla si el contenedor flex es de una sola línea o de varias líneas, y la dirección del eje transversal determina la dirección en la que se apilan las nuevas líneas. 3
align-content Alinea los elementos dentro del contenedor flexible cuando estos no ocupan todo el espacio disponible en el eje transversal (vertical). 3
align-items Define la alineación de los elementos flex en la dirección del eje lateral (vertical) de la fila actual del contenedor flex. 3
align-self Define la alineación de los elementos flex hijos de forma individual en la dirección del eje transversal (eje vertical). 3
justify-content Establece o recupera la alineación de los elementos de la caja flexible en la dirección del eje principal (eje horizontal). 3
order Establece o recupera el orden en que aparecen los elementos secundarios del objeto del modelo de caja flexible. 3

Propiedades del modelo de caja flexible (Flexible Box) (antiguas)

Propiedades Descripción CSS
box-align Especifica cómo alinear los elementos secundarios de un cuadro. 3
box-direction Especifica en qué dirección se muestran los elementos secundarios de un cuadro. 3
box-flex Especifica si los elementos secundarios de un cuadro son flexibles o de tamaño fijo. 3
box-flex-group Asigna elementos flexibles a grupos Flex. 3
box-lines Especifica si se ajusta a una nueva línea o columna cuando se agota el espacio en el cuadro padre. 3
box-ordinal-group Especifica el orden de visualización de los elementos secundarios de un cuadro. 3
box-orient Especifica si los elementos secundarios de un cuadro deben distribuirse en dirección horizontal o vertical. 3
box-pack Especifica la posición horizontal y vertical del cuadro horizontal dentro del cuadro vertical. 3

Propiedades de fuente (Font)

Propiedades Descripción CSS
font Establece todas las propiedades de fuente en una sola declaración. 1
font-family Especifica la familia de fuentes del texto. 1
font-size Especifica el tamaño de fuente del texto. 1
font-style Especifica el estilo de fuente del texto. 1
font-variant Especifica el estilo de fuente del texto. 1
font-weight Especifica el grosor (peso) de la fuente. 1
@font-face Una regla que permite a los sitios web descargar y usar otras fuentes además de las fuentes "Web-safe". 3
font-size-adjust Especifica el valor de aspect para un elemento. 3
font-stretch Contrae o estira la familia de fuentes actual. 3

Propiedades de contenido generado (Generated Content Properties)

Propiedades Descripción CSS
content Se usa junto con los pseudoelementos :before y :after para insertar contenido generado. 2
counter-increment Incrementa o decrementa uno o más contadores. 2
counter-reset Crea o reinicia uno o más contadores. 2
quotes Establece el tipo de comillas para citas anidadas. 2
crop Permite que los elementos reemplazados (replaced) actúen como un objeto en lugar del área rectangular del objeto completo. 3
move-to Elimina un elemento del flujo y lo reinserta en un punto posterior del documento. 3
page-policy Determina el valor de cadena aplicable al contador de un elemento dado basado en la página. 3

Propiedades de cuadrícula (Grid)

Propiedades Descripción CSS
grid-column Establece las posiciones inicial y final de las columnas de un elemento de cuadrícula. 3
grid-row Establece las posiciones inicial y final de las filas de un elemento de cuadrícula. 3

Propiedades de hipervínculo (Hyperlink)

Propiedades Descripción CSS
target Propiedad abreviada que establece las propiedades target-name, target-new y target-position. 3
target-name Especifica dónde abrir el enlace (posición de destino). 3
target-new Especifica si un nuevo enlace de destino se abre en una ventana nueva o en una pestaña nueva en una ventana existente. 3
target-position Especifica la posición donde debe colocarse el nuevo enlace de destino. 3

Propiedades de caja de línea (Linebox)

Propiedades Descripción CSS
alignment-adjust Permite una alineación más precisa de los elementos. 3
alignment-baseline Especifica cómo se alinean los elementos de nivel en línea en relación con su elemento padre. 3
baseline-shift Permite reposicionar la línea base dominante (dominant-baseline) en relación con la línea base dominante. 3
dominant-baseline Especifica la tabla de línea base escalada (scaled-baseline-table). 3
drop-initial-after-adjust Establece el punto de alineación inicial del punto de conexión principal de la bajada. 3
drop-initial-after-align Calibra la configuración de la línea inicial dentro de la línea para que el cuadro con letra capital utilice el punto de conexión primario. 3
drop-initial-before-adjust Establece el punto de alineación inicial del punto de conexión secundario de la bajada. 3
drop-initial-before-align Calibra la configuración de la línea inicial dentro de la línea para que el cuadro con letra capital utilice el punto de conexión secundario. 3
drop-initial-size Controla el descenso de la letra capital local. 3
drop-initial-value Activa un efecto de letra capital desplegable. 3 
inline-box-align Establece la alineación de las líneas dentro de un bloque en línea de varias líneas que tienen elementos en línea anterior y posterior. 3
line-stacking Propiedad abreviada que establece las propiedades line-stacking-strategy, line-stacking-ruby y line-stacking-shift. 3
line-stacking-ruby Establece el método de apilado de las líneas que contienen elementos de comentario Ruby para elementos de bloque. 3
line-stacking-shift Establece el método de apilado de los elementos contenidos en la línea con base desplazada (base-shift) para elementos de bloque. 3
line-stacking-strategy Establece el método de apilado de las cajas de línea apiladas que contienen elementos de bloque en su interior. 3
text-height Establece la dimensión de progresión de bloque (block-progression) del área de contenido de texto de un cuadro en línea. 3

Propiedades de lista (List)

Propiedades Descripción CSS
list-style Establece todas las propiedades de lista en una sola declaración. 1
list-style-image Establece una imagen como marcador del elemento de lista. 1
list-style-position Establece la posición de colocación del marcador del elemento de lista. 1
list-style-type Establece el tipo de marcador del elemento de lista. 1

Propiedades de margen exterior (Margin)

Propiedades Descripción CSS
margin Establece todas las propiedades de margen exterior en una sola declaración. 1
margin-bottom Establece el margen exterior inferior de un elemento. 1
margin-left Establece el margen exterior izquierdo de un elemento. 1
margin-right Establece el margen exterior derecho de un elemento. 1
margin-top Establece el margen exterior superior de un elemento. 1

Propiedades de marquesina (Marquee)

Propiedades Descripción CSS
marquee-direction Establece la dirección del movimiento del contenido. 3
marquee-play-count Establece cuántas veces se mueve el contenido. 3
marquee-speed Establece la rapidez con que se desplaza el contenido. 3
marquee-style Establece el estilo del movimiento del contenido. 3

Propiedades de varias columnas (Multi-column)

Propiedades Descripción CSS
column-count Especifica el número de columnas en que debe dividirse un elemento. 3
column-fill Especifica cómo se rellenan las columnas. 3
column-gap Especifica el espacio (hueco) entre columnas. 3
column-rule Propiedad abreviada para establecer todas las propiedades column-rule-*. 3
column-rule-color Especifica el color de la regla entre columnas. 3
column-rule-style Especifica el estilo de la regla entre columnas. 3
column-rule-width Especifica el ancho de la regla entre columnas. 3
column-span Especifica cuántas columnas debe abarcar un elemento. 3
column-width Especifica el ancho de las columnas. 3
columns Propiedad abreviada que establece el ancho y el número de columnas. 3

Propiedades de medios paginados (Paged Media)

Propiedades Descripción CSS
fit Si sus propiedades de ancho y alto no son 'auto', da una pista sobre cómo escalar los elementos reemplazados. 3
fit-position Determina la alineación de los objetos dentro de un cuadro. 3
image-orientation Especifica la rotación en sentido horario o hacia la derecha que el agente de usuario aplica a las imágenes. 3
page Especifica el tipo de página específico en el que debe mostrarse un elemento. 3
size Especifica el tamaño y la orientación del contenido de una página que contiene una caja (BOX). 3

Propiedades de posicionamiento (Positioning)

Propiedades Descripción CSS
bottom Establece el desplazamiento entre el borde del margen exterior inferior de un elemento posicionado y el borde inferior de su bloque contenedor. 2
clear Especifica en qué lado de un elemento no se permiten otros elementos flotantes. 1
clip Recorta los elementos posicionados de forma absoluta. 2
cursor Especifica el tipo (forma) de cursor que se debe mostrar. 2
display Especifica el tipo de cuadro que debe generar un elemento. 1
float Especifica si un cuadro debe flotar. 1
left Establece el desplazamiento entre el borde del margen exterior izquierdo de un elemento posicionado y el borde izquierdo de su bloque contenedor. 2
overflow
 Especifica qué sucede cuando el contenido desborda el cuadro de un elemento. 2
position Especifica el tipo de posicionamiento de un elemento. 2
right Establece el desplazamiento entre el borde del margen exterior derecho de un elemento posicionado y el borde derecho de su bloque contenedor. 2
top Establece el desplazamiento entre el borde del margen exterior superior de un elemento posicionado y el borde superior de su bloque contenedor. 2
visibility Especifica si un elemento es visible. 2
z-index Establece el orden de apilado de los elementos. 2

Propiedades de impresión (Print)

Propiedades Descripción CSS
orphans Establece el número mínimo de líneas que deben conservarse en la parte inferior de la página cuando se produce un salto de página dentro de un elemento. 2
page-break-after Establece el comportamiento de salto de página después de un elemento. 2
page-break-before Establece el comportamiento de salto de página antes de un elemento. 2
page-break-inside Establece el comportamiento de salto de página dentro de un elemento. 2
widows Establece el número mínimo de líneas que deben conservarse en la parte superior de la página cuando se produce un salto de página dentro de un elemento. 2

Propiedades de Ruby

Propiedades Descripción CSS
ruby-align Controla la alineación del texto entre el texto Ruby y el contenido base Ruby entre sí. 3
ruby-overhang Cuando el texto Ruby excede el ancho base de Ruby, determina si el texto Ruby puede sobresalir parcialmente sobre cualquier texto adyacente, además de su propia base. 3
ruby-position Su base controla la posición del texto Ruby. 3
ruby-span Controla el comportamiento de expansión (spanning) del elemento de anotación (annotation). 3

Propiedades de voz (Speech)

Propiedades Descripción CSS
mark Propiedad abreviada que establece las propiedades mark-before y mark-after. 3
mark-after Permite que marcadores nombrados se conecten a un flujo de audio. 3
mark-before Permite que marcadores nombrados se conecten a un flujo de audio. 3
phonemes Especifica una pronunciación fonética dentro del elemento correspondiente que contiene texto. 3
rest Propiedad abreviada que establece las propiedades rest-before y rest-after. 3
rest-after Después de que se pronuncie el contenido de un elemento, especifica si se debe hacer una pausa o respetar un límite prosódico. 3
rest-before Antes de que se pronuncie el contenido de un elemento, especifica si se debe hacer una pausa o respetar un límite prosódico. 3
voice-balance Especifica el equilibrio entre los canales izquierdo y derecho. 3
voice-duration Especifica la duración que debe tomar la presentación del contenido del elemento seleccionado. 3
voice-pitch Especifica el tono (frecuencia) promedio de la voz al hablar. 3
voice-pitch-range Especifica la variación del tono promedio. 3
voice-rate Control de la velocidad del habla 3
voice-stress Indica la intensidad del énfasis 3
voice-volume La síntesis de voz se refiere a la amplitud de salida de la forma de onda 3

Propiedades de la tabla (Table)

Propiedad Descripción CSS
border-collapse Especifica si se combinan los bordes de la tabla 2
border-spacing Especifica la distancia entre los bordes de las celdas adyacentes 2
caption-side Especifica la posición del título de la tabla 2
empty-cells Especifica si se muestran los bordes y el fondo en las celdas vacías de la tabla 2
table-layout Establece el algoritmo de diseño utilizado para la tabla 2

Propiedades del texto (Text)

Propiedad Descripción CSS
color Establece el color del texto 1
direction Especifica la dirección / dirección de escritura del texto 2
letter-spacing Establece el espaciado entre caracteres 1
line-height Establece la altura de línea 1
text-align Especifica la alineación horizontal del texto 1
text-decoration Especifica los efectos decorativos añadidos al texto 1
text-indent Especifica la sangría de la primera línea de un bloque de texto 1
text-transform Controla el uso de mayúsculas y minúsculas del texto 1
unicode-bidi   2
vertical-align Establece la alineación vertical del elemento 1
white-space Establece cómo manejar los espacios en blanco en un elemento 1
word-spacing Establece el espaciado entre palabras 1
text-emphasis Aplica marcas de énfasis al texto de un elemento y el color de primer plano de las marcas de énfasis 1
hanging-punctuation Especifica si un signo de puntuación puede sobresalir del cuadro de línea 3
punctuation-trim Especifica si se debe eliminar un signo de puntuación 3
text-align-last La alineación de la última línea cuando text-align está establecido en justify 3
text-justify Especifica el método de justificación cuando text-align está establecido en justify 3
text-outline Establece el contorno del texto 3
text-overflow Especifica qué debe suceder cuando el texto desborda el elemento que lo contiene 3
text-shadow Añade sombra al texto 3
text-wrap Especifica las reglas de ajuste de línea del texto 3
word-break Especifica las reglas de salto de línea para texto no CJK 3
word-wrap Establece si el navegador divide palabras demasiado largas para ajustarlas a la línea 3

Propiedades de transformación 2D/3D

Propiedad Descripción CSS
transform Se aplica a elementos con transformaciones 2D o 3D 3
transform-origin Le permite cambiar la posición de los elementos transformados 3
transform-style Especifica cómo se anidan los elementos en el espacio 3D 3
perspective Especifica cómo se visualiza la perspectiva de los elementos 3D 3
perspective-origin Especifica la posición inferior de los elementos 3D 3
backface-visibility Define si un elemento debe ser visible cuando no está de frente a la pantalla 3

Propiedades de transición (Transition)

Propiedad Descripción CSS
transition Esta propiedad es una forma abreviada de transition-property, transition-duration, transition-timing-function y transition-delay 3
transition-property Establece las propiedades CSS que se utilizarán para la transición 3
transition-duration Establece la duración de la transición 3
transition-timing-function Establece la función de temporización de la transición 3
transition-delay Especifica el tiempo de inicio de la transición 3

Propiedades de interfaz de usuario (User-interface)

Propiedad Descripción CSS
appearance Define el estilo de apariencia del elemento 3
box-sizing Le permite definir ciertos elementos de una manera determinada para ajustarse a un área 3
icon Especifica un icono para el elemento 3
nav-down Especifica la posición de navegación hacia abajo cuando el usuario pulsa la tecla de flecha abajo 3
nav-index Especifica el orden de navegación (tab) 3
nav-left Especifica la posición de navegación hacia la izquierda cuando el usuario pulsa la tecla de flecha izquierda 3
nav-right Especifica la posición de navegación hacia la derecha cuando el usuario pulsa la tecla de flecha derecha 3
nav-up Especifica la posición de navegación hacia arriba cuando el usuario pulsa la tecla de flecha arriba 3
outline-offset Establece el desplazamiento del contorno fuera del borde 3
resize Define si el elemento puede cambiar de tamaño 3
Otras extensiones