Bordes
| Propiedad | Descripción | Valores |
|---|---|---|
| border | Ancho, color y estilo para los 4 bordes. | thin medium thick longitud color transparent none hidden dotted dashed solid double groove ridge inset outset |
| border-top border-right border-bottom border-left | Ancho, color y estilo para los bordes superior, derecho, inferior, izquierdo. | |
| border-width | Ancho de los 4 bordes. | thin medium thick longitud |
| border-top-width border-right-width border-bottom-width border-left-width | Ancho del borde superior, derecho, inferior, izquierdo. | |
| border-color | Color de los 4 bordes. | color transparent |
| border-top-color border-right-color border-bottom-color border-left-color | Color del borde superior, derecho, inferior, izquierdo. | |
| border-style | Estilo de los 4 bordes. | none hidden dotted dashed solid double groove ridge inset outset |
| border-top-style border-right-style border-bottom-style border-left-style | Estilo del borde superior, derecho, inferior, izquierdo. |
Contenido Generado
| Propiedad | Descripción | Valores |
|---|---|---|
| content | Agregador de contenido para los pseudo elementos ":after y :before". | normal none texto URL contador attr(x) open-quote close-quote no-open-quote no-close-quote |
| quotes | Especificalas marcas para indicar las citas. | texto none |
| counter-reset | Inicializa un contador. | identificador entero none |
| counter-increment | Incrementa un contador. | identificador entero none |
Dimensiones
| Propiedad | Descripción | Valores |
|---|---|---|
| width | Ancho. | longitud % auto |
| min-width | Ancho mínimo. | longitud % |
| max-width | Ancho máximo. | longitud % none |
| height | Alto. | longitud % auto |
| min-height | Alto mínimo. | longitud % |
| max-height | Alto máximo. | longitud % none |
| line-height | Altura entre las bases del texto. | normal número longitud % |
Efectos Visuales
| Propiedad | Descripción | Valores |
|---|---|---|
| overflow | Comportamiento del contenido si se desborda en la caja. | visible hidden scroll auto |
| clip | Especifica la región visible del elemento. | rect(long.superior, long.derecha, long.inferior, long.izquierda) auto |
| display | Comportamiento del contenedor. | inline block list-item run-in inline-block table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption none |
| visibility | Visibilidad de las cajas. | visible hidden collapse |
Fondo
| Propiedad | Descripción | Valores |
|---|---|---|
| background | Propiedades individuales relacionadas con el fondo. | background-color background-image background-repeat background-attachment background-position |
| background-color | Color de fondo. | color transparent |
| background-image | Imagen de fondo. | URL none |
| background-repeat | Repetición de la imagen de fondo. | repeat repeat-x repeat-y no -repeat |
| background-attachment | Desplazamiento de la imagen de fondo. | scroll fixed |
| background-position | Posición de la imagen de fondo. | % longitud left center right top bottom |
Fuentes
| Propiedad | Descripción | Valores |
|---|---|---|
| font | Atajo para establecer el resto de propiedades sobre las fuentes a la vez. | font-style font-variant font-weight font-size font-family line height caption icon menu message-box small-caption status-bar |
| font-family | Familias de fuentes. | nombre-familia familia-genérica |
| font-style | Estilo de la fuente. | normal italic oblique |
| font-variant | Convierte las minúsculas a mayúsculas pero mantienen un tamaño inferior a las mayúsculas. | normal small-caps |
| font-weight | Intensidad de la fuente. | normal bold bolder lighter 100 200 300 400 500 600 700 800 900 |
| font-size | Tamaño de la fuente. | xx-small x-small small medium large x-large xx-large larger smaller longitud % |
Contornos
| Propiedad | Descripción | Valores |
|---|---|---|
| outline | Propiedades individuales del contorno. | outline-color outline-style outline-width |
| outline-width | Ancho del contorno. | thin medium thick longitud |
| outline-style | Estilo del contorno. | none hidden dotted dashed solid double groove ridge inset outset |
| outline-color | Color del contorno. | color invert |
Listas
| Propiedad | Descripción | Valores |
|---|---|---|
| list-style | Permite establecer el estilo de la lista, la imagen y/o la posición. | list-style-type list-style-position list-style-image |
| list-style-type | Estilo aplicable a los marcadores visuales de las listas. | disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-greek lower-latin upper-latin armenian georgian lower-alpha upper-alpha none |
| list-style-image | Imagen aplicable a los elementos de las listas. | URL none |
| list-style-position | Posición dentro de la lista de los elementos marcadores de las listas. | inside outside |
Márgenes
| Propiedad | Descripción | Valores |
|---|---|---|
| margin | Ancho para varios márgenes individuales. | longitud % auto |
| margin-top margin-right margin-bottom margin-left | Tamaño del margen superior, derecho, inferior e izquierdo. | longitud % auto |
Ubicación
| Propiedad | Descripción | Valores |
|---|---|---|
| position | Esquema de posicionamiento. | static relative absolute fixed |
| top right bottom left | Desplazamiento de la caja(respecto al límite superior, derecho, inferior o izquierdo del contenedor). | longitud % auto |
| float | Posicionamiento flotante. | left right none |
| clear | Control de cajas adyacentes a los float. | none left right both |
| vertical-align | Alineación vertical del texto. | baseline sub super top text-top middle bottom text-bottom longitud % |
| z-index | Solapamiento de niveles de capas. | entero con signo auto |
Relleno
| Propiedad | Descripción | Valores |
|---|---|---|
| padding | Tamaños para varios rellenos individuales. | longitud % |
| padding-top padding-right padding-bottom padding-left | Ancho del relleno superior, derecho, inferior e izquierdo. | longitud % |
Tablas
| Propiedad | Descripción | Valores |
|---|---|---|
| caption-side | Posición del título respecto de la tabla. | top bottom |
| table-layout | Control del algoritmo usado para el formato de las celdas, filas y columnas. | auto fixed |
| border-collapse | Selección del modelo de los bordes. | collapse separate |
| border-spacing | Espaciado entre los bordes de celdas adyacentes. | longitud |
| empty-cells | Visibilidad de los bordes de celdas sin contenido. | show hide |
Texto
| Propiedad | Descripción | Valores |
|---|---|---|
| text-indent | Desplazamiento de la primera línea del texto. | longitud % |
| text-align | Alineamiento del texto. | left right center justify |
| text-decoration | Efectos de subrayado, tachado, parpadeo. | none underline overline line-through blink |
| text-transform | Transformaciones del texto a mayúsculas/minúsculas. | capitalize uppercase lowercase none |
| letter-spacing | Espacio entre caracteres. | normal longitud |
| word-spacing | Espacio entre palabras. | normal longitud |
| white-space | Comportamiento de los espacios dentro de los elementos. | normal pre nowrap pre-wrap pre-line |
| color | Color del primer plano. | color |
| direction | Sentido direccional de la escritura. | ltr rtl |
| unicode-bidi | Sentido direccional de la escritura. | normal embed bidi-override |
Pseudo Clases
| Propiedad | Descripción |
|---|---|
| :link | Enlaces no visitados. |
| :visited | Enlaces visitados. |
| :active | Cuando es activado(tiempo entre que se pulsa un botón sobre él y se suelta). |
| :hover | Cuando se posiciona el cursor sobre él pero no se activa. |
| :focus | Cuando tiene el foco posicionado sobre él. |
| :lang | Especifica el lenguaje usado en el elemento. |
| :first-child | Cuando es el primer hijo de un elemento padre. |
Pseudo Elementos
| Propiedad | Descripción |
|---|---|
| :first-line | Primera línea de un texto. |
| :first-letter | Pimera letra de un texto. |
| :before | Inserta un contenido antes del elemento. |
| :after | Inserta un contenido después del elemento. |
