21 Abr

Propiedades CSS para diseño web

color: Define el color del texto. Compatible con casi todas las etiquetas HTML. El valor puede ser un nombre de color o un valor RGB.

background-color: Define el color de fondo del elemento. El valor puede ser un nombre de color o un valor RGB.

background-image: Permite colocar una imagen de fondo en el elemento. El valor es la ruta de la imagen (relativa o absoluta).

background-repeat: Controla la repetición de la imagen de fondo. Valores: repeat-x, repeat-y, no-repeat.

background-attachment: Especifica si la imagen de fondo se desplaza con el contenido o permanece fija. Valores: scroll, fixed.

background-position: Posiciona la imagen de fondo. Valores: porcentaje, tamaño, o combinación de [top, center, bottom] [left, center, right].

background: Establece varias propiedades de fondo a la vez. Valores: background-color, background-image, background-repeat, background-attachment, background-position.

Propiedades de texto

text-decoration: Define si el texto tiene subrayado, tachado, etc. Valores: none, underline, overline, line-through, blink.

text-align: Alinea el texto. Valores: left, right, center, justify.

text-indent: Determina la sangría del texto. Valores: longitud en unidades CSS o porcentaje.

text-transform: Transforma el texto (mayúsculas, minúsculas, etc.). Valores: capitalize, uppercase, lowercase, none.

word-spacing: Define el espacio entre palabras. Valor: tamaño.

letter-spacing: Define el espacio entre letras. Valor: tamaño.

vertical-align: Alinea el texto verticalmente. Valores: baseline, sub, super, top, text-top, middle, bottom, text-bottom, porcentaje.

line-height: Define la altura de la línea y el espacio entre líneas. Valores: tamaño o porcentaje.

Propiedades de espaciado y bordes

margin-left: Define el margen izquierdo. Valores: longitud en unidades CSS o porcentaje.

margin-right: Define el margen derecho. Valores: longitud en unidades CSS o porcentaje.

margin-top: Define el margen superior. Valores: longitud en unidades CSS o porcentaje.

margin-bottom: Define el margen inferior. Valores: longitud en unidades CSS o porcentaje.

margin: Define todos los márgenes a la vez. Orden: superior, derecho, inferior, izquierdo.

padding-left: Define el espacio interno izquierdo. Valores: longitud en unidades CSS o porcentaje.

padding-right: Define el espacio interno derecho. Valores: longitud en unidades CSS o porcentaje.

padding-top: Define el espacio interno superior. Valores: longitud en unidades CSS o porcentaje.

padding-bottom: Define el espacio interno inferior. Valores: longitud en unidades CSS o porcentaje.

padding: Define todos los espacios internos a la vez. Orden: superior, derecho, inferior, izquierdo.

border-left-color: Define el color del borde izquierdo. Valor: color RGB o nombre de color.

border-right-color: Define el color del borde derecho. Valor: color RGB o nombre de color.

border-top-color: Define el color del borde superior. Valor: color RGB o nombre de color.

border-bottom-color: Define el color del borde inferior. Valor: color RGB o nombre de color.

border-color: Define el color de todos los bordes a la vez. Orden: superior, derecho, inferior, izquierdo.

border-style: Define el estilo del borde. Valores: none, dotted, solid, double, groove, ridge, inset, outset.

border-left-width: Define el grosor del borde izquierdo. Valores: thin, medium, thick, tamaño.

border-right-width: Define el grosor del borde derecho. Valores: thin, medium, thick, tamaño.

border-top-width: Define el grosor del borde superior. Valores: thin, medium, thick, tamaño.

border-bottom-width: Define el grosor del borde inferior. Valores: thin, medium, thick, tamaño.

border-width: Define el grosor de todos los bordes a la vez. Orden: superior, derecho, inferior, izquierdo.

Propiedades de tamaño y posicionamiento

width: Define el ancho del contenido del elemento. Valor: porcentaje o tamaño.

height: Define la altura del contenido del elemento. Valor: porcentaje o tamaño.

float: Alinea un elemento a la izquierda o derecha, haciendo que el texto lo rodee. Valores: none, left, right.

clear: Define si un elemento permite que otros elementos floten a su lado. Valores: none, left, right, both.

Propiedades de visualización

display: Define si el elemento es de bloque, línea, lista, etc. Valores: block, inline, list-item, none.

white-space: Controla cómo se gestionan los espacios en blanco. Valores: pre, nowrap, normal.

list-style-type: Define el símbolo de marcador en las listas. Valores: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none.

list-style-image: Usa una imagen como marcador en una lista. Valor: ruta de la imagen.

list-style-position: Define la posición del marcador en una lista. Valores: outside, inside.

list-style: Define todas las características de una lista a la vez. Orden: list-style-type, list-style-position, list-style-image.

Propiedades de diseño avanzado

clip: Selecciona una zona visible del elemento. Valores: shape, auto.

visibility: Define si el elemento es visible o no. Valores: hidden, collapse.

left: Define la posición izquierda del elemento. Valores: auto, tamaño, porcentaje.

top: Define la posición superior del elemento. Valores: auto, tamaño, porcentaje.

overflow: Controla el contenido que desborda el elemento. Valores: visible, hidden, scroll, auto.

position: Define el tipo de posicionamiento del elemento. Valores: absolute, relative, static.

z-index: Define la posición del elemento en el eje Z (superposición). Valor: número.

Ejemplos de display

display: block: Muestra un elemento como bloque (ocupa todo el ancho).

display: inline: Muestra un elemento en línea (ocupa solo el espacio necesario).

display: none: Oculta el elemento completamente.

Ejemplos de visibility

visibility: hidden: Oculta el elemento pero mantiene su espacio.

visibility: collapse: Oculta filas o columnas de una tabla.

Elemento div

El elemento <div> agrupa elementos a nivel de bloque.

Unidades de medida

Absolutas: Medidas fijas (mm, cm, in, pt, pc).

Deja un comentario