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.

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en los emoticonos para valorarlo!

Promedio de puntuación 0 / 5. Total de votos: 0

Hasta ahora ¡no hay votos!. Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en los medios sociales!

¡Siento que este contenido no te haya sido útil!

¡Ayúdame a mejorar este contenido!

Por favor, dime, ¿cómo puedo mejorarlo?

¿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. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)

Sobre el autor

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.

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba
Ir al contenido