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