Las capas, etiquetas Div para aplicar estilos CSS
Ya te comenté en la página anterior que para cachitos de elemento se usa la etiqueta <span> y para bloques o grupos de elementos la etiqueta <div>. Vamos a verla con más detenimiento.
La forma de usarla es muy similar al caso anterior. Basta con colocar la etiqueta de apertura antes de donde empiece el grupo, indicando el nombre dentro de esa etiqueta, y colocar luego la etiqueta de cierre al final del grupo. Muy sencillo. Para agrupar dos párragos podríamos escribir este código de abajo, por ejemplo:
Por tanto se usa la etiqueta Html <div> cuando queremos darle un nombre o identificador no a un trozo de elemento (un par de palabras de un párrafo, por ejemplo) sino a un elementos entero (el párrafo completo) o más habitualmente, a un grupo de elementos, varios párrafos, varias imágenes, un bloque formado por varios párrafos e imágenes, o incluso la página completa. De ese modo, podemos darle los estilos definidos a ese nombre en la hoja de estilos, a todos los elementos de ese grupo. De nuevo, veamos algunos ejemplos concretos para aclarar el concepto.
Imagina que queremos darle un ancho concreto a toda la web. Podríamos crear un estilo en la hoja de estilos llamado "anchura", darle el valor de 800px de ancho y.... a quién se lo aplico? Pues por ejemplo, a toda la web, no? Para eso bastaría con colocar la línea:
al principio del contenido de la web, es decir, justo después de la etiqueta <body> y luego, antes de </body> colocar el cierre de ese div con esta otra línea:
O imagina que tenemos una lista de elementos construida con las etiquetas que vimos atrás, las etiquetas <ul> y <li> con las que hemos hecho el menú lateral. Para darle la forma, anchura y colores que queramos podríamos encerrarla dentro de un div y darle el nombre de "menu" de este modo:
Bueno, para saber cómo se usan estas etiquetas tienes más que suficiente, no? Para mejorar los conocimientos en cuanto a su aplicación práctica te recomiendo que sigas el tutorial Ejemplo con Divs en el que terminarás de entender todo esto perfectamente, ya lo creo que sí ;=) Pasamos ahora a ver un par de propiedades relacionadas con estas dos etiquetas tan prometedoras. Me sigues?
Por cierto! Se me olvidaba comentarlo. Cualquier elemento o conjunto de elementos encerrados por la etiqueta <div> es una capa. Si, las capas no son más que eso, agrupaciones de elementos entre esas etiquetas con el fin de poder aplicarle estilos a lo que tenga en el interior. Ves? Ya sabes lo que son las famosas capas, esa tecnología tan tan moderna para hacer webs profesionales!! je je je. Puedes aprender mucho más sobre ellas con el Ejemplo con Divs que tenemos en CCTW, donde aprenderás a crear una página web desde cero y pasito a pasito.
Más lecciones de Html:
