| Propiedad | Descripción | Ejemplo |
|---|---|---|
| background | Es un atajo para definir los valores individuales del fondo en una única regla CSS. | background: image | position | size | repeat | attachment | origin | clip | color; |
| background -image |
Establece una o más imágenes de fondo para incluirla semánticamente en el documento utilizando la etiqueta img. | background-image: url(image.jpg) | gradients | none; |
| background -position |
Define la posición inicial de la imagen de fondo especificada. | background-position: top left | [pos-x] | [pos-y] | top left | top center | top right | center left | center center | center right | bottom left | bottom center | bottom right; |
| background -size |
Especifica el tamaño de las imágenes de fondo. | background-size: length | % | auto | cover | contain; |
| background -repeat |
Controla la forma en la que se repiten las imágenes de fondo de los elementos. | background-repeat: repeat | repeat-x | repeat-y | no-repeat; |
| background -attachment |
Determina si la posición de la imagen de fondo será fija dentro de la pantalla o se desplazará con su bloque contenedor. | background-attachment: scroll | fixed | local; |
| background -origin |
Especifica el área de origen de un fondo o imagen en determinada caja. Para que la propiedad background-position calcule la posición de inicio de un fondo o imagen definida por la propiedad background-image. | background-origin: border-box | padding-box | content-box; |
| background -clip |
Permite especificar hasta dónde se va a extender el color de fondo o background de un elemento. | background-clip: border-box | padding-box | content-box; |
| background -color |
Define el color de fondo de un elemento, puede ser el valor de un color o la palabra. | background-color: color | transparent; |
| Propiedad | Descripción | Ejemplo |
|---|---|---|
| border | Permite definir de golpe todos los bordes en una única regla de la hoja de estilos. | border-width | border-style | border-color |
| border-width | Establece la anchura de algunos o todos los bordes de los elementos. | border-width: thin | medium | thick | length | inherit | initial | unset; |
| border-style | Establece el estilo de línea para los cuatro lados del borde de un elemento. | border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset; |
| border-color | Establece el color de algunos o todos los bordes de los elementos. | border-color: color; |
| border-shadow | Añade efectos de sombra alrededor del marco de un elemento. | border-shadow: inset || [ length, length, length, length || <color> ] none; |
| border-collapse | Se utiliza para fusionar los bordes. Ésto tiene una gran influencia sobre la presentación y el estilo de las celdas de tabla. | border-collapse: collapse | separate; |
| border-image | permite utilizar una imágen para definir los bordes de los elementos. | image [ number / % border-width stretch | repeat | round ] none; |
| border-radius | Permite especificar hasta dónde se va a extender el color de fondo o background de un elemento. | border-radius: border-radius | border-top-right-radius | border-bottom-right-radius | border-bottom-left-radius | border-top-left-radius; |
| Propiedad | Descripción | Ejemplo |
|---|---|---|
| margin | Establece la anchura de algunos o todos los márgenes de los elementos. | margin-top | margin-right | margin-bottom | margin-left: |
| margin-top | Establece el margen superior de un elemento especificando una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. | auto | length (px, em, rem) | %; |
| margin-right | Establece el margen derecho de un elemento especificando una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. | auto | height (px, em, rem) | %; |
| margin-bottom | Establece el margen inferior de un elemento especificando una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. | auto | length (px, em, rem) | %; |
| margin-left | Establece el margen izquierdo de un elemento especificando una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. | auto | height (px, em, rem) | %; |
| Propiedad | Descripción | Ejemplo |
|---|---|---|
| padding | Establece el espacio de relleno requerido por todos los lados de un elemento. El área de padding es el espacio entre el contenido del elemento y su borde (border). | padding-top | padding-right | padding-bottom | padding-left: |
| padding-top | Establece el espacio de relleno requerido en la parte superior del elemento. | length (px, em, rem) | %; |
| padding-right | Establece la anchura de la zona de relleno derecho de un elemento. | length (px, em, rem) | %; |
| padding-bottom | Establece el espacio de relleno requerido en la parte inferior del elemento. | length (px, em, rem) | %; |
| padding-left | Establece la anchura de la zona de relleno izquierdo de un elemento. | length (px, em, rem) | %; |
| Propiedad | Descripción | Ejemplo |
|---|---|---|
| display | Permite definir el tipo de posición de caja para visualizar un elemento. | display: none | inline | block | flex; |
| display: none | Le dice al navegador que no lo represente; el resultado es que el elemento queda escondido y el espacio que debería ocupar colapsado. | display: none; |
| display: inline | Se comporta como un block anónimo, de mínima anchura. | display: inline; |
| display: block | display: block; | |
| display: flex | Ayuda a colocar las cajas como si fueran celdas de tablas, con un comportamiento predecible y adaptable. | display: flex; |
| Propiedad | Descripción | Ejemplo |
|---|---|---|
| font | Permite establecer de una sola vez los valores para todas las propiedades: font-style , font-variant , font-weight , font-size , line-height y font-family. | style | family | size; |
| font-style | Permite definir el aspecto de una familia tipográfica. | normal | italic | oblique | inherit; |
| font-family | Define una lista de fuentes o familias de fuentes, con un orden de prioridad, para utilizar en un elemento seleccionado. | serif | sans-serif | Font Name; |
| font-size | Especifica la dimensión de la letra. | xx-small | x-small | small | medium | large | x-large | xxlarge | smaller | larger | inherit | length | %; |
| Propiedad | Descripción | Ejemplo |
|---|---|---|
| text-align | Establece la alineación horizontal de elementos inline ( como texto o imágenes ) en un elemento de bloque o de una celda de tabla. | start | end | left | right | center | justify; |
| text-decoration | Permite que el texto sea decorado. | none | underline | overline | line-thorugh | blink; |
| text-shadow | Agrega sombra al texto. | none | color | length; |
| Propiedad | Descripción | Ejemplo |
|---|---|---|
| color | Establece el color con el que se muestra el texto contenido en un elemento. | inherit | color(Keywords, Hexadecimal, RGB, HSL, transparent); |
| opacity | Define la transparencia de un elemento, esto es, en qué grado se superpone el fondo al elemento. | inherit | number; |
| 1 | 2 | 3 |
|---|