45.2 Elementos div
La etiqueta div en un documento html permite crear una sección dentro del cuerpo de la página. Se usa principalmente para agrupar distintos elementos en una misma sección, y poder dar estilos específicos a sus elementos. Si en el encabezado no se le asigna un estilo a la división, no se observará una diferencia en la apariencia de los elementos que están en ella, y los del resto del documento.
La sintaxis (al interior del body) es:
<div >
</div>Entre las etiquetas de inicio y cierre, se incluyen los elementos deseados dentro de la sección. Para asignarle estilos a ésta se utiliza con frecuencia el atributo clase. Para ello, se le asigna un valor al atributo al interior de la etiqueta de inicio, por ejemplo:
<div class= "Nombre1">
</div>\(dots\) Y dentro de la etiqueta style en el encabezado (o a través de un archivo externo) se definen las reglas CSS deseadas para esa clase:
.Nombre1 { }Ejemplo
En el siguiente ejemplo encontrará dos divisiones, una con estilos definidos a través del atributo clase, y otra sin estilo.
<!DOCTYPE html>
<HTML>
<head>
<style>
.Nombre1 {
font-family: verdana;
border: 5px outset #00A4BD;
color: #2D3E50;
font-style: italic;
background-color: #EAF0F6;
text-align: center;
width: 15cm;
}
.cuadrado {
width: 150px; /* Ancho de 150 píxeles */
height: 150px; /* Alto de 150 píxeles */
background: red; /* Fondo de color rojo */
border: 1px solid #000000; /* Borde de un píxel de grosor y color negro*/
}
</style>
</head>
<div class= "Nombre1">
<h1> Título dentro de una división con estilo </h1>
<p> Texto dentro de la misma división </p>
</div>
<div>
<h2> Título dentro de división sin estilo</h2>
<p> Texto dentro de la división sin estilo</p>
</div>
</body>
</HTML>