0x06-css_box_model.pdf
0 recomendaciones34 vistas
Este documento proporciona instrucciones para un laboratorio sobre la creación de formularios en HTML y CSS. Indica que se debe crear un formulario con campos para nombre, correo electrónico, contraseña y botón de enviar usando las etiquetas adecuadas. Además, especifica cómo aplicar estilos de CSS como fuentes, bordes, redondeo de bordes, márgenes y tamaños de fuente. Explica conceptos como las rutas relativas y absolutas, y el modelo de caja para posicionar elementos.
0x06-css_box_model.pdf
- 1. CSS box model Clic para ver el código
- 2. Lab Repaso del lab-02 Live coding
- 3. Lab_02 En una carpeta con el nombre: lab_02_nombre_apellido Zipear y mandar por mail
- 4. Especificaciones lab_02 HTML: Crear un formulario con los siguientes campos: nombre completo, correo electrónico, contraseña y botón de enviar. Usar etiquetas adecuadas para cada campo, como input y label. Asegurarse de incluir los atributos type y name para cada campo de entrada. CSS: Desde Google fonts utilizar una fuente legible para todo el formulario. Añadir un ancho de borde de 2 píxeles y un color de borde gris claro a todos los campos de entrada. Redondear los bordes de todos los campos de entrada en un radio de 4 píxeles. Agregar un margen de 20 píxeles alrededor de todo el formulario. Centrar el formulario en la página. Establecer el tamaño de fuente de los títulos de los campos en 16 píxeles y negrita. Establecer el tamaño de fuente de los campos de entrada en 14 píxeles.
- 5. Ruta relativa vs absoluta • Absoluta (no importa donde estoy) • https://www.example.com/ • Relativa (importa donde estoy) • style.css • Navegando por carpetas • Moverse entre niveles
- 6. • Mismo nivel • Style.css • Favicon.css • Info.html • Superior • ../about.html • ../gal/clasico.jpg • Interior • img/logo.jpg • style/main.css
- 7. ejemplos • <img src=“pics/compu.jpg” alt=“”> • <a href=“../index.html”></a> • <link rel=“stylesheet” href=“style/main.css”>
- 8. Dividir el contenido • <span></span> es un divisor en línea • <div></div> es un divisor en bloque
- 9. Modelo de caja (box model)
- 10. Modelo de caja (box model)
- 11. Margen automático para centrar Mantenlo simple… El margen automático es una técnica común para centrar elementos horizontales ¿Cómo? Un margen izquierdo y otro derecho en valor auto
- 12. Margen automático selector { margin: 2px auto; }
- 13. Modelo de caja selector { display: inline-block; border: 5px solid green; padding: 5px 20px 5px 20px; margin: 2px auto; width: 20px; height: 30px; }