Recomendados
Más contenido relacionado
Similar a 2-Diseñando el encabezado.pptx
Similar a 2-Diseñando el encabezado.pptx (20)
Último
Último (20)
2-Diseñando el encabezado.pptx
- 1. Brand Design Guidelines Brand Design Guidelines Brand Design Guidelines DISEÑO PERSONALIZADO DE PAGINA WEB – PARTE 1 Diseño del encabezado
- 2. La pseudo clase :root y uso de variables en CSS La pseudo-clase :root de CSS selecciona el elemento raíz de la página. En este caso, :root representa el elemento <html> y es idéntico al selector html. En pocas palabras, es como si estuvieras diciendo que todo lo que esté dentro de la etiqueta html, será afectado por aquello que especifiques dentro de :root.
- 3. La pseudo clase :root y uso de variables en CSS La mayor ventaja de :root es que se puede utilizar para declarar variables globales. Para aplicar esto sigue estas instrucciones:
- 4. • Ubícate en el archivo estilos.css. • Dentro de las llaves de :root qua ya están en el archivo digite las siguientes líneas de código
- 6. Como puedes notar, en las líneas de código anteriores se definieron variables, especialmente colores y tamaños que se utilizan muy a menudo dentro del css. Así con las variables será más fácil trabajar el CSS. Y como las vamos a usar tan a menudo, es la razón por la que se han especificado dentro de :root.
- 7. Ahora vas a hacer uso de la primera variable de las que se definieron en el :root. • Para el body dentro del css digita la línea background: var(--fondo); como se ve a continuación.
- 9. Al guardar (Ctrl S) y abrir el archivo index (preferiblemente usando Live Server como se mostró en el video de pasos previos), te preguntarás por qué no hay cambios. Esto sucede porque el fondo está definido como blanco. Pero si vas a :root y cambias el fondo por otro color, y guardas, verás automáticamente el cambio en el navegador web.
- 10. Cuando hagas este tipo de modificaciones, toma capturas del resultado final que ves en el navegador web. Estas capturas te servirán como evidencia que debes subir al finalizar ciertas guías como esta. Mientras tanto puedes ir guardando tus capturas en un archivo personal de Word o Documentos en línea
- 11. Digita las siguientes líneas de código para el header y observa el cambio. *Nota: La palabra header y sus llaves {} ya están en el css. Solamente, debes escribir dentro de ellas.
- 13. Guarda y toma capturas del resultado final en el navegador web y guarda tus capturas en tu archivo personal. Experimenta y escribe comentarios en el CSS!! No dudes en eliminar líneas, guardar y probar qué sucede en la página web (en el navegador). Una vez sepas su función, restablece las líneas eliminadas
- 14. Coloca en forma de comentarios cortos al frente de cada línea CSS, la funcionalidad de atributos como background: linear-gradient, background- attachment y demás líneas, como se mostraba en el video de Pasos Previos Importantes. Hazlo por experimentación, sin buscar necesariamente en Google u otra herramienta.
- 15. Procura guardar capturas con títulos como Antes, o Después en tu documentación personal. Intenta siempre responder el mayor número posible de preguntas, tanto las que tú mismo te hagas como las que encuentres en los test de esta plataforma, a partir de experimentación, sin buscar en internet.
- 16. • Usando git, asocia tu proyecto actual a tu cuenta de GitHub. • Hasta aquí prácticamente el header está finalizado. • Siempre que termines una sección importante de tus proyectos usa git commit –m “…” Uso de git y gitHub
- 17. • Para este caso puedes usar algo como git commit –m “Terminando el header” • Una vez hayas hecho el commit y antes de usar git push, coloca una etiqueta que identificará a ese commit. Para ello usa git tag. Por ejemplo git tag Header-Finalizado
- 18. • Hasta aquí hemos trabajado nuestro header