Jerarquía de los HTML tags

La relación jerárquica en el caso de los HTML tags corresponde a una relación de descendencia de los selectores involucrados. Un elemento A es descendiente de un elemento B si A es hijo de B, o A es hijo de un elemento C descendiente de B. Es decir, si se definen los tags genéricos A ->B  (B hijo de A en la jerarquía), se tomaran los settings de B en la página web, para todos los casos en que el HTML contenga una estructura como la siguiente:

q  B hijo de A:   <A>….<B>...</B>…</A>  

q  B descendiente de A:  <A>... <C>... <B>.... </B>....</C>....</A>

Esto significa que, la relación padres-hijos en el árbol de Tags HTML representa el anidamiento de los tags involucrados. Por ejemplo, si se define una estructura en la que el nodo padre es “Table” y tiene dos hijos :“A:link” y “H2”. Significa que todos los headings de tipo dos dentro de una tabla, y por otro lado todos los links dentro de una tabla tomarán los settings definidos en el Theme. Por ejemplo, si se define un tag LI hijo del tag UL al cual se le configuran las propiedades Font, y ForeColor, se tendrá como resultado en el CSS:

UL LI

{font-family : Microsoft Sans Serif;

font-size : 8.25pt;

color : rgb(255, 0, 0);}

Los settings a los tags realizados a nivel del editor, se ven reflejados en la página web solo si esos mismos tags están incluidos en el html de la página, y en el mismo orden que establece la jerarquía definida, siempre teniendo en cuenta las precedencias que están declaradas en las especificaciones de CSS publicadas:  http://www.w3.org/TR/REC-CSS2/

Básicamente, cuando se grafica el HTML, se toman en cuenta en el siguiente orden:

1. Los valores de las propiedades heredables.

2. Los valores de las propiedades definidas en el CSS (asociadas a través del atributo CLASS).

3. Los valores de atributos definidos específicamente para el tag.

Respecto al punto 1, los selectores que están anidados entre selectores heredarán los valores de las propiedades del selector más externo, a menos que sean modificados. Por ejemplo, el color definido para el BODY se aplica al texto de un párrafo. Hay casos en que las propiedades no son heredables, por ejemplo, la propiedad margin-top no se hereda en ese caso, intuitivamente un párrafo no tendría el mismo “top margin” que el body del documento.

Un ejemplo del orden de prioridades es: si se define un tag “SPAN”, los atributos/variables (radio buttons y checkboxes) se ven segun los settings de ese tag. Si se define una clase “attribute” y se asigna a esos controles, sobrescribe  los settings del tag.

2.     Realizar los cambios requeridos y salvarlo.

Para este ejemplo, cambiar el Backcolor de la clase “Attribute”. Salvar los cambios.

Imagen 3-12: Gx Theme Editor. 

3.     Asociar el Theme al objeto Web y el control a la clase.

Editar las properties del objeto, y cambiar la propiedad Theme para que se corresponda con el Theme definido en 1.

 Imagen 3-13: Propiedades.

Verificar que el control edit quede asociado a la clase modificada en el punto 2 (editar las propiedades del control, y verificar la propiedad “Class”).

Imagen 3-14: Propiedades.

Con esto el control edit en runtime va a ser visualmente igual a la clase “Attribute” a la cual se asoció. Cualquier modificación a dicha clase, se reflejará automáticamente en todos los controles asociados a ella.