HTMLpointHTMLpoint HTMLpoint.com


 Agrupar estilos



La reaqgrupación es una técnica suplementaria para hacer más funcionales las hojas de estilo y permitir efectos en otro caso imposibles. La agrupación de estilos reduce los atributos y los argumentos creando grupos lógicos. En particular, dicha función se lleva a cabo de dos maneras:

  • Agrupar TAG
      Para entender mejor esta cuestión, imaginemos una página web impostada con diversos estilos, cada uno de los cuales estará identificado por las siguientes marcas:

      <STYLE>
      H1 { font-family:arial; font-size:14px; color:blue; }
      H2 { font-family:arial; font-size:14px; color:blue; }
      H3 { font-family:arial; font-size:14px; color:blue; }
      </STYLE>


      Para agrupar los estilos es suficiente sintetizar el código de esta manera:

      <STYLE>
      H1, H2, H3 { font-family:arial; font-size:14px; color:blue; }
      </STYLE>


      Otro ejemplo en su forma no agrupada sería:

      <STYLE>
      A:link { text-decoration: none } A:visited { text-decoration: none }
      </STYLE>


      el cual, sin embargo, siguiendo las reglas de agrupación de estilos, se convierte en : <STYLE>
      A:link, A:visited { text-decoration: none }
      </STYLE>


  • Agrupar los atributos

      Es posible dividir los estilos según datos específicos sobre las familias. Con este tipo de agrupación el siguiente estilo de texto:

      <STYLE>
      BODY { font-family:verdana; font-size:15px; font-weight:bold; font-style:normal; color:red}
      </STYLE>


      se convierte en:

      <STYLE>
      BODY { font: bold normal 15px verdana red}
      </STYLE>


      Se ha enunciado el atributo font y, sucesivamente, los argumentos que lo componen. El orden de enunciación no se debe dejar nunca al azar sin oque se debe impostar según precisas reglas jerárquicas. En el ejemplo, el peso, el tipo de carácter y el tamaño se colocan antes de la dimensión. Los atributos no se separan mediante comas sino mediante simples espacios.

      Las mismas reglas son válidas para los márgenes. Remitimos al capítulo correspondiente para mayores detalles.

  •   Vuelve a principio de página