Hojas de Estilo en Cascada, nivel 2 (CSS2)

0
14042

Hojas de Estilo en Cascada, nivel 2 (CSS2)

1- Introducción

A continuación, pretendo describir brevemente las Hojas de Estilo en Cascada (CSS) imprescindibles para el desarrollo de nuestras soluciones web, así como mostrar los aspectos y características más relevantes de las CSS y las nuevas propiedades de las CSS nivel 2 (CSS2).

Para ello se describirán los apartados más importantes y varios ejemplos de definición y aplicación de Hojas de Estilo en páginas web.

En la parte final de este tutorial, se podrán consultar y descargar dos documentos, uno con la especificación completa de W3C sobre CSS2 en español y otro con las propiedades y descriptores de las CSS, muy útil para la consulta rápida de estos parámetros cuando estamos desarrollando Hojas de Estilos en nuestros proyectos.

Destacar que la información para la realización de este documento, así como los documentos que anteriormente he mencionado, han sido recogidos de la traducción realizada por Sidar.org de la especificación CSS2 del W3C que se encuentra en: http://www.sidar.org/recur/desdi/traduc/es/css/cover.html

2- Definición de Hojas de Estilo en Cascada nivel 2 (CSS2)

Las Hojas de Estilo en Cascada, nivel 2 (CSS2), permiten que los autores y los usuarios asocien un estilo (por ejemplo, fuentes, colores, espaciado, bordes, señales sonoras, etc.) a los documentos estructurados (por ejemplo, documentos HTML y aplicaciones XML).

Permiten separar el estilo de presentación del contenido de los documentos, CSS2 simplifica la creación y mantenimiento de los sitios Web.

CSS2 se cimenta en CSS1 y, con muy pocas excepciones, todas las hojas de estilo CSS1 válidas son hojas de estilo CSS2 válidas.

CSS2 brinda soporte a hojas de estilo específicas para cada medio, de modo que los autores puedan adaptar la presentación de sus documentos a los browsers visuales, a los dispositivos sonoros, a las impresoras, a los dispositivos braille, de mano, etc. Esta especificación también soporta el posicionamiento de contenidos, fuentes descargables, disposición de la página, aspectos para la internacionalización, contadores y numeradores automáticos, y algunas características relacionadas con la interfaz del usuario.

El logotipo que indica que un sitio web aplica esta tecnología es el siguiente:

3- Características principales de las Hojas de Estilos

Un bloque de declaraciones, comienza con una llave izquierda ({) y termina con la llave derecha (}) correspondiente. En medio de ellas debe haber una lista de cero o más declaraciones separadas por punto y coma (;).

Por ejemplo, se pueden definir los selectores H1,H2, H3, etc. tal y como se muestra a continuación:

H1, H2 {color: green }
H3 {color: red }
Aquí se presenta un ejemplo más complejo:

H1 {

font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: Helvetica; font-variant: normal; font-style: normal; font-stretch: normal; font-size-adjust: none }

De este modo, las siguientes reglas:

H1 { font-weight: bold }
H1 { font-size: 12pt }
H1 { line-height: 14pt }
H1 { font-family: Helvetica }
H1 { font-variant: normal }
H1 { font-style: normal }

son equivalentes a:

H1 {
 font-weight: bold;
 font-size: 12pt;
 line-height: 14pt;
 font-family: Helvetica;
 font-variant: normal;
 font-style: normal
}

Como hemos visto en el ejemplo inicial, cuando varios selectores comparten las mismas declaraciones, pueden agruparse en una lista separada por comas.

En este ejemplo, condensamos tres reglas con idénticas declaraciones en una sola. Así,

H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }

es equivalente a:

H1, H2, H3 { font-family: sans-serif }

Las hojas de estilos permiten incluir Comentarios. Los comentarios comienzan con los caracteres «/*» y terminan con los caracteres «*/». Pueden aparecer en cualquier lugar entre los comandos y su contenido no tiene ninguna influencia en el procesamiento.

Vamos a ver la estructura de una hoja de estilos con un ejemplo de un pequeño documento HTML:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

HTML> HEAD> TITLE>La página de Bach/TITLE> /HEAD> BODY> H1>La página de Bach/H1> P>Johann Sebastian Bach fue un prolífico compositor. /BODY> /HTML>

Para establecer el color azul para el texto de los elementos H1, se puede escribir la siguiente regla CSS:

 H1 { color: blue } 

Una regla CSS consta de dos partes principales: un selecto (‘H1’) y una declaración (‘color: blue’).

La declaración tiene dos partes: una propiedad (‘color’) y un valor (‘blue’).

La especificación HTML 4.0 define de qué manera las reglas de las hojas de estilo pueden especificarse para los documentos HTML: ya sea dentro del documento HTML o a través de una hoja de estilo externa. Para poner la hoja de estilo dentro del documento, use el elemento STYLE:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
HTML>
 HEAD>
 TITLE>La página de Bach/TITLE>
 STYLE type="text/css">
 H1 { color: blue }
 /STYLE>
 /HEAD>
 BODY>
 H1>La página de Bach/H1>
 P>Johann Sebastian Bach fue un prolífico compositor.
 /BODY>
/HTML>

Para una mayor flexibilidad, recomendamos que los autores especifiquen hojas de estilo externas; ellas pueden cambiarse sin modificar el documento fuente HTML y pueden compartirse entre varios documentos. Para vincular una hoja de estilo externa puede usar el elemento LINK dentro de la zona HEAD del documento HTML de la forma:

HEAD>

TITLE>La página de Bach/TITLE> LINK rel="stylesheet" href="bach.css" type="text/css"> /HEAD>

El elemento LINK especifica:

  • el tipo de vínculo: a una hoja de estilo («stylesheet»).
  • la ubicación de la hoja de estilo a través del atributo «href».
  • el tipo de hoja de estilo que se vincula: «text/css».

CSS puede usarse con cualquier formato de documento estructurado, por ejemplo con aplicaciones XML (eXtensible Markup Language).

Este es un simple fragmento en XML:

ARTICULO>
TITULO>Federico el Grande se encuentra con Bach/TITULO>
AUTOR>Johann Nikolaus Forkel/AUTOR>
PARRAFO>
Una tarde, justo cuando preparaba su INSTRUMENTO>flauta/INSTRUMENTO>
y sus músicos estaban dispuestos, un oficial le alcanzó una lista
de los forasteros que habían arribado.
/PARRAFO>
/ARTICULO>

Para que este fragmento sea visualizado a modo de un documento, debemos declarar primero cuáles son los elementos a nivel de línea (es decir, que no dan lugar a saltos de líneas) y cuáles son a nivel de bloque (es decir, que producen saltos de línea).

INSTRUMENTO {display: inline}
ARTICULO, TITULO, AUTOR, PARRAFO { display: block } 

La primera regla declara que INSTRUMENTO será a nivel de línea y la segunda regla, con su lista de selectores separados por comas, declara que todos los demás elementos serán a nivel de bloque.
Una de las ideas de vincular una hoja de estilo a un documento XML es emplear una instrucción de procesamiento:

?XML:stylesheet type="text/css" href="bach.css"?>
ARTICULO>
 TITULO>Federico el Grande se encuentra con Bach/TITULO>
 AUTOR>Johann Nikolaus Forkel/AUTHR>
 PARRAFO>

Una tarde, justo cuando preparaba su INSTRUMENTO>flauta/INSTRUMENTO>
y sus músicos estaban dispuestos, un oficial le alcanzó una lista
de los forasteros que habían arribado.
/PARRAFO>
/ARTICULO>

Una aplicación del usuario visual dará este formato al ejemplo anterior:

Observe que la palabra «flauta» permanece dentro del párrafo debido a que es el contenido del elemento a nivel de línea INSTRUMENTO.

Pero aún el texto no tiene el formato que se podría esperar. Por ejemplo, el tamaño de la fuente del título debería ser mayor que la del resto del texto y quizás se prefiera mostrar el nombre del autor en itálica:

INSTRUMENTO { display: inline }
ARTICULO, TITULO, AUTOR, PARRAFO { display: block }
TITULO { font-size: 1.3em }
AUTOR { font-style: italic }
ARTICULO, TITULO, AUTOR, PARRAFO { margin: 0.5em }

Una aplicación del usuario visual dará este formato al ejemplo anterior:


Las hojas de estilos permiten personalizar las etiquetas y estructuras HTML, pudiendo personalizar los márgenes, rellenos, colores, bordes, fondos, cursores, fuentes, tamaños, alineación, etc. de tablas, listas, bloques, párrafos, etc.

Algunos ejemplos son:

COLOR: Esta propiedad describe el color del primer plano del contenido de texto de un elemento. Existen distintas maneras de especificar rojo:

 EM { color: red } /* nombre de color predefinido */
 EM { color: rgb(255,0,0) } /* RGB rango 0-255 */

FONDO: Esta propiedad determina la imagen de fondo de un elemento. Cuando ponen una imagen de fondo, los autores deben también especificar un color de fondo que será usado cuando la imagen no esté disponible. Cuando la imagen está disponible, es procesada encima del color de fondo. (Así, el color es visible a través de las zonas transparentes de la imagen.)
Los valores para esta propiedad son una URI , para especificar la imagen, o ‘none’, cuando no se utiliza ninguna imagen.

 BODY { background-image: url("mármol.gif") }
 P { background-image: none }
 BODY { 
 background: red url("pendiente.gif");
  background-repeat: repeat-y;
  background-attachment: fixed;
 }

BORDES, RELLENOS Y MÁRGENES: Podemos definir y modificar los parámetros de los márgenes, rellenos y bordes de un bloque, para ello utilizaremos los descriptores margin, padding y border, como se puede apreciar en este ejemplo:

STYLE type="text/css">
  UL { 
 background: green; 
 margin: 12px 12px 12px 12px;
  padding: 3px 3px 3px 3px;
  /* No se especifica border */
  }
  LI { 
 color: black; /* el color del texto es negro */ 
 background: gray; /* Contenido, padding será gris */
  margin: 12px 12px 12px 12px;
  padding: 12px 0px 12px 12px; /* Note 0px para padding right */
  list-style: none /* sin viñeta antes de un ítem */
  /* Ningún borde definido */
  }
  LI.withborder {
  border-style: dashed;
  border-width: medium; /* pone el ancho de border para todos los lados */
  border-color: black;
  }
  /STYLE>

TABLAS: Se pueden personalizar en formatear los distintos elementos de la tabla (TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TH y TD), por ejemplo:

 TABLE { display: table }
 TR { display: table-row }
 THEAD { display: table-header-group }
 TBODY { display: table-row-group }
 TFOOT { display: table-footer-group }
 COL { display: table-column }
 COLGROUP { display: table-column-group }
 TD, TH { display: table-cell }
 CAPTION { display: table-caption }                
 

Los valores que se pueden incluir en las declaraciones de los selectores son del tipo:

1- Enteros y números reales: Un entero> consiste en uno o más dígitos de «0» a «9». Un número> puede ser un entero> o puede ser cero o más dígitos seguidos por un punto (.) seguido por uno o más dígitos. Ambos, enteros y números reales, pueden estar precedidos por un «-» o «+» para indicar su signo.

2- Medidas: Las medidas se refieren a las dimensiones horizontales y verticales.

Las unidades relativas son:

  • em: el tamaño («font-size») de la fuente relevante
  • ex: la ‘altura de la x’ de la fuente relevante
  • px: pixeles, relacionado con los dispositivos visuales
 H1 { margin: 0.5em } /* em */
 H1 { margin: 1ex } /* ex */
 P { font-size: 12px } /* px */

La unidades de son útiles solamente cuando la propiedades físicas del medio de salida son conocidas. Las unidades absolutas son:

  • in: inches — 1 inch (pulgada) es igual a 2.54 centímetros.
  • cm: centímetros
  • mm: milímetros
  • pt: puntos — los puntos usados por CSS2 equivalen a un 1/72 de pulgada.
  • pc: picas — 1 pica es igual a 12 puntos.
 H1 { margin: 0.5in } /* inches (pulgadas) */
 H2 { line-height: 3cm } /* centímetros */
 H3 { word-spacing: 4mm } /* milímetros */
 H4 { font-size: 12pt } /* puntos */
 H4 { font-size: 1pc } /* picas */

3- Porcentajes: El formato de un valor en porcentaje (denotado por en esta especificación) es un signo opcional (‘+’ o ‘-‘, siendo ‘+’ el predeterminado) seguido inmediatamente por un número seguido inmediatamente por ‘%’. Ej:

 P { line-height: 120% } /* 120% de 'font-size' */

4- URL + URN = URI: Ej: BODY { background: url("http://www.bg.com/pinkish.gif") }

5- Contadores: Para referirse al valor de un contador, se usa la notación ‘counter(identificador>)’ o ‘counter(identificador>, estilo-de-lista>)’.

 P {counter-increment: par-num}
 H1 {counter-reset: par-num}
 P:before {content: counter(par-num, upper-roman) ". "}

6- Colores: Un color> es o una palabra clave o una especificación numérica RGB.
Las lista de los nombres de las palabras clave es: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white y yellow. Estos 16 colores son definidos en HTML 4.0. Además de estas palabras clave de colores, los usuarios pueden especificar palabras clave que corresponden a los colores usados por ciertos objetos en el entorno del usuario.

 BODY {color: black; background: white }
 H1 { color: maroon }
 H2 { color: olive }
 

El modelo de color RGB es usado en la especificación numérica del color. Todos estos ejemplos especifican el mismo color:

EM { color: #f00 } /* #rgb */ EM { color: #ff0000 } /* #rrggbb */ EM { color: rgb(255,0,0) } /* rango de enteros 0 - 255 */ EM { color: rgb(100%, 0%, 0%) } /* rango flotante 0.0% - 100.0% */

Más medidas y valores aplicables en hojas de estilos son: Ángulos, Tiempos, Cadena y Frecuencias.


Por último, destacar los denominados: Pseudo-Elementos, que permiten personaliza o realizar ciertas acciones cuando se produce algún proceso determinada, algunos de ellos son.

  • first-letter: El pseudo-elemento :first-letter puede ser usado para las «capitulares» o de inicio de parráfos y bloques.
    	  STYLE type="text/css">
    	   P { font-size: 12pt; line-height: 12pt }
    	   P:first-letter { font-size: 200%; font-style: italic;
    	   font-weight: bold; float: left }
    	   SPAN { text-transform: uppercase }
    

    /STYLE>

  • before y after:

    Los pseudo-elementos ‘:before’ y ‘:after’ pueden ser usados para insertar un contenido generado antes o después del contenido del elemento.

    			  H1:before {content: counter(chapno, upper-roman) ". "}
    

    Cuando los pseudo-elementos :first-letter y :first-line son combinados con :before y :after, se aplican a la primera letra o línea del elemento que incluye el texto insertado.

    			  P.special:before {content: "Especial! "}
    			  P.special:first-letter {color: #ffd800}
    

    Esto procesará la «E» de «Especial!» en un amarillo oro.

    Por ejemplo, la siguiente regla inserta la cadena «Nota: » antes del contenido de cada elemento P cuyo atributo «class» tenga el valor «nota»:

    P.nota:before { content: «Nota: » }

    Por ejemplo, las siguientes reglas insertan comillas de apertura antes de cada elemento Q. El color de la comillas será rojo, pero la fuente será la misma que la del resto del elemento Q:

    Q:before {
    content: open-quote;
    color: red

4- Ejemplos de aplicación de Hojas de Estilo

Se han desarrollado varios ejemplos de aplicación de hojas de estilos en formularios HTML, en estos ejemplos mostraremos las ventajas y los resultados finales de la utilización de CSS, presentando un formulario sin aplicar estilos ni formato, otro con formato aplicado directamente mediante etiquetas HTML y por último tres ejemplos aplicando diferentes hojas de estilos. Destacar que las hojas utilizadas son «sencillas», pudiendo añadir estilos para las tablas utilizadas, sonidos, etc.

El archivo default.htm presenta un pequeño menú, la primera opción muestra un formulario (formulario_sin_estilos.htm) sin hojas de estilo ni formato, tal y como se muestra en la imagen:

La segunda opción muestra el mismo formulario (formulario_sin_estilos1.htm) sin hojas de estilo, pero formateado mediante la etiqueta FONT de HTML, lo que permite presentar un formulario más agradable al usuario, como se muestra en la imagen, pero el trabajo de programación y de mantenimiento se incrementan con esta opción, sobre todo si se aplica este sistema a todo un sitio web completo.

La tercera opción muestra el mismo formulario (formulario_con_estilos1.htm) que tiene vinculada una hoja de estilos (estilos1.css), se puede ver que el código se simplifica con respecto al ejemplo anterior, el resultado que se presenta es agradable para el usuario y este sistema permite mejorar el mantenimiento de un sitio web completo, por ejemplo si queremos cambiar el tipo de fuente o el color del fondo de todos los archivos de nuestro sitio web, sólo cambiaremos el estilo correspondiente y se aplicará a todas las páginas que lo utilice, esto no sucedía en el ejemplo anterior, debiendo modificar los parámetros de la etiqueta FONT de todas las páginas.

La cuarta opción muestra el mismo formulario (formulario_con_estilos2.htm) que tiene vinculada otra hoja de estilos (estilos2.css), se puede ver el resultado en la siguiente imagen:

La quinta opción muestra el mismo formulario (formulario_con_estilos3.htm) que tiene vinculada otra hoja de estilos más elaborada (estilos3.css), se puede ver el resultado en la siguiente imagen:

El contenido de la hoja de estilos (estilos3.css) que se aplica en el último formulario, es el siguiente:

body { BACKGROUND: #F8F88F fixed; scrollbar-face-color:#ffffff; scrollbar-arrow-color:#999999; scrollbar-track-color:#ffffff; scrollbar-shadow-color:#eeeeee; scrollbar-highlight-color:#999999; scrollbar-3dlight-color:#ffffff; scrollbar-darkshadow-Color:#Ffffff; color:#333333; } .textosmall { font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color: #222222; } .texto { font-family: Verdana, Helvetica, Arial,sans-serif; font-size: 11px; color: #333333; text-decoration: none; font-weight: normal; text-align:justify } .texto:first-letter { font-size: 200%; font-style: italic; font-weight: bold; float: left } .texto2 { font-family: Verdana, Helvetica, Arial,sans-serif; font-size: 11px; color: #333333; text-decoration: none; font-weight: bold; text-align:justify } .marco { border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-bottom-color: #A9A7A4; border-right-color: #A9A7A4; border-top-color: #E9E8E1; border-left-color: #E9E8E1; font-size: 10px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #333333; text-decoration: none; font-family: Verdana, Helvetica, Arial; width:250; } .marco2 { font-size: 11px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; background-color: #eeeeee; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-bottom-color: #A9A7A4; border-right-color: #A9A7A4; border-top-color: #E9E8E1; border-left-color: #E9E8E1; color: #333333; text-decoration: none; font-family: Verdana, Helvetica, Arial; width: 250px; } textarea { font-size: 11px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; background-color: #eeeeee; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-bottom-color: #A9A7A4; border-right-color: #A9A7A4; border-top-color: #E9E8E1; border-left-color: #E9E8E1; color: #333333; text-decoration: none; font-family: Verdana, Helvetica, Arial; width: 565px; } .titulo { FONT-WEIGHT: bold; FONT-SIZE: 16pt; COLOR: #ffffff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-VARIANT: normal; FILTER: shadow( direction = 135,color = #888888); PADDING-BOTTOM: 2px; } a { FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #999999; FONT-FAMILY: Verdana, Helvetica, Arial, sans-serif; TEXT-DECORATION: underline } a:link { FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #999999; FONT-FAMILY: Verdana, Helvetica, Arial, sans-serif; TEXT-DECORATION: underline } a:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; FONT-WEIGHT: bold; color: #000000; text-decoration: none; cursor:hand; } a:hover { FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #333333; FONT-FAMILY: Verdana, Helvetica, Arial, sans-serif; TEXT-DECORATION: underline } .admin { font-family: Arial, Helvetica, sans-serif; font-size: 14px; background-color: #eeeeee; height: 22px; border: 1px solid #000000; color: #333333; vertical-align: top; FONT-WEIGHT: bold; width:200; cursor:hand; } p { font-family: Verdana, Helvetica, Arial,sans-serif; font-size: 11px; color: #333333; text-decoration: none; font-weight: normal; text-align:justify }

Os podéis descargar los archivos del ejemplo para ver los resultados finales en vuestro equipo.

5- Consulta y Descarga de Documentación

He recopilado y unificado la especificación de la traducción realizada por el sitio web Sidar.org de la especificación CSS2 del W3C que se encuentra en: http://www.sidar.org/recur/desdi/traduc/es/css/cover.html en documentos PDF para su consulta o descarga, espero que sean de gran ayuda.

  1. Puedes consultar o descargar la especificación completa de CSS2 del W3C en formato PDF.
  2. Puedes consultar o descargar el documento PDF con los Parámetros y Descriptores de las Hojas de Estilos.

6- Conclusión

En este tutorial he pretendido describir brevemente y mostrar algunos ejemplos de utilización de las Hojas de Estilos, tecnología que permite separar el formato, diseño o presentación de los contenidos, de la propia información presentada dentro de nuestros proyectos web, permitiéndonos optimizar el mantenimiento y unificar el aspecto de nuestro sitio web.

Si se quiere profundizar en este tema, se incluye un documento con la especificación completa de CSS2 por el W3C en español, donde se incluyen todas las definiciones, propiedades, ejemplos, etc. Esta documentación se puede consultar en la traducción realizada y publicada por el sitio web de www.sigar.org, como se ha indicado en varios apartados de este tutorial, existiendo múltiples recursos e información en Internet sobre esta tecnología, algunos de ellos son:

Por último, en este tutorial he puesto la mejor intención para presentar esta tecnología tan importante en el desarrollo de sitios web, pero puedo haberme equivocado en algún aspecto de este tutorial, si alguien desea aportar datos, o colaborar, o corregirme, estaré encantado de recibir y estudiar su respuesta en icaballero@carixma.com

SOBRE EL AUTOR…

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad