0% encontró este documento útil (0 votos)
8 vistas2 páginas

Propiedades CSS Esenciales para Diseño Web

El documento describe las propiedades CSS básicas y comunes a todos los elementos, incluyendo dimensiones, márgenes y rellenos. También se detallan propiedades específicas para texto, colores, fondos y bordes, así como propiedades avanzadas para maquetación y visualización. Finalmente, se mencionan propiedades adicionales como efectos de sombra y estilos de listas.

Cargado por

aichatting17
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
0% encontró este documento útil (0 votos)
8 vistas2 páginas

Propiedades CSS Esenciales para Diseño Web

El documento describe las propiedades CSS básicas y comunes a todos los elementos, incluyendo dimensiones, márgenes y rellenos. También se detallan propiedades específicas para texto, colores, fondos y bordes, así como propiedades avanzadas para maquetación y visualización. Finalmente, se mencionan propiedades adicionales como efectos de sombra y estilos de listas.

Cargado por

aichatting17
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

Propiedades CSS básicas, comunes a todos los elementos

 width: establece la anchura del elemento. Pueden ser valores absolutos o


relativos al contenedor del elemento.
 height: similar a height para la altura del elemento.
 margin: espacio exterior al borde del elemento que mantiene con los elementos
vecinos.
 padding: espacio entre el borde del elemento y su contenido.

Propiedades CSS para texto

 font-family: tipo de letra (nombre del tipo => “Montserrat”, “Open Sans”, etc.).
 font-size: tamaño de letra.
 font-weight: peso (normal, negrita, …).
 font-style: estilo (normal, cursiva, …).
 letter-spacing: espacio entre letras.
 line-height: espacio entre líneas / altura de la línea.
 text-decoration: cosas como subrayados, tachados, etc.
 text-align: alineación del texto (left, center, right).

Propiedades CSS para colores y fondos

 color: color del elemento. Es importante notar que existen diferentes formatos
para especificar el color como palabras predefinidas (“red”, “green”, etc.),
formato RGB o valor hexadecimales (ver detalles en el material de referencia).
 background-color: color del fondo del elemento.
 background-image: usar una imagen de fondo.
 background-repeat: usar una imagen de fondo como mosaico. Permite
diferentes modos de organización de la imagen (ver detalles en material de
referencia).
 opacity: opacidad del elemento. Va desde 0 (completamente transparente) hasta
1 (sólido). Un valor de 0.5 sería, por tanto, un nivel de transparencia del 50%.

Propiedades CSS para bordes

 border: añade un borde a un elemento y especifica sus propiedades (grosor,


estilo de línea, etc.). Ver también el modelo de caja de arriba.
 border-color: color del borde.
 border-style: diferentes estilos (sólido, rayitas, puntos, etc.).
 border-radius: redondear las esquinas de un elemento.

Otras propiedades CSS interesantes

 float: propiedad avanzada que permite una maquetación más sofisticada.


Posicionar los elementos de manera “flotante”. Ver este tutorial básico sobre
posicionamiento flotante.
 clear: controla el comportamiento de los elementos adyacentes a elementos
posicionados de forma flotante. Ver también el tutorial anterior sobre
posicionamiento flotante.
 overflow: controla el comportamiento de los contenidos que no caben en su
elemento contenedor (valores: visible, hidden, scroll, auto, inherit)
 display: controla diferentes aspectos de la visualización de un elemento, permite
incluso ocultarlo con el valor “none”.
 list-style-image: URL con una imagen que se debe usar como viñeta.
 list-style-type: diferentes estilos de viñetas y numeración para los elementos de
la lista.
 box-shadow: aplicar un efecto de sombra a un elemento.

También podría gustarte