Maquetación css Parte 1
3 recomendaciones2,003 vistas
El documento detalla los conceptos básicos de maquetación en CSS, incluyendo el uso de selectores como identidad, clase y etiquetas HTML para organizar elementos en contenedores. Explica la utilización de atributos como 'float' y 'clear' para manipular la disposición de los elementos en una página web. Se proporcionan ejemplos de código para ilustrar la aplicación de estas propiedades en la maquetación.
Maquetación css Parte 1
- 1. maquetación aplicar atributos básicos de CSS para diagramar patricio rodríguez m. @taller_media martes 28 de agosto de 2012
- 2. tipos de selectores etiquetas: nativas de HTML identidad: posicionamiento, un elemento clase: múltiples elementos multimedia 1 - internet y sitios web martes 28 de agosto de 2012
- 3. como funciona martes 28 de agosto de 2012
- 4. tipos de selectores etiquetas: no necesitan concatenador body{font-size: 24px;} martes 28 de agosto de 2012
- 5. martes 28 de agosto de 2012 } body
- 6. tipos de selectores identidad: utiliza concatenador #, determina posición de un objeto único #introduccion{width: 980px;} martes 28 de agosto de 2012
- 7. #introduccion martes 28 de agosto de 2012
- 8. identidad: determina posición de un objeto único martes 28 de agosto de 2012
- 9. tipos de selectores clase: utiliza concatenador ., son objetos que se reiteran en cuanto a su uso y estructura .fotos{border: 1px solid #6a4a3c;} martes 28 de agosto de 2012
- 10. clase: son objetos que se reiteran en cuanto a su uso y estructura martes 28 de agosto de 2012
- 11. nociones básicas de maquetación con css martes 28 de agosto de 2012
- 12. 1. la maquetación se realiza por medio de contenedores cabecera HTML enlaces <div id=”contenedor”> <div id=”cabecera”></div> cuerpo <div id=”enlaces”></div> <div id=”cuerpo”></div> <div id=”pie”></div> pie </div> martes 28 de agosto de 2012
- 13. 2. los contenedores (<div>) sin atributos funcionan por cabecera apilamiento HTML enlaces <div id=”contenedor”> <div id=”cabecera”></div> cuerpo <div id=”enlaces”></div> <div id=”cuerpo”></div> <div id=”pie”></div> pie </div> martes 28 de agosto de 2012
- 14. 3. el atributo float permite sacar a un elemento del cabecera flujo del documento, y posicionarlo a la izquierda o enlaces cuerpo derecha de otros elementos adyacentes. Admite tres valores, pie right, left y none. <div id=”contenedor”> <div id=”cabecera”></div> <div id=”enlaces”></div> <div id=”cuerpo”></div> <div id=”pie”></div> #enlaces { </div> width: 300px; float: left; } martes 28 de agosto de 2012
- 15. 4. el atributo clear cabecera se utiliza conjuntamente con float para indicar cuando un elemento flotante permite otros enlaces cuerpo elementos flotantes junto a el. #enlaces { <div id=”contenedor”> width: 300px; <div id=”cabecera”></div> float: left; <div id=”enlaces”></div> } <div id=”cuerpo”></div> <div id=”pie”></div> </div> #cuerpo { pie width: 650px; float: right; } #pie{ clear:both; } martes 28 de agosto de 2012
- 16. <div id=”contenedor”> <div id=”cabecera”></div> cabecera <div id=”enlaces”></div> <div id=”cuerpo”></div> <div id=”pie”></div> </div> enlaces cuerpo #enlaces { width: 300px; float: left; } pie #cuerpo { width: 650px; float: right; } #pie{ clear:both; } martes 28 de agosto de 2012
- 17. preguntas?? martes 28 de agosto de 2012