Jerarquía de elementos HTML en Webgarden

La estructura básica de los elementos HTML en Webgarden es siempre la misma en todos los diseños de plantilla, lo que facilita la edición del código CSS.

Estructura básica

Los nombres individuales (screen, page, etc.) siempre corresponden a los nombres de las clases div. La más alta es <div class="screen"></div>, en ella se jerarquiza <div class="page"></div>, y así sucesivamente. Vea el cuadro de la derecha.

Screen es el más alto en la jerarquía div. Puede utilizarlo para ajustar el fondo o desplazarse por los diferentes div jerarquizados. Page representa la propia página web. Aquí puede definir el estilo de fondo, tamaño de fuente y otros atributos adicionales de esta parte única que posteriormente incluirá contenidos.

Page consta de 3 partes básicas - Top (encabezado), Middle (columnas laterales/paneles y contenido de la página web), y Bottom (pie de página). La clase Static controla tanto la parte superior como la inferior al mismo tiempo. Panels representa las columnas laterales/paneles, y Display es el contenido de nuestra página web, que es único para cada sección.

Aprenda a identificar las partes de su página web de acuerdo a la jerarquía usando las imágenes que encontrará a continuación

Esta jerarquía es sólo una selección de las partes más significativas de HTML. También hay muchos otros div. Esto significa que aunque Screen es padre de Page, no es padre directo de Page. Por lo tanto .screen .page es un selector CSS válido, pero .screen > .page no lo es.

Aplíquelo al editor CSS

Por ejemplo, si usted quisiera cambiar el color de fondo del pie de página a negro, edite el código CSS para que sea igual a como se muestra a continuación. No se olvide de cambiar también el color del texto, para que así sea legible con el nuevo fondo.

.bottom{
background-color: rgb(0,0,0);
color: rgb(255,255,255);
}

Si desea que el encabezado y pie de página sean de color negro, puede ajustar ambos a la vez utilizando la clase Static. Utilice el siguiente código:

.static{
background-color: rgb(0,0,0);
color: rgb(255,255,255);
}