Manual CSS – Introducción

Como prometí, me dispongo a traducir el fantástico tutorial Colored Boxes, en el que se explica como construir una plantilla CSS paso a paso.

Partiendo de una serie de cajas de colores que vamos colocando, y probando en varios navegadores, se verá el proceso completo de creación de una plantilla CSS en 11 pasos.

Empezamos con una prototipo gráfico y lo convertiremos en una página html operativa. La meta no es fijarse en este ejemplo concreto sino en el proceso completo utilizado.

  • Prototipo de ejemplo

Algunas guías antes de empezar:

Haz un paso cada vez y comprueba cada paso en varios navegadores

Es muy fácil empezar a construir una plantilla y meterse en problemas a mitad de la tarea. Para evitarlo, trata de construir tu plantilla en pequeños pasos y comprueba cada paso en varios navegadores. Con esto conseguirás ver exactamente como progresa la plantilla y no habrá necesidad de volver atrás sobre tus pasos si te metes en problemas.

Construye para los navegadores actuales y luego trabaja hacia atrás

Es mejor empezar construyendo para navegadores que cumplen los estándares y mas tarde hacer repasos, tales como ocultar (via @import) para navegadores mas antiguos.

Mientras construyes y compruebas utiliza CSS en la cabecera del documento

Es mucho mas fácil empezar a construir tus plantillas con el CSS en la cabecera del documento – es mas rápido, y evita problemas de caché. Cuando hayas terminado del todo la plantilla, se puede quitar el CSS y situarlo en hojas de estilo externas.

Valida tu código HTML y CSS

Valida frecuentemente tu HTML y CSS. Muchos problemas en plantillas pueden solucionarse con una rápida comprobación de validación.

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

¿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.

18 comentarios en “Manual CSS – Introducción”

  1. antes que nada saludos, ahora lo importante para mi es ver si me podrina orientar de como crear una plantilla en css. para lo siguiente

    tengo varias hojas de unapagina pero he podido cambiar todos los banner emcabezados, cada que le hago una modificacion, espero me entiendan y me puedan apoyar.

    aurelio

    1. todo esta excelente… ojala se pudiera si no es mucho pedir… que los codigos que sugieres.. tambien pueran con un video ya sea por mdio del software camtasia Studio… ya que este software permite que todo lo que escribes en pantalla se graba como video y luego pudiras editarlo aqui …jejej soy novato en esto y deseo aprender, y perdona la confianza pero es una sugerencia… saludos y muchas gracias por compartir tu conocimientos y experiencia..

  2. Pingback: » Aprende a diseñar en CSS desde cero | Solo Código |

  3. Pingback: Max Design - standards based web design, development and training » Coloured boxes - now in Spanish

  4. Pingback: Ayudame Wordpres !!! | Hernan Davos

  5. Pingback: Sitios en castellano desde donde aprender CSS

  6. Pingback: Aprender CSS, (Sitos en Castellano) | Simple Development

  7. Pingback: Manual CSS – Introducción | Ayuda WordPress

  8. luis- trabajo desde

    Me parece que es una excelente idea poder diseñar nuestras plantillas de wordpress por nosotros mismo asi le daremos el diseño y los que toques que queramos y lo adaptaremos a nuestras necesidades, creo que no es muy complicado realizar esta tarea unicamente tenemos que tener conocimiento basicos sobre css y otras aplicaciones.

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