Aprende CSS online

estructura cssSi ya sabes lo que son los selectores, propiedades y valores, e incluso algo acerca de cómo estructurar una web, pero sientes que necesitas una guía para afianzar conocimientos o aprender la estructura básica CSS estás de enhorabuena.

Estructura CSS es un sitio escrito y desarrollado por Greg Smith y diseñado por Isaac Durazo, ambos de la empresa Bocoup que aborda una buena cantidad de temas para aprender CSS, algo fundamental para cualquier desarrollador de temas WordPress, y además está en español.

El índice de temas es el siguiente:

  1. Sin estructura
  2. La propiedad «display»
  3. margin:auto;
  4. max-width
  5. box model
  6. box-sizing
  7. position
  8. ejemplo de position
  9. float
  10. clear
  11. clearfix hack
  12. estructuras con float
  13. width y porcentaje
  14. media queries
  15. inline-block
  16. estructuras con inline-block
  17. columna
  18. flexbox
  19. frameworks para css

Y lo mejor es que está cada lección muy bien explicada y con ejemplos de uso. Un sitio de referencia imprescindible para cualquier diseñador de WordPress que quiera aprender más CSS.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(0 votos, promedio: 0)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

2 comentarios en “Aprende CSS online”

  1. Xavier Ocampos

    Esta bien a medias: Actualmente la tendencia de estructurar usando la propiedad Display: Inline-Block esta en crecimiento ya que algunos CMS como DNN tienen barras de herramientas que usando float y overflow: hidden para que no desborden los contenidos arruinas las propiedades de edición por carecer de back-end, por ello es que Inline-Block fue la perfecta solución a este problema en espera de ver como funciona definitivamente la propiedad Flex. Pero la propiedad Display: Inline-Block merece una explicación más detallada: El elemento Inline-Block hereda propiedades de texto (text-align, vertical-align…) y eso ademas de ventajas tiene una desventaja «oculta» para aquellos que no pongan atención: Añade un espacio en blanco equivalente al tamaño de la font (sin estan usando font-size: 13px el espacio que genera un elemento con inline-block es equivalente al espacio que genera una letra de 13px), para solucionar este inconveniente el contenedor tiene que tener la propiedad fon-size: 0px, y en el elemento inline-block nuevamente declaramos el tamaño de fuente deseado (por ejemplo font-size: 13px), de esa forma eliminamos ese espacio en blanco que arruina un template desarrollado como pixel-perfect.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido