Читать книгу El gran libro de HTML5, CSS3 y Javascript - Diego Gauchat Juan - Страница 69
2.4.6 Creación de la caja principal
ОглавлениеHay que especificar un tamaño para el contenido del cuerpo. Recordará que en el Código 2-29 añadimos un elemento <div> id=“caja_principal” para agrupar el contenido del elemento <body>, que ahora está contenido en su interior. El tamaño de esta caja determinará el tamaño máximo del resto de los elementos.
Código 2-34
Definición de las propiedades de la caja principal.
La regla del Código 2-34 es la primera que hace referencia a un elemento mediante el valor de su atributo id. El carácter # indica al navegador que el elemento afectado por estos estilos tiene el atributo id con el valor caja_principal.
Ésta regla establece tres estilos para el cuadro principal. El primero establece un ancho fijo de 960 px para la caja. (Los valores habituales para un sitio web actualmente están entre 960 y 980 px de ancho). El segundo estilo es parte del Modelo de caja tradicional. En la regla anterior (Código 2-33), usamos el estilo text-align: center para establecer que el contenido del cuerpo se centre, pero esto solo afecta al contenido en línea, como pueden ser textos o imágenes. Para los elementos en bloque como <div>, es necesario establecer un valor para sus márgenes que los ajusten automáticamente al tamaño del elemento padre. En el Código 2-34, el estilo margin: 15px auto asigna 15 px para el margen superior e inferior del elemento <div> al que hace referencia y establece el tamaño de los márgenes izquierdo y derecho como automático. De este modo tendremos un espacio de 15 px en las partes superior e inferior del cuerpo y el espacio a la izquierda y la derecha será calculado automáticamente de acuerdo con el tamaño del cuerpo y el tamaño del elemento <div>, centrando efectivamente el contenido en la pantalla. Ahora la página web está centrada y con un tamaño fijo de 960 px.
Con el siguiente paso evitaremos un problema que se produce en algunos navegadores. La propiedad text-align es hereditaria. Esto significa que no solo la caja principal estará centrada, sino que también lo estarán todos los elementos que contiene: el estilo se transferirá a cada elemento anidado dentro del elemento <body>. Por tanto es necesario volver a cambiar este estilo a su valor por defecto para el resto del documento. El tercero y último estilo de la regla del Código 2-34 se encargará de esto. De este modo el contenido del cuerpo estará centrado pero el contenido de la caja principal (el elemento <div>) estará de nuevo alineado a la izquierda, y de este modo, el resto del código heredará este estilo y lo utilizará de forma predeterminada.
Hágalo usted mismo
Si aún no lo ha hecho, copie cada regla encontrada hasta este punto en un archivo vacío con el nombre misestilos.css. Este archivo debe ser colocado en la misma carpeta o directorio que el archivo HTML que contiene el Código 2-29. Deberá tener por lo menos dos archivos, uno con el código HTML y otro llamado mystyles.css con todos los estilos CSS que estudiamos desde el Código 2-30. Abra el archivo HTML en el navegador para ver en pantalla el contenido creado.
