Publicado el

CSS para WordPress: Propiedades Básicas de estilos

css-para-wordpress-estilos

CSS para WordPress: Te compartimos la guía básica para realizar los cambios de estilos en los contenidos de tu proyecto con WordPress. Los estilos que debes conocer para complementar toda la parte visual de tu sitio web. Sin embargo la lista de códigos y de posibilidades que ofrece CSS es muy grande. Te dejamos al final una lista más avanzada de CSS.

1. Maquetación básica

  • width: Ancho de un elemento.
  • height: Alto de un elemento.
  • vertical-align: Alineamiento vertical dentro de un elemento.
  • margin: Espacio que se añade entre el elemento y sus vecinos. Se puede diferencia por lado (arriba, abajo, izquierda, derecha).
  • padding: Relleno interior que se añade en los bordes del A diferencia de margin, cuenta para el tamaño del elemento.
  • float: Mueve el elemento todo lo posible hacia el lado indicado. Esta propiedad se usa en el posicionamiento flotante de CSS. El tema del posicionamiento en CSS no es trivial y conviene estudiar cómo funciona antes de usar esta propiedad.

2. Fuentes y texto

  • font-family: Tipo de letra
  • font-size: Tamaño de letra
  • font-weight: Peso (normal, negrita, …)
  • font-style: Estilo (normal, cursiva, …)
  • text-decoration: “Decoraciones” como subrayado, tachado, etc.
  • text-align: Alineación del texto (izquierda, derecha, etc.)
  • text-transform: Mostrar un texto en mayúsculas, minúsculas o la primera letra de cada palabra en mayúsculas.

3. Color y fondos

  • color: Color del elemento. Se puede especificar en diferentes formatos como palabras predefinidas (red, green, etc.) RGB o como valor hexadecimal.
  • background-color: Color del fondo del elemento.
  • background-image: Permite especificar una imagen de fondo.
  • background-repeat: Permite usar una imagen a modo de mosaico en diferentes modalidades.
  • box-shadow: Crear un efecto de sombra para un elemento.

4. Listas

  • list-style-image: Usar la imagen especificada como viñeta para la lista.
  • list-style-type: Diferentes estilos de viñetas y estilos de numeración para elementos de lista.

5. Bordes

  • border: Añade un borde a un elemento y establece algunas propiedades (grosor, estilo de línea, etc.)
  • border-color: Color del borde.
  • border-style: Diferentes estilos para el borde (sólido, puntos, etc.)
  • border-radius: Permite crear esquinas redondeadas para un elemento.

6. Visibilidad

  • display: «none» ocultar elementos. Otros: ofrecen modos de visibilidad
  • overflow: Controla el comportamiento de los contenidos que no caben en su elemento contenedor.
  • z-index: Indica el nivel visual en el que se muestra el elemento

CSS para WordPress: ¿Qué te pareció? ¿deseas conocimiento avanzado de CSS?

Relacionados:

Deseo guardar o compartir en mis redes: