10 consejos simples para aprender CSS para WordPress

El aprendizaje de CSS puede ser abrumador, especialmente cuando no sabe dónde comenzar y qué términos buscar cuando está atrapado. Dado que CSS es un lenguaje elegante y no un lenguaje de programación completo, como JavaScript o PHP, en realidad es bastante simple de aprender, especialmente si tiene algún conocimiento HTML (que supongo que tiene para este propósito). En nuestra encuesta de blog, un número abrumador de usted mencionó que desea mejorar su juego y familiarizar mejor con CSS y es por eso que hemos publicado recientemente una lista de más de 150 recursos para aprender CSS, lo que debería ayudarlo. Comience, especialmente en tándem con esta publicación.
Hoy, te mostraré el flujo de trabajo y los consejos que me ayudaron a aprender CSS cuando comencé hace muchos años. Comience con el consejo uno y ve por la lista hasta que el CSS controle. Continúe leyendo o pasando hacia adelante usando estos enlaces:
Construcción básica
Practica con selectores y propiedades simples
Memorizar el modelo de la caja
Aprender a través de la práctica
Organice el contenido por ancho y altura
Flotante y posicionamiento
CSS avanzado
Responder un sitio con CSS
preproceso
personal
1. Construcción básica Lo primero es lo primero: aprender a escribir su propio CSS, necesita saber cómo formatearlo correctamente. En realidad, hay dos formas correctas de hacer esto, pero una de ellas te ayuda a mantenerte más organizado.
Debido a que es común que HTML sea el primer idioma que las personas aprenden cuando quieren trabajar con sitios de WordPress, es útil aprender la sintaxis CSS escribiéndola primero de manera similar a HTML. Aquí está la estructura básica que toma CSS: es bastante simple cuando no hay muchos estilos que desee implementar para un elemento en su sitio, pero cuando comience a familiarizarse con CSS, necesitará más de un estilo para un estilo Elemento y desde aquí tal estructura puede volverse desordenada, rápida. Por lo tanto, existe una forma más eficiente y organizada de escribir su CSS: ahora puede comenzar a investigar los términos utilizados en este ejemplo. Cada uno de estos términos son los bloques básicos de CSS: clase, ID, selector, propiedad y valor. Las propiedades y valores también forman lo que se llama una declaración. Este es un excelente punto de partida para aprender a escribir su propio CSS, y una vez que comience, puede preguntarse dónde debe escribir todo esto en sus archivos de WordPress. En su instalación de WordPress, cualquier archivo que ve y finalice en .css es un archivo CSS, como probablemente ya haya adivinado. El archivo principal que debe buscar es la hoja de estilo y está etiquetado como style.css. Aquí está la mayoría de los propios o todo el diseño del tema en términos de colores, fuentes, imágenes básicas y, posiblemente, parte del tema.
También puede notar un archivo en un tema prefabricado llamado Custom.css y, por lo general, aquí le gustaría hacer cambios en el tema. Al hacer cambios en este archivo, debe sobrescribir los estilos existentes en la hoja de estilo. Si agrega complementos a su tema, también pueden venir con archivos CSS a su carpeta y se utilizan para modelar el aspecto del complemento. 2. Practique con selectores y propiedades simples La siguiente es aprender sobre selectores y propiedades básicas y cómo funcionan en un tema. Selectores como H1, H2 y H3 para encabezados y P para el párrafo, por ejemplo, así como propiedades como la familia de fuentes y el color de fondo. Hay una manera fácil de practicar estas nuevas habilidades y ver los cambios que realiza, sin tener que comenzar su propio blog de WordPress. W3Schools tiene mucha información sobre CSS, así como ejemplos en vivo en los que puede cambiar su código y, al presionar el botón, puede ver instantáneamente los cambios que ha realizado. Cuando vea un ejemplo, haga clic en el botón que lo pruebe usted mismo y abra una ventana donde pueda probar algunos CSS básicos. 3. Memor El modelo de la caja es un partidario de la referencia a la información más común, en lugar de memorizarlos a todos. Tal vez porque encuentro que la memoria falta la mayor parte del tiempo, pero diría que es porque hay muchas referencias en línea maravillosas.
Puede buscar fácilmente selectores y propiedades que no conoce en un momento. Solo se necesita una consulta simple a su motor de búsqueda favorito, como Google o Bing, y toda la información que necesita está a solo un clic de allí. Es importante estar familiarizado con el modelo de caja.
Es importante estar familiarizado con el modelo de la caja.
Este puede ser el caso de muchas (o la mayoría) cosas en la vida, pero el modelo de caja no debería ser uno de ellos. Esencialmente, son los elementos de apariencia básicos en el CSS que necesita para comprender muchas propiedades. La aparición de la caja también incluye muchos lugares básicos que puede modelar con CSS.
Afortunadamente, no es difícil aprender y, con toda sinceridad, si puedo memorizarlo, no debería tener ningún problema. Esencialmente, incluye un área de contenido, llenado, frontera y margen. 4. Aprenda haciendo una vez que comience a familiarizarse con CSS, es una gran idea ponerlo en práctica, elegir un tema que tenga un diseño básico completo y cambiar su estilo editando la hoja de estilo. Es importante comprender cómo los cambios simples pueden afectar drásticamente un tema a veces y a veces no tanto. Finalmente, practicando cuánto puede ayudarlo a ver los cambios que realiza y conecte su escritura de código al resultado final.

En el esquema más amplio de las cosas, una vez que logra conectar los puntos, no solo puede escribir CSS Rapid, sino que debe poder solucionar el futuro, lo que se convierte en una tarea crítica para el diseño y el desarrollo web. Aquí hay algunos temas excelentes que puede practicar que puede instalar de forma gratuita en su sitio web de WordPress. No todos son representaciones perfectas de cómo deben verse y trabajar un tema, pero todos son excelentes puntos de partida para descubrir cómo puede cambiar un tema CSS simple. Spektrum Albtema White Spektrum es un tema simple y común, que incluye el área principal de contenido, la barra lateral, el encabezado y el sótano.
Además de un toque de color cuando se trata de fuentes y enlaces, es un tema simple y simple para trabajar. Fundador
Una vez que comienzas a entender realmente CSS, el tema del fundador es genial para echar un vistazo debajo del capó y echar un vistazo a la hoja de estilo, porque es un poco más complejo que los otros temas enumerados hasta ahora. Es receptivo, accesible y listo para traducir, incluye un icono de hamburguesa para pantallas móviles, así como muchos otros detalles de diseño de CSS que son excelentes para estudiar.
Incluso con estos temas minimalistas anteriores, puede sentirse un poco abrumado por la cantidad de cosas que no reconoce y está bien. A medida que marque cada sección de esta publicación, debe comenzar a reunir más.

5. Organice el contenido por ancho y altura Después de instalar uno de estos temas, también puede comenzar a cambiar la apariencia ingresando diferentes longitudes y anchos de las áreas de contenido y los selectores. Es un precursor del siguiente paso y lo familiariza con las diversas áreas de apariencia en un tema de WordPress. 6. Flotando y posicionando aquí CSS tiende a volverse un poco complicado, porque puede crear un aspecto exclusivo con CSS y, en particular, flotante y posicionamiento. El problema es que estas propiedades no están diseñadas para crear modelos completos y hay un boceto para actualizar los modelos CSS. Por ahora, esta es una forma común para muchas personas que miran su aspecto correcto. Es una gran idea notar los temas que ya existen, incluida la lista anterior, y ver cómo difiere en el uso del flotador y las posiciones. 7. CSS avanzó en este momento, realmente comienza a comprender CSS, pero hay más que descubrir: se usa pseudoclasa para definir un estado específico de un elemento, como pasar el mouse y posicionar las imágenes en un lugar relevante para otros elementos.
Selectores complejos: puede volverse aún más específico con el estilo utilizando selectores más avanzados.

CSS3 Animaciones que crea un desvanecimiento, pop u otras transiciones al pasar con el mouse sobre imágenes y botones.

La capacidad de reacción con las consultas CSS3 de los medios: una de las formas más fáciles de crear un tema receptivo es el uso de la consulta de medios.
Transformaciones: controla el tamaño y la forma de las zonas de contenido seleccionadas.
At-Lules usados ​​para importar cosas como fuentes y hojas de estilo en su tema.
Graders: agregando un gradiente a su tema sin tener que usar una imagen. Estos son muchos de los elementos en los que realmente puede comenzar a ver que el diseño de su tema es realmente contornos. Es el momento perfecto para comenzar a probar sus habilidades. 8. Responda un sitio con CSS con todo este conocimiento en el cinturón, es posible que deba obtener un cinturón más robusto, pero, lo que es más importante, puede poner en práctica sus habilidades, usar un caparazón básico de un tema y agregar su propio CSS estilos desde cero. Una de las cosas más útiles que puede hacer para progresar en su aprendizaje es practicar su conocimiento en las aplicaciones del mundo real. Le recomiendo que intente encontrar un sitio que le guste, luego replíquelo lo mejor que pueda puro con CSS en un tema vacío de WordPress. Claro, probablemente no podrá obtener todo perfecto y probablemente haya muchos elementos que no podrá replicar con CSS, pero es una excelente manera de sentirse cómodo con CSS. Aquí hay algunos temas iniciales excelentes y gratuitos que puede usar:
No historia
Estos son los huesos básicos. Solo hay HTML5 en este tema, por lo que es libre de agregar su CSS sin preocuparse por los conflictos entre los estilos. Sin embargo, viene con todo lo que necesita para comenzar a diseñar su tema. ¿Estás interesado en BlankSlate?
Detalles
Html5 vacío
HTML5 en blanco es un tema estándar de WordPress que incluye algunos estilos, aunque no demasiado. Es un gran comienzo si no está demasiado ansioso por comenzar su CSS desde cero. ¿Estás interesado en HTML5 en blanco?
Detalles
énfasis

Si eres un poco aventurero y quieres probar un tema inicial más avanzado, los subrayados es una excelente opción, sin embargo, no para los corazones débiles, porque viene con dos estilos de temas precargados.También incluye algunas técnicas avanzadas y codificación que lo convierten en una excelente herramienta de aprendizaje.¿Estás interesado en subrayar personajes? Detalles
También está el tema de WordPress de restablecimiento HTML5 en GitHub. Incluye funciones que son un poco más avanzadas, pero esto eventualmente lo convierte en un comienzo valioso. 9. Preprocesadores Una vez que conozca las desventajas de CSS, es una gran idea averiguar sobre los procesadores previos y, en particular, SASS y menos. Ambos lo ayudan a organizar su CSS para que sea mucho más fácil de escribir y más accesible para futuras ediciones. Los preprocesadores lo hacen CSS limpio y fácil de seguir y se ha convertido rápidamente en una capacidad esencial entre los desarrolladores web. Aunque hay un debate en curso sobre el cual es el mejor, Sass tiende a ser el preprocesador más utilizado hasta ahora. Si desea probar su mano en Sass en el contexto de WordPress, consulte el tema Bones. Se compone principalmente de HTML5, por lo que puede probar el elegante con el bit incorporado con SASS que ya está incluido. 10. Marcos en el desarrollo web, los marcos son una estructura para la creación de sitios web dinámicos. Finalmente, el propósito de un marco es hacer los sitios más rápido, sin perder la funcionalidad. Una vez que tenga CSS abajo, puede acelerar el desarrollo del tema utilizando un marco. Uno de los marcos más populares es Twitter Bootstrap. Se crea para responder inmediatamente desde la caja y usar SASS y menos, así como muchos componentes CSS personalizados. El final armado con un programa de aprendizaje y consejos para ayudarlo en el camino, CSS no debe ser demasiado abrumador para que lo maneje. Además, debería estar listo ahora para tratar de atacar su propia WordPress.
Para obtener más recursos sobre el aprendizaje de CSS y WordPress, consulte algunas de nuestras otras publicaciones: Una guía mega para aprender y hacer referencia a CSS para WordPress: más de 150 recursos y desde WordPress Beginner hasta Pro: 200+ recursos de refuerzo de carrera. ¿Triunfos para aprender CSS?Siéntase libre de compartir su experiencia en los comentarios a continuación.

Etiquetas:
CSS