En ocasiones nuestro nuevo sitio web puede llegar a ser tan grande y complejo o en su análisis nos damos cuenta de que no será una sola página web, si no que serán múltiples paginas web dinámicas entonces es cuando viene la necesidad de pensar en un Tema(colores y estilo de todo nuestro sitio web) que nos ayude a mantener nuestro sitio de manera fácil y rápida con el tiempo.
Y sin lugar a dudas tendremos la necesidad de definir o establecer un Tema a todo nuestro sitio web, que aunque ya existen algunas herramientas como Bootstrap no siempre se adapta a nuestras necesidades.
Uno de las cosas que mas vamos a utilizar es la definición de variables globales, y esto lo podemos lograr de la siguiente manera
/* Definición de variables globales*/ :root { --global-color-0: #060097; --global-color-1: #c10fff; --global-color-2: #1e293b; --global-color-3: #67768e; --global-color-4: #f9f6fe; --global-color-5: #FFFFFF; --global-color-6: #F2F5F7; --global-color-7: #ffcd57; --global-color-8: #000000; } /*su uso*/ #caja{ background-color: var(--global-color-0, blue); }
Como podemos observar la variable se define con dos guiones (–) precedentes al nombre de la variable en si y dentro de la pseudo-clase :root que es el nivel mas alto como el tag <html></html> de una página web.
Y el uso de la variable se hace con la instrucción en CSS de var(–global-color-0, blue), en caso de no existir la variable descrita utilizará el color blue.
Conclusiones
Espero que el articulo te haya sido de utilidad.
¿Ya sabes cuales son nuestros servicios?
¿Qué te ha parecido este artículo? coméntanoslo
¿Necesitas ayuda con tu desarrollo web o con el marketing de tu negocio? contáctanos
Jesús Serrano
Desarrollador web con amplia experiencia en diferentes lenguajes de programación, Servidores de Bases de datos y servidores web.
Recuerda: El secreto es la Paciencia
Contactar
Si necesitas ayuda con tu desarrollo de software o el marketing de tu negocio no dudes en ponerte en contacto con nosotros.
Teléfono: 4772288223