Como no es posible desligar la evolución del tema que aquí nos ocupa (CSS) de la evolución de HTML y de la entrada en el panorama de XHTML, es importante tener una idea así sea somera sobre el impacto que tantos cambios y actualizaciones puedan tener en lo que más pueda preocupar a los programadores Web: la posibilidad de que lo que tanto trabajo les ha costado elaborar y poner a disposición en Internet no pueda ser visto por muchos ya sea porque sus máquinas tienen instalados navegadores (browsers) muy antiguos que no pueden ser actualizados porque la edad del sistema operativo (posiblemente un Windows 95 o un Mac OS 1) no lo permite, o porque el hardware de muchas plataformas conectadas a Internet no está equipado para procesar todos los avances que se están dando, dando como resultado que de un auditorio potencial de millones solo unos cuantos miles de internautas puedan visualizar el contenido tal y como se tenía la intención de que lo vieran.
Por principio de cuentas, tenemos que partir del hecho de que el común denominador más bajo para las etiquetas del HTML (etiquetas tales como <br> para líneas nuevas, <p> para párrafos y <ul> para listas) es HTML 2.0, el estándard oficial más viejo que hay para HTML. Este es el conjunto de etiquetas que todos los navegadores deben poder reconocer. Esto significa que si un navegador que ha estado siendo actualizado no puede reconocer ya varias etiquetas que hoy son consideradas obsoletas pero las cuales eran de amplio uso, el usuario buscará deshacerse de tal navegador y tratará de instalar otro navegador que sí pueda con el paquete. Y a los constructores de navegadores lo que les interesa es acaparar la mayor cantidad posible de usuarios aumentando con ello su porcentaje de participación en el mercado, para lo cual es de importancia crucial el mantener una compatibilidad hacia-atrás (en inglés, backward-compatibility) con lo que podían llevar a cabo todas las versiones anteriores conforme el navegador fue evolucionando aumentando sus capacidades.
La especificación HTML 3.2 fue desarrollada a inicios de 1996, cuando varios vendedores de software como IBM, Microsoft, Netscape Communications Corporation, Novell, SoftQuad, Spyglass y Sun Microsystems se unieron al consorcio mundial W3C (World Wide Web Consortium, considerado como las Naciones Unidas de la Web) para elaborarla. Esta fue la especificación que incluyó por vez primera la posibilidad de poder meter tablas, así como soporte para los applets (subprogramas) del lenguaje Java dándole una nueva dimensión de interactividad con el usuario a las páginas Web (además de lo que ya había con el lenguaje integrado de scripts JavaScript), y proporcionaba una compatibilidad completa “hacia atrás” con HTML 2.0, lo cual significa que las innovaciones introducidas en HTML 3.2 no causarían ningún problema en las máquinas equipadas con navegadores basados en HTML 2.0.
Tiempo después, la recomendación HTML 4.0 fue introducida en 1997, incorporando otras funciones nuevas como la capacidad para poder subdividir la ventana principal del navegador en marcos (frames), así como mejoras adicionales para la construcción de tablas. HTML 4.0 no tardó en ser reemplazada por HTML 4.01, lo que puede ser considerado como la “versión definitiva” de HTML4. Sin embargo, el cambio más importante introducido por HMTL4 fue una integración fuerte con las Hojas de Estilos en Cascada CSS (Cascading Style Sheets). Pero cuando ocurrió esto, entró también en la arena la recomendación XHTML 1.0, escrita en el lenguaje XML. Técnicamente hablando, XHTML 1.0 y HTML4 son muy parecidas; las etiquetas y los atributos de las etiquetas son virtualmente los mismos, y la única pista que tendría un usuario típico de un navegador típico al inspeccionar el código fuente de ambas sobre cuál de las dos convenciones está siendo usada por alguna página es que mientras que en HTML4 las etiquetas y los atributos pueden estar en letras mayúsculas o en letras minúsculas, en XHTML todas las etiquetas y todos los atributos tienen que estar en letras minúsculas. En entradas previas cuando se trató el lenguaje JavaScript, se habían estado utilizando liberalmente etiquetas HTML escribiéndolas en letras mayúsculas, en parte por la ventaja para distinguirlas como tales del resto del contenido de los ejemplos puestos en cada entrada. Pero como esto ya no es posible en XHTML, y puesto que la tendencia es una universalización hacia la costumbre de que todas las etiquetas HTML sean puestas en el código fuente HTML de una página Web en letras minúsculas, a partir de esta entrada y para ir desarrollando una sana costumbre todas las etiquetas así como sus atributos serán puestos usando letras minúsculas.
Es importante resaltar que algo como las Hojas de Estilos fueron parte del plan desde los comienzos del HTML en 1990. Sin embargo, en ese entonces no se implementó un método estandarizado para especificar Hojas de Estilos, dejandole ésta tarea a los desarrolladores de los navegadores que resultaron ser bastante creativos para meterle innovaciones de todo tipo a sus browsers como el lenguaje integrado JavaScript. En 1994, Tim Berners-Lee fundó el World Wide Web Consortium (W3C), y poco tiempo después Håkon Wium Lie publicó su primer borrador sobre Hojas de Estilos HTML en Cascada. Este borrador era una propuesta sobre cómo un documento HTML podía ser estilizado usando declaraciones sencillas. Uno de los que respondieron a la propuesta de Hakon Wium Lie para Hojas de Estilos HTML en Cascada fue Bert Bos, quien había estado trabajando en su propia propuesta. Ambos unieron fuerzas y fue así como se formalizó el concepto de Hojas de Estilos HTML en Cascada. Lo primero que hicieron fue remover el acrónimo HTML del título descriptivo, dándose cuenta de que CSS podía ser más amplio y útil como un lenguaje general de hojas de estilos, aplicable a más de un tipo de documentos.
Para darnos una idea acerca de las dificultades inherentes enfrentadas por HTML para darle una estilización a su contenido, repasemos el hecho de que en HTML “clásico” es posible cambiar el color de las letras dentro de cierto texto (generalmente con la finalidad de darle algún énfasis a algo con fines didácticos y pedagógicos) usando el atributo color dentro de la etiqueta <font> de HTML, como lo muestra el siguiente ejemplo en el cual las palabras “estas tres palabras” deben aparecer resaltadas en color azul en cualquier navegador:
En este párrafo <font color="#0000FF">estas tres palabras</font> serán puestas en color azul.
En aquellos navegadores capaces de interpretar lo anterior correctamente, el efecto visual es el siguiente:
En este párrafo estas tres palabras serán puestas en color azul.
Sin embargo, ya no es posible “estirar” aún más a HTML para obtener otro efecto visual distinto: poner las letras sobre un fondo de cierto color que no sea el fondo blanco rutinario. Para esto, se requiere usar lo siguiente que ya no forma parte de lo que propiamente dicho es el HTML genérico (en este ejemplo, póngase atención especial en dos palabras a las cuales todos los aspirantes a ser programadores Web tienen que empezar a acostumbrarse: “span” y “style”; la primera es usada como una etiqueta <span> de “alcance” (span) en la cual podemos agregar como atributo la palabra reservada “style”, la cual será casi como una palabra mágica que nos abre las puertas hacia lo que es la estilización de una página Web):
En este párrafo <font color="#000000"><span style="background-color: #FFFF00">estas tres palabras</span></font> serán puestas en un fondo de color amarillo.En aquellos navegadores capaces de interpretar lo anterior correctamente, el efecto visual es el siguiente:
En este párrafo estas tres palabras serán puestas en un fondo de color amarillo.
Pero lo relevante es que lo que logra dicho efecto no es HTML, lo logra una estilización llevada a cabo precisamente con una palabra reservada: “style”, y de hecho la etiqueta <span> no es considerada como una etiqueta HTML, se trata de una etiqueta CSS.
Aunque HTML no nació con la intención de que fuese un lenguaje presentacional, esto es, un lenguaje para llevar a cabo presentaciones visuales capaces de ser estilizadas con características para ejercer un control sobre la presentación de un documento en un navegador, creció para convertirse en tal cosa, al tiempo en que CSS Nivel 1 se convirtió en una recomendación del W3C. Las especificaciones originales de CSS hoy conocidas como Nivel 1 (oficializadas el 17 de diciembre de 1996) se limitaron en su mayoría a recrear los efectos HTML. Sin embargo, las especificaciones CSS Nivel 2 publicadas en 1998 trajeron nuevas posibilidades, particularmente la capacidad de posicionar elementos (párrafos de texto, imágenes, etcétera) en una página Web con gran precisión. CSS podía ahora no solamente recrear el formato HTML, sino crear presentaciones con aspecto profesional, al tiempo que las propias páginas HTML (sin CSS) seguían siendo un desorden, ya que HTML no era una plataforma lo suficientemente robusta sobre la cual se pudiera seguir evolucionando. Para solventar esto, se creó el XML o Extensible Markup Language, el cual desde fuera es muy similar al lenguaje XHTML completo con etiquetas, atributos y valores, aunque en lugar de servir como lenguaje sólo para crear páginas Web XML es de hecho un lenguaje para crear otros lenguajes, o sea un metalenguaje (de lo cual MathML fue la primera gran aplicación de XML).
CSS nació con la idea de ser un complemento presentacional tanto para HTML como para su pretendido competidor y reemplazo (a futuro) XHTML. Pero eventualmente CSS no solo comenzó a reemplazar etiquetas (como la etiqueta de subrayado de texto <u>) que le eran propias a HTML sino que con la llegada de HTML 4.01 empezó a imponer rigorismos y formalidades que en su momento parecían una buena idea pero que fueron introduciendo complejidades que antes no se tenían, y una de tales complejidades lo fue sin duda el uso ampliado de la Definición del Tipo de Documento (DTD), una definición implementada mediantes una etiqueta conocida como la etiqueta DOCTYPE que ya se empezaba a usar y poner en algunos documentos HTML desde los tiempos del HTML2 (la primera versión oficial formal de HTML).
HTML 4.01 llegó con tres variedades:
- HTML Transicional.- Esta es la variedad de HTML 4.01 que permite que información de presentación pueda ser incluída en los atributos y elementos HTML. Se pueden aplicar Hojas de Estilos en Cascada CSS a páginas HTML transicionales, y si las propiedades CSS no son entendidas, entonces la presentación HTML tradicional deberá estar disponible como respaldo.
- HTML de Marcos.- Esta es la variedad de HTML 4.01 que permite la declaración de marcos (frames). CSS puede ser usada aquí para controlar la presentación de los marcos.
- HTML Estricto.- Esta es la variedad de HTML 4.01 que se apoya sólidamente sobre Hojas de Estilos en Cascada (reemplazando y eliminando varias etiquetas HTML tradicionales así como varios atributos usados tradicionalmente con etiquetas HTML).
Sin embargo, si bien HTML5 relajó las reglas, XHTML, la versión formalizada de HTML con el lenguaje de marcado XML, no lo hizo, y en un documento XHTML se sigue requiriendo al principio una declaración <!DOCTYPE>.
En el más formalista y riguroso XHTML (que es precisamente con el cual CSS funciona a casi toda su capacidad en la mayoría de los navegadores), la plantilla general del documento XHTML en el modo “estricto” (y de hecho no hay ningún otro modo más que éste en XHTML) es la siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Se había indicado arriba que las declaraciones DTD ya estaban empezando a ser usadas desde los tiempos de la segunda versión oficializada del HTML, HTML2. Aunque ya obsoleta y de poco uso (al menos en lo que a las páginas Web que hoy se elaboran), a continuación se presenta como referencia histórica la declaración <!DOCTYPE> para el HTML 2.0
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Una plantilla convencional XHTML 1.0 Strict</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
</head>
<body>
<p>… Aquí va puesto el contenido HTML … </p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
Posteriormente, en HTML 3.2, cuando aún no había tres “variedades” de HTML como ocurrió con HTML 4.01, se continuó recomendando el uso de la siguiente declaración <!DOCTYPE> en la elaboración de páginas Web que se reproduce aquí únicamente como referencia histórica:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
Y si bien al hacer su aparición HTML 4.01 con sus tres variedades también XTHML entró con su equivalente de tales variedades, hubo una época en la cual XHTML sólo requería un tipo de declaración. Se trata del XHTML 1.0 Básico. La declaración <!DOCTYPE> requerida en la elaboración de páginas Web con XHTML 1.0 Básico (que se reproduce aquí únicamente para propósitos de referencia histórica) es la siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"Obviamente, en HTML 4.01 es en donde empiezan los problemas, con tres tipos diferentes de declaraciones <!DOCTYPE>, las cuales son las siguientes:
"http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
Por su parte, XHTML 1.0, absorbiendo en gran parte las idiosincracias y complejidades del HTML 4.01, también requiere en cada caso de un tipo diferente de declaración <!DOCTYPE>, las cuales son:HTML 4.01 Estricto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transicional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Marcos:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Estricto:Al evolucionar XHTML de 1.0 a 1.1, quedaron eliminadas las variedades del tipo estricto, transicional y de marcos, y sólo se requería ya de una única declaración <!DOCTYPE> que es la siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transicional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Marcos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1:Quienes no están familiarizados con la proliferación de documentos basados en la convención general de marcado SGML tal vez supondrán que no hay otras declaraciones más allá de las que se han citado arriba. Sin embargo, este no es el caso, y hay otros documentos como los que reproducen fórmulas de notación matemática usando lo que se conoce como MathML, para el cual la declaración <!DOCTYPE> es la siguiente en el caso de MathML 2.0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN"No se le habría dado tanta importancia a las declaraciones <!DOCTYPE> de no ser por el hecho de que los deseos manifiestos de quienes manejan el World Wide Web Consortium (W3C) son que tarde o temprano todos los navegadores rechacen el procesamiento de páginas Web que carezcan de una declaración <!DOCTYPE> al principio de los documentos, sobre todo páginas Web que hagan uso extenso de las Hojas de Estilos en Cascada CSS (afortunadamente varios de los navegadores principales perdonan omisiones de este tipo).
"http://www.w3.org/Math/DTD/mathml2/mathml2.dtd">
Bien, pero... ¿exactamente qué es una Hoja de Estilos en Cascada? Quizá la mejor forma de introducir el concepto es ofreciendo un ejemplo de tal concepto en acción que el lector pueda emplear para experimentar por sí mismo con este concepto en su propia computadora (partiendo del supuesto de que tiene un navegador actualizado capaz de poder interpretar lo que es el CSS):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/1999/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>Agrupamiento de Selectores</title>
<style type='text/css'>
body {
background: black;
font-size: 16px;
font-family: sans-serif;
color: white;
margin-left: 72px;
margin-right: 72px;
margin-top: 72px;
}
</style>
</head>
<body>
<p>Este texto tendrá el mismo aspecto en toda la página Web.</p>
<p>No habrá variación de este estilo en toda la página.</p>
</body>
</html>
La única “hoja de estilos en cascada” puesta en el anterior código de la página XHTML es la siguiente:
<style type='text/css'>Esto ciertamente no tiene el aspecto de una “hoja”, quizá porque los estilos fueron definidos dentro del mismo documento HTML. Sin embargo, si sacamos el código que corresponde a los estilos fuera del documento principal HTML para guardarlo en un archivo externo bajo algún nombre sugestivo como “hojaexterna.css” e invocamos el archivo de estilos desde el documento principal HTML, entonces podemos imaginar al archivo externo de estilos como una “hoja de estilos”.
body {
background: black;
font-size: 16px;
font-family: sans-serif;
color: white;
margin-left: 72px;
margin-right: 72px;
margin-top: 72px;
}
</style>
Por otro lado, se tiene dentro de la cabecera <head> del documento HTML en forma prominente la etiqueta <style> que le indica al navegador que está por aplicarse un estilo, y en la etiqueta <style> se tiene un atributo, el atributo “type” al cual se le da el valor “text/css”, lo cual sugiere que el estilo en cuestión impactará el texto (“text”) con una modificación CSS (“/css”). Pero... ¿en dónde está la “cascada”? No hay aquí hay algo que sugiera “cascada” alguna inclusive usando algo de imaginación. No intentaremos justificar la terminología técnica para no confundir al lector sobre un concepto que es esencialmente sencillo, simplemente aceptaremos lo anterior como lo que es, una “hoja de estilo en cascada”. A continuación, procederemos a efectuar una disección de la hoja de estilo en sus partes fundamentales. Primero que nada, dentro de toda hoja de estilo tenemos lo que se conoce como una regla de estilo, y es lo que se muestra resaltado a continuación sobre un fondo amarillo:
<style type='text/css'>Bajo la convención CSS, podemos definir una regla de estilo metiendo espacios en blanco y líneas nuevas a nuestro antojo. La estructura dada arriba a la regla de estilo, usando indentaciones y varias líneas de texto (en lugar de una sola línea), tuvo como propósito darle una mayor claridad y legibilidad a la regla de estilo facilitando su lectura y la comprensión cabal de su propósito. Pero igualmente la podríamos haber escrito de la siguiente manera que ciertamente es menos clara que la anterior:
body {
background: black;
font-size: 16px;
font-family: sans-serif;
color: white;
margin-left: 72px;
nbsp; margin-right: 72px;
margin-top: 72px;
}
</style>
body { background: black; font-size: 16px; font-family: sans-serif; color: white; margin-left: 72px; margin-right: 72px; margin-top: 72px;}Al igual que con HTML, en CSS podemos usar espacios en blanco y líneas nuevas para nuestra propia conveniencia. Al interpretador del navegador que se encarga de leer el CSS no le importa cuántos espacios en blanco o líneas nuevas se utilicen. A los humanos sin embargo nos resulta conveniente darle cierto orden de estructura para facilitar el mantenimiento del código y aumentar nuestra productividad, al igual que como ocurre con los lenguajes de programación estructurados como el Pascal.
La definición de toda regla de estilo empieza con lo que se conoce como un selector. En el caso que nos ocupa, el selector es la palabra “body” que resaltamos a continuación sobre un fondo amarillo:
<style type='text/css'>El selector es la parte de la hoja de estilo que escoge lo que será formateado y estilizado dentro de una página Web. Obsérvese que en el ejemplo que estamos usando, el selector es “body”. ¿No se parece esto mucho a la palabra usada en la etiqueta <body> que describe en HTML el “cuerpo” de toda la página Web? Y en efecto, la estilización que se ha dado arriba tendrá vigor sobre todo el “cuerpo” de la página; o sea que todo el texto que se ponga en la página tendrá el mismo “estilo”. Obsérvese que “body” es escrito en la hoja de estilo sin los paréntesis angulares izquierdo y derecho.
body { la palabra body sobre un fondo amarillobackground: black;
font-size: 16px;
font-family: sans-serif;
color: white;
margin-left: 72px;
margin-right: 72px;
margin-top: 72px;
}
</style>
Dentro de la regla de estilo, y separada del selector, aparece entre corchetes “{” y “}” lo que se conoce como una declaración de estilo, de la cual puede haber varias dentro de una regla de estilo:
selector {<i>declaración 1, declaración 2, declaración 3, ...}
La regla anterior tiene siete declaraciones de estilo, que resaltamos a continuación sobre un fondo amarillo:
<style type='text/css'>Cada declaración de estilo es una combinación de una propiedad CSS y de un valor CSS aplicado a dicha propiedad. Cada propiedad debe ser puesta antes de un colon (:), y el colon es utilizado para separar una propiedad de su valor:
body {background: black;
font-size: 16px;
font-family: sans-serif;
color: white;
margin-left: 72px;
margin-right: 72px;
margin-top: 72px;
}
</style>
propiedad: valor;
Cada declaración dentro de una regla de estilo debe ser terminada siempre con un semicolon (;), excepción de la última declaración en donde el semicolon es opcional.
En la regla de estilo que hemos visto, se tienen las siguientes propiedades:
<style type='text/css'>Bien, es momento de ver precisamente qué es lo que ocurre bajo la acción de la hoja de estilo que se ha dado en el ejemplo que hemos estado viendo.
body {background: black;
font-size: 16px;
font-family: sans-serif;
color: white;
margin-left: 72px;
margin-right: 72px;
margin-top: 72px;
}
</style>
PROBLEMA: Haciendo la transcripción del código completo de la página XHTML que se ha dado arriba entre líneas horizontales a un editor de texto, o mediante copiado y empastado con la ayuda de un bloc de notas, guárdese el código bajo un nombre de archivo como “ejemplo.html”, y ábrase dicho archivo en un navegador actualizado.
Si el lector llevó a cabo el ejercicio anterior, habrá descubierto que el efecto de la estilización aplicada es que toda la ventana principal de la página Web es puesta sobre un fondo negro, y las palabras de texto son puestas de color blanco. La declaración de estilo que se encarga de cambiar el fondo de la pantalla a fondo negro es la siguiente:
background: black;
dándole un valor obscuro (black) a la propiedad del fond (background). Y la declaración de estilo que especifica que todas las letras de texto sean puestas de color blanco es la siguiente:
color: white;
dándoles un color blanco (white) a todas las letras. Podemos cambiar con facilidad el tipo de fuente usado para la impresión de texto en la pantalla dando un valor que nosotros queramos a la propiedad “font-family”, por ejemplo:
font-family: Garamond;
Esto presupone que la plataforma en la cual está corriendo el navegador cuenta entre sus tipos de fuente con el tipo de fuente “Garamond”, en caso de no ser así el tipo de fuente que será seleccionado por el navegador revertirá al tipo de fuente predeterminado para texto en páginas Web de la plataforma que está siendo usada.
En la regla de selección del ejemplo que acabamos de ver, la estilización es aplicable a un solo elemento, el elemento <body> de la página Web en su totalidad, y por lo tanto hay un solo selector. Sin embargo, podemos estilizar al mismo tiempo varias etiquetas dentro de una página Web según la etiqueta en cuestión. Tómese por caso las etiquetas de cabecera <h1>, <h2>, <h3>, <h4>, <h5>, y <h6>. A continuación tenemos el código de una página XHTML en la cual se define un mismo estilo para todas las cabeceras <h1>, <h2>, <h3>, <h4>, <h5> y <h6>:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/1999/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>Agrupamiento de Selectores</title>
<style type='text/css'>
h1, h2, h3, h4, h5, h6 {
font-family: sans-serif;
color: maroon;
border-bottom: 1px solid rgb(200, 200, 200);
}
</style>
</head>
<body>
<h1>Hoja de Estilo</h1>
<h2>Regla</h2>
<h3>Selector</h3>
<h4>Declaración</h4>
<h5>Propiedad</h5>
<h6>Valor</h6>
</body>
</html>
En esta página XHTML se definió un mismo estilo para todas las etiquetas de cabecera que se encuentran en la página, haciendo que todo el texto en cualquier parte de la página que sea especificado con alguna etiqueta de cabecera sea puesto de color marrón. Obsérvese un hecho importante: es posible asignar a una misma propiedad CSS varios valores, usando incluso palabras clave CSS predeterminadas, requiriéndose para ello tan solo que cada uno de los valores asignados a una misma propiedad estén separados por lo menos por un espacio en blanco:
border-bottom: 1px solid rgb(200, 200, 200);
Al igual que en todo lo demás que concierne a la programación Web, CSS tiene un conjunto de palabras clave reservadas. En este caso, el borde debe ser sólido como lo especifica la palabra reservada solid, y el color RGB debe ser tal que sea de una tonalidad gris (el color rojo R debe tener una intensidad de 200 en una escala del cero a 255, el color verde G debe tener también una intensidad de 200 al igual que el color azul 200), para lo cual se usa la palabra reservada CSS rgb() que tiene la sintaxis:
rgb(valor de R, valor de G, valor de B)
Y para la misma propiedad, al borde inferior (border-bottom) se le asigna un grosor de un elemento de imagen pixel (1px). En CSS asignamos grosores o distancias en múltiplos de pixeles, como 3px, 7px, 100px, destacándose el hecho de que el multiplicador numérico tiene que estar puesto inmediatamente antes de la palabra reservada “px”, lo cual implica que algo como:
250 px
es ilegal en CSS.
PROBLEMA: Guárdese el código que se acaba de dar en una página nombrada titulada “agrupamiento_1.html” y ábrase dicha página con un navegador actualizado (capaz de interpretar las convenciones CSS) para comprobar que las etiquetas de cabecera serán puestas de color marrón.
Podemos, con cambios mínimos, agregando reglas adicionales de estilos, especificar un color diferente para el texto que sea puesto entre cada par de las seis etiquetas de cabecera. En la siguiente página XHTML, especificamos tres estilos ligeramente diferentes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/1999/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>Agrupamiento de Selectores</title>
<style type='text/css'>
h1, h4 {
font-family: sans-serif;
color: blue;
border-bottom: 1px solid rgb(200, 200, 200);
}
</style>
<style type='text/css'>
h2, h5, h6 {
font-family: sans-serif;
color: maroon;
border-bottom: 1px solid rgb(200, 200, 200);
}
</style>
<style type='text/css'>
h3 {
font-family: sans-serif;
color: red;
border-bottom: 1px solid rgb(200, 200, 200);
}
</style>
</head>
<body>
<h1>Hoja de Estilo</h1>
<h2>Regla</h2>
<h3>Selector</h3>
<h4>Declaración</h4>
<h5>Propiedad</h5>
<h6>Valor</h6>
</body>
</html>
En el primer estilo, especificamos que el texto que sea puesto entre las etiquetas h1 y h4 sea de color azul. Pero en el segundo estilo, especificamos que el texto sea puesto entre las etiquetas h2, h5 y h6 sea de color marrón. Y en el tercer estilo, especificamos que el texto que sea puesto entre el par de etiquetas h3 sea de color rojo. Si se guarda todo el texto anterior en una página nombrada “agrupamiento_2.html” y la abrimos con un navegador actualizado (capaz de interpretar las convenciones CSS) podremos comprobar en cuestión de minutos cómo se pueden especificar estilos diferentes para cada etiqueta de cabecera.
A continuación haremos una disección del primer estilo:
La regla de estilo en este caso es la siguiente:
La regla de estilo en este caso es la siguiente:
Para esta regla de estilo, hay dos selectores, h1 y h4:
Dentro de la regla de estilo, hay tres declaraciones de estilos:
Las propiedades CSS son las siguientes:
Y los valores asignados respectivamente a cada una de las tres propiedades son:
Las valores que corresponden a las palabras clave siempre empiezan invocando un comportamiento predeterminado. Tómese por ejemplo la propiedad “border”. La propiedad del borde al igual que otras propiedades CSS puede tomar no solo una sino varias palabras clave separadas por un espacio en blanco (con un semicolon puesto inmediatamente después del último valor) que definen cómo aparecerá el borde cuando es trazado por el navegador, como en el siguiente ejemplo en el que especificamos una propiedad con tres valores:
border: thin solid black;
Este ejemplo define una propiedad de borde con tres valores clave: thin (delgado), sólido (solid) y negro (black).
Al igual que como ocurre con HTML, en CSS podemos meter texto de comentarios que serán ignorados por el navegador y que no serán vistos por el usuario. En CSS, los comentarios multi-líneas comienzan con una diagonal seguida inmediatamente de un asterisco (/*), y terminan con un asterisco seguido inmediatamente de una diagonal (*/), al igual que como ocurre en el lenguaje de programación C. Dentro de una hoja de estilos, los comentarios pueden aparecer afuera de una regla de selección, dentro de una regla de selección, pueden abarcar varias líneas, e inclusive pueden ser usados para inhabilitar en forma selectiva ciertas porciones de una hoja de estilo encapsulándolas dentro de marcadores de comentarios, lo cual a su vez puede ser útil para detectar y corregir errores en estilos problemáticos.
Otro elemento dentro de una página Web en el cual se puede aplicar estilización son las tablas. Esto lo haremos a continuación en donde especificaremos el estilo para ser usado en una tabla que contiene una sola celda, en la cual se pondrá texto en letras blancas sobre fondo negro:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/1999/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>Anchura en tablas</title>
<style type="text/css">
table {
width: auto;
background: black;
color: white;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>Texto blanco en fondo negro</td>
</tr>
</tbody>
</table>
</body>
</html>
En el ejemplo que se acaba de dar, en el cual se imprime la frase “Texto blanco en fondo negro” con letras blancas en fondo negro. Asimismo, se utiliza la palabra clave reservada “auto” para asignar una anchura automática a la propiedad CSS “width”. La interpretación CSS dada a este ejemplo de estilo con width es que la anchura de la tabla debe ser justo lo que se requiere (en forma automática “auto”) para darle cabida a la frase, y nada más. Debe ser enfatizada la diferencia entre el selector “table” de la hoja de estilos en cascada, y las etiquetas “<table>” puestas en el cuerpo (body) del documento.
PROBLEMA: Guardar el documento Web anterior en un archivo titulado “anchura1.html” y abrir dicho archivo en un navegador actualizado, comprobando que se despliega una celda de color negro dentro de la cual aparecen puestas las palabras “Texto blanco en fondo negro”.
Una misma combinación de propiedad-valor puede actuar de modo diferente dependiendo del elemento sobre el cual actúa. Cuando aplicamos, por ejemplo, la propiedad-valor:
width: auto
a un elemento <div>, se invoca un mecanismo diferente para la medición de la anchura que cuando se aplica a un elemento de tabla <table> como lo vimos arriba, como lo muestra el siguiente ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/1999/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>Anchura auto en divs</title>
<style type="text/css">
div {
width: auto;
background: black;
color: white;
}
</style>
</head>
<body>
<div>Texto blanco en fondo negro</div>
</body>
</html>
Si se guarda el código anterior bajo un nombre de archivo como “anchura2.html” y se abre dicho archivo con un navegador actualizado, se verá que a diferencia del penúltimo ejemplo la anchura del fondo negro sobre el cual se pone el texto se extiende desde el extremo izquierdo de la ventana del navegador hasta el extremo derecho de la ventana del navegador.
En CSS, podemos definir colores individuales para cualquier tipo de texto así como para cualquier otro tipo de elemento dentro de una página Web, ya sea la página Web completa o una porción de la misma, usando los colores CSS, los cuales se pueden especificar ya sea con palabras clave reservadas para cada color en particular así como en formato hexadecimal RGB precediendo el color hexadecimal con el símbolo de numeral “#” (véase el anexo titulado “HTML, XML, XHTML”). Algunos colores CSS así como sus tonalidades respectivas son los siguientes:
| Palabra clave | Valor hexadecimal |
Valores RGB
|
Tonalidad |
| antiquewhite |
#FAEBD7
|
(250, 235, 215) | |
| aquamarine |
#7FFFD4
|
(127, 255, 212) | |
| beige |
#F5F5DC
|
(245, 245, 220) | |
| black |
#000000
|
(0, 0, 0) | |
| blue |
#0000FF
|
(0, 0, 255) | |
| blueviolet |
#8A2BE2
|
(138, 43, 226) | |
| burlywood |
#DEB887
|
(222, 184, 135) | |
| brown |
#A52A2A
|
(165, 42, 42) | |
| chartreuse |
#7FFF00
|
(127, 255, 0) | |
| chocolate |
#D2691E
|
(210, 105, 30) | |
| cyan |
#00FFFF
|
(0, 255, 255) | |
| gold |
#FFD700
|
(255, 215, 0) | |
| green |
#00FF00
|
(0, 255, 0) | |
| greenyellow |
#ADFF2F
|
(173, 255, 47) | |
| khaki |
#F0E68C
|
(240, 230, 140) | |
| lime |
#00FF00
|
(0, 255, 0) | |
| magenta |
#FF00FF
|
(255, 0, 255) | |
| maroon |
#800000
|
(128, 0, 0) | |
| navy |
#000080
|
(0, 0, 128) | |
| olive |
#808000
|
(128, 128, 0) | |
| orange |
#FFA500
|
(255, 165, 0) | |
| orchid |
#DA70D6
|
(218, 112, 214) | |
| palegreen |
#98FB98
|
(152, 251, 152) | |
| palevioletred |
#DB7093
|
(219, 112, 147) | |
| pink |
#FFC0CB
|
(255, 192, 203) | |
| purple |
#800080
|
(128, 0, 128) | |
| red |
#FF0000
|
(255, 0, 0) | |
| salmon |
#FA8072
|
(250, 128, 114) | |
| silver |
#C0C0C0
|
(192, 192, 192) | |
| tan |
#D2B48C
|
(210, 180, 140) | |
| teal |
#008080
|
(0, 128, 128) | |
| thistle |
#D8FBD8
|
(216, 191, 216) | |
| tomato |
#FF6347
|
(255, 99, 71) | |
| turquoise |
#40E0D0
|
(64, 224, 208) | |
| white |
#FFFFFF
|
(255, 255, 255) | |
| yellow |
#FFFF00
|
(255, 255, 0) | |
| yellowgreen |
#9ACD32
|
(154, 205, 50) |
Se han reproducido por brevedad únicamente algunos de los colores CSS disponibles para fines de presentación. Aunque en el formato hexadecimal RGB es posible definir millones de colores (esto no significa que el monitor que se esté utilizando sea capaz de reproducir tanta variedad de colores) y aunque el ojo humano sea capaz de distinguir más de un millón de colores (lo cual hace que los igualadores de pinturas en las ferreterías tengan tantos problemas en tratar de igualar exactamente la tonalidad de cierta pintura), en la práctica se encuentra que 147 colores son suficientes para la mayoría de los propósitos, cada uno de los cuales tiene reservado un nombre en inglés (por ejemplo, royalblue) que resulta algo más fácil de memorizar que una combinación numérica hexadecimal de los tres colores primarios. La lista completa de las palabras clave (keyword) de estos 147 colores así como sus respectivas tonalidades se reproduce en el anexo puesto al final de esta obra bajo el título “Las propiedades CSS”.
- color (usada para definir el color del tipo de fuente)
- background, o background-color (usada para definir el color de fondo de toda una página Web o de algún elemento de la página)
Así pues, para cambiar el color de algún texto en una página, aplicamos tres pasos: (1) determinar el selector a ser usado, (2) determinar la propiedad de color a ser usada, y (3) identificar el nombre del color o su valor hexadecimal a ser usado. La sintaxis básica para la declaración de estilo en lo que al color respecta es:
selector {color: valor;}
Al especificar un color usando la notación hexadecimal, podemos recurrir a lo que se conoce como notación hexadecimal abreviada. Para cada par de símbolos en notación hexadecimal usados para denotar la intensidad relativa del color primario rojo, el color primario verde y el color primario azul, en una escala numérica del cero (hexadecimal 00) al 255 (hexadecimal FF), si ambos símbolos son iguales entonces se puede usar un solo símbolo para representar la combinación. Obviamente, la notación hexadecimal abreviada no puede usarse para valores tales como 5A, C7, 29 y 4B, pero sí puede utilizarse en el caso de valores como 33, EE, 77 y BB.
PROBLEMA: En notación hexadecimal RGB, se tienen los siguientes valores:
#8AF23C , #BB0055 , #100AAC , #CCAA55 , #DD9911
Las únicas combinaciones hexadecimales RGB dadas arriba que se pueden abreviar bajo la convención CSS reconocida por la mayoría de los navegadores actualizados son la segunda, la cuarta y la quinta, y sus abreviaturas son las siguientes:
#B05 , #CA5 , #D91
De este modo, en vez de escribir:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/1999/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>Anchura auto en divs</title>
<style type="text/css">
div {
width: auto;
background: #FFFFFF;
color: #DD9911;
}
</style>
</head>
<body>
<div>Texto de color en fondo blanco</div>
</body>
</html>
podemos obtener el mismo efecto usando la notación hexadecimal abreviada:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/1999/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>Anchura auto en divs</title>
<style type="text/css">
div {
width: auto;
background: #FFF;
color: #D91;
}
</style>
</head>
<body>
<div>Texto de color en fondo blanco</div>
</body>
</html>
Sin embargo, antes de tratar de estilizar elementos o porciones individuales de elementos dentro de una página Web con CSS, necesitamos de algún recurso que nos permita separar e identificar unívocamente tales elementos, porque de lo contrario nos tendríamos que conformar con tener que estilizar toda la página completa así como todas las cabeceras así como todas las tablas y todos los párrafos de texto que haya de la misma manera, algo que no deseamos. Con esto en mente, fueron creados dos atributos nuevos para las etiquetas HTML. CSS permite la creación de reglas basadas en dos atributos optativos de HTML: class e id. Cada uno de estos atributos puede servir como la parte selectora de una regla CSS. Estos dos atributos son de amplia acción, y se pueden usar en elementos HTML tales como las etiquetas de párrafo <p> o las etiquetas de alcance de acción <span> o las etiquetas de división (separación de elementos) <div>.
Para poder establecer una distinción entre los distintos elementos que haya en una página Web, podemos recurrir a las etiquetas de división <div> para separar el texto completo que haya en una página Web subdividiéndolo en porciones separadas e inconfundibles (bueno, de hecho también podemos hacerlo con las etiquetas de párrafo <p>). En los últimos dos ejemplos que vimos arriba, ya hicimos uso de la etiqueta <div> para separar e identificar texto puesto dentro del cuerpo <body> del documento. Sin embargo, recurriendo al atributo class podemos llegar mucho más lejos, ya que podemos identificar unívocamente varias porciones de texto con un nombre que nosotros le vayamos poniendo a nuestro antojo a cada porción de texto. La sintaxis del identificador, puesto como atributo dentro de la etiqueta <div>, es la siguiente:
<div class="..."> ... </div>
Pero además del atributo class, podemos usar otro atributo dentro de una etiqueta <div>, el atributo de identificación id, con el cual podemos especificar e identificar también alguna porción de texto de una forma específica, como lo muestra el siguiente ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/1999/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>Identificadores para divs</title>
</head>
<body>
<div id="logicadigital">
<h1>Fundamentos de Lógica Digital</h1>
<p>Introducción a la teoría de los circuitos lógicos</p>
<div class="combinatorica">
<h2>Las tres funciones lógicas básicas</h2>
<p>Los circuitos AND, OR y NOT</p>
</div>
<div class="combinatorica">
<h2>El mapa de Karnaugh</h2>
<p>Los minterms y los maxterms</p>
</div>
</div>
</body>
</html>
El atributo de clase class es usado para definir un grupo relacionado de elementos HTML en una página, y en un contexto CSS significa que a tales elementos se les aplican las mismas reglas de estilo. Como vimos en el ejemplo dado arriba, para crear una clase simplemente le damos un nombre (evítese el usar guiones bajos, puntos, y otros caracteres no-alfanuméricos al darles nombres a las clases) poniendo dicho nombre ya sea bajo comillas sencillas o comillas dobles, como en el siguiente código en donde damos nombres de clase tanto a un elemento <div> como a un elemento de cabecera <h> como a un elemento de párrafo <p> como a un elemento <span>:
<div class="P1"><h2 class="T2">Programa de lanzamientos</h2><p class="S3">El siguiente lanzamiento está programado para el<span class="T2 L4">15 de junio de 2016</span></p></div>
En este ejemplo, el elemento <div> forma parte de la clase P1, mientras que los elementos <h2> y <span> ambos forman parte de la clase T2 (de acuerdo al nombre que se les dió como atributo de clase). La parte <p> forma parte de la clase S3, mientras que el elemento <span> es también parte de la clase L4.
Una vez que una clase ha sido definida en el HTML, puede ser usada como selector de clase en CSS. Los selectores de clase son simbolizados mediante un punto (período) puesto inmediatamente antes del nombre de la clase, por ejemplo:
.T2 { color: magenta; }
.S3 { font-family: verdana; }
Podemos combinar un selector de elemento con un selector de clase, y el resultado selecciona únicamente aquellos miembros de la clase que pertenecen a tal elemento en particular (esto es, selecciona únicamente aquellos miembros miembros de la clase que son de tal elemento en particular). Para lograr esto, basta con anteponer directamente el nombre del elemento al punto (período) tras lo cual se escribe el nombre de la clase, por ejemplo:
span.T2 {font-size: small }
p.S3 {color: blue; }
El primer ejemplo es una referencia a todos los elementos <span> que haya dentro de la página Web que sean de clase T2, el segundo ejemplo es una referencia a todos los elementos <p> que haya dentro de la página Web que sean de la clase S3.
Podemos combinar también varias clases dentro de una misma regla CSS para seleccionar únicamente aquellos elementos que tengan aquellas clases enlistadas, para lo cual basta con separar las clases con un punto (período) como lo muestra el siguiente ejemplo:
T2.L4 { font-family: helvetica; }
En este caso, el selector es “T2.L4”. Esta regla selecciona (aunque no directamente) al elemento <span> que forma parte tanto de la clase T2 como de la clase L4.
Se había visto arriba que además de class hay otro atributo optativo de HTML, el atributo id. Este atributo es semejante al atributo de clase class (aunque de alcance mucho más limitado, ya que únicamente una etiqueta en la página Web puede tener un id con cierto nombre, y es usado para identificar en forma unívoca al elemento HTML referenciado). La diferencia entre ambos atributos debe ser clara en todo momento: un selector id identifica en forma unívoca una parte de la página, mientras que un selector class identifica etiquetas específicas como parte de un conjunto que ha sido definido.
La forma de simbolizar un selector que hace uso del atributo id es mediante el símbolo del numeral (#) en lugar del símbolo del punto (.), lo cual enfatizaremos de la siguiente manera:
Para definir un selector cuyo nombre completo deriva de una etiqueta HTML (como <div>) usando el atributo class, se precede el nombre del atributo con el símbolo de punto o período (.)
Para definir un selector cuyo nombre completo deriva de una etiqueta HTML (como <div>) usando el atributo id, se precede el nombre con el símbolo de numeral (#).
En pocas palabras::
| Si se usó: | antepóngase: |
| id | # |
| class | . |
De este modo, podemos llegar a tener selectores del tipo id y class como en los siguientes ejemplos:
#explicacion { font-size: large; }
.teorema { color: blue; }
De este modo, leyendo selectores como los dos anteriores, podemos saber el tipo al que pertenece el atributo empleado con el nombre, ya sea el tipo “id” o el tipo “class”.
Aunque no sea obvio al principio, podemos asignarle tanto un nombre de clase class como un identificador id a un mismo elemento, por ejemplo:
<p id='nowrap' class='ejemplo'>
Daremos un ejemplo aplicado de esto último, aprovechando la oportunidad para introducir al lector a la propiedad CSS white-space, la cual como se ve puede tener los valores “pre” y “no-wrap”:
<!DOCTYPE html PUBLIC "-W3C//DTD XHTML 1.0 Stric//EN"
"http://www.w3.org/TR/xhmtl1/DTD/xhml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhml' xml:lang='en'>
<head>
<title>La propiedad white-space en acción</title>
<style type='text/css'>
body {
font: 14px sans-serif;
}
p {
padding: 5px;
}
p#pre {
white-space: pre;
}
p#nowrap {
white-space: nowrap;
}
p.ejemplo {
background: lightyellow;
border: 2px double red;
}
</style>
</head>
<body>
<h3>La propiedad white-space en acción</h3>
<p>
En este ejemplo comprobamos el efecto de una propiedad CSS para controlar la manera en
la cual son manejados los espacios en blanco en el código fuente. Cuando se usa la
palabra clave <i>pre</i> asignándola como valor a la propiedad del espacio en blanco
(white-space),todos los espacios en blanco e inclusive los saltos de línea son
preservados, como lo demuestra el siguiente párrafo.
</p>
<p id='pre' class='ejemplo'>
Entre muchas de estas palabras hay espacios en blanco que son
son respetados y que no son eliminados como acostumbran hacerlo
los navegadores al actuar sobre el código fuente HTML. También los
saltos de línea en el código fuente HTML original son respetados sin
necesidad de tener que poner etiquetas HTML para ordenar los
saltos de línea.
</p>
<p>
Otra cosa que podemos hacer es impedir que el texto se enrolle automáticamente (el
enrollamiento ocurre cuando al llegar a un borde derecho el texto es puesto en
forma automática en la siguiente línea)con la palabra clave <i>no-wrap</i> asignándola
como valor a la propiedad del espacio en blanco (white-space), como lo demuestra el
siguiente párrafo:
</p>
<p id='nowrap' class='ejemplo'>
Este es un párrafo que contiene una línea de texto que no será enrollada, no será continuada hacia una línea nueva.
O sea que seguirá escribiéndose hacia la derecha sobrepasándose el borde derecho de la ventana del navegador.
</p>
</body>
</html>
PROBLEMA: Pasar el código HTML anterior a un bloc de notas y guardar el texto bajo algún nombre de archivo como “whitespace.html”, abriendo dicho archivo con un navegador habilitado con capacidades CSS.
Además de los selectores del tipo “id” y “class”, CSS también define un selector universal, el cual actúa sobre todas las etiquetas y todo el contenido que haya dentro de una página Web. El selector universal está representado mediante un simple asterisco (*), como lo muestra el siguiente ejemplo:
* { color: magenta; }
Si se está escribiendo una regla que usa el selector universal, y hay algo más a dicha regla, como un selector id o class, se puede dejar fuera el asterisco. De hecho, la forma general de escribir los selectores de clase es simplemente un caso especial del selector universal con el asterisco omitido. Esto significa que las siguientes dos reglas de selección son equivalentes:
*.ejemplo { color: brown; }
.ejemplo { color: brown; }
El amplio surtido de navegadores que han sido distribuidos en diferentes versiones y que se encuentran instalados en cada máquina, así como la variedad de normas en existencia así como las combinaciones posibles de las mismas (HTML 2.0, HTML 3.2, HTML 4.01, HTML 5, CSS1, CSS2, CSS3) hacen que no sea cosa fácil para un programador Web el saber cómo será mostrada una página Web en todas las máquinas conectadas a Internet, y ni siquiera el saber en qué porcentajes de qué plataformas aparecerá desplegada la página de acuerdo a la intención original del programador. Una cosa que puede ayudar es el recurrir a lo que se conoce como un validador, un sitio en el cual el programador puede empastar el domicilio Web de su página ya terminada y el cual visitará dicho domicilio y someterá su trabajo a un examen minucioso y riguroso. Si el validador no encuentra todo en conformidad, así se lo hará saber al programador Web, pero si hay cosas que no están en conformidad con cierto estandard, también dará sus notas reprobatorias (someterse a la revisión de estos sitios es como someterse a un examen de conocimientos con un maestro perfeccionista y riguroso, haciéndole ver a uno su amplia ignorancia; inclusive programadores Web con amplia experiencia en su campo descubren asombrados que sus trabajos no son tan perfectos como ellos creían cuando someten sus creaciones a uno de tales validadores). Entre los validadores de mayor uso se pueden encontrar los siguientes:
http://validator.w3.org
http://tidy.sourceforge.net
http://www.htmlhelp.com/tools/validator
http://www.htmlvalidator.com
PROBLEMA: Tómese el domicilio URL de tres sitios Web de amplio uso, por ejemplo:
1) Una página de Wikipedia:
http://es.wikipedia.org/wiki/Vector
2) La página principal de búsqueda de Google:
www.google.com
3) La página principal de Yahoo:
www.yahoo.com
y sométase cada una de dichas páginas a un validador que certifique la conformidad de dichas páginas a las convenciones HTML y CSS en vigor. ¿Cuáles de dichas páginas cumplen con todos los requerimientos?
PROBLEMA: Elabórese en un bloc de notas una página Web que incorpore algo de HTML, algo de CSS, y algo de JavaScript, y remítase dicho texto a un validador que certifique qué tan bien fue elaborada la página.
Al terminar la primera década del tercer milenio, había ya tres normas distintas de CSS:
a) CSS Nivel 1 (CSS1), oficializada el 17 de diciembre de 1996
b) CSS Nivel 2 (CSS2), oficializada el 12 de mayo de 1998
c) CSS Nivel 3 (CSS3)
De este modo, al igual que una sucesión sucesiva de versiones de HTML que van desde el HTML2 hasta el HTML5, a las cuales se les suma el XHTML con sus propias reglas, además de que se le ha sumado el lenguaje de programación JavaScript que está integrado en forma nativa a varios navegadores junto con el lenguaje Java (el cual tiene que ser descargado por separado al no estar integrada en forma predeterminada la Máquina Virtual Java a cada navegador), se tenían ya tres versiones distintas de CSS al formalizarse HTML5. De este modo, la tendencia por darle una mayor flexibilidad y una cantidad mayor de opciones a los autores de páginas Web ha ido en contra de la esencia simple del primer HTML que se usaba en los primeros navegadores Mosaic y Netscape Navigator, y el cual posibilitaba que cualquiera con conocimientos mínimos y con un conocimiento esencial de las etiquetas HTML, que no eran muchas, pudiera publicar sus trabajos compartiéndolos con otros en Internet. Y la cosa se pone aún más divertida con la aparición de nuevos lenguajes y convenciones de programación para ser utilizados exclusivamente en el desarrollo de páginas Web con CSS, entre las cuales los nuevos lenguajes de mayor prominencia en un principio han sido SASS, un lenguaje de hoja de estilos, y LESS, los cuales son en realidad preprocesadores que cuyo objetivo final es permitir la creación de código CSS de una manera limplia y estructurada, y los cuales aumentan en forma explosiva los volúmenes de material que hay que estudiar y aprender para poder estar al día tan sólo en lo que concierne a CSS. Hay quienes han manifestado ya su preocupación de que, de seguir esta tendencia, no faltará mucho para que llegue el momento en el que para publicar cualquier trabajo en la World Wide Web se requerirá un doctorado en artes gráficas o una maestría en ciencias computacionales, arrebatándole con ello a Internet su principal atractivo que era su sencillez de uso en lo que a la elaboración de código fuente para páginas Web respecta. Efectivamente, podemos continuar evolucionando hasta llegar a HTML300 y hasta CSS500, teniendo una cantidad fabulosa y casi increíble de opciones para elaborar y publicar trabajos, pero esto llegaría a un costo que se antoja extraordinario. Naturalmente, esto supone que por lo menos algunos de los navegadores de mayor uso (Firefox, Chrome, Opera, etc.) tratarán de estar al día manteniendo obediencia y conformidad con todas las reglas y clásulas que los innovadores del consorcio W3C les quieran echar encima, lo cual aún está por verse, porque ni siquiera en la actualidad hay algo que se pueda considerar como una aceptación universal de las convenciones que han sido creadas. Y esto sin contar con el hecho de que hay mucho código “viejo” que no puede estar siendo puesto al día todos los días sin parar simplemente por el hecho de que la cantidad de información publicada en la Web es casi astronómica, ello sin contar con el hecho de que los autores de muchas páginas Web que aún están en circulación ya están muertos y está más allá de sus posibilidades el poder seguirles dando mantenimiento y actualización a sus creaciones de acuerdo a lo que ordene la World Wide Web Consortium.
Habíamos comenzado esta entrada con un ejemplo en el cual se usó la etiqueta CSS <span> junto con el atributo de estilo “style”:
<span style="background-color: #FFFF00"> ... </span>
La etiqueta CSS <span> es una etiqueta que usada por sí sola (sin el atributo “style”) no tiene absolutamente ningún efecto sobre el texto que encapsula. Existe única y exclusivamente para ser asociada con una regla de estilo. Esto implica que:
<p>Este es un <span>ejemplo del uso</span> de la etiqueta span</p>.
es interpretado por el navegador igual que como si fuese:
<p>Este es un ejemplo del uso de la etiqueta span</p>.
Pero apareada con “style” y con una o varias reglas de estilo, la etiqueta <span> puede modificar lo que es encapsulado para ser estilizado (de cualquier modo, el atributo “style” puede ser usado con prácticamente cualquier etiqueta de HTML y no únicamente con <span>).
La conclusión a la que debe de haber llegado el lector en este punto es la siguiente: style puede ser usada como un atributo para meter estilización dentro de una línea de texto a una parte seleccionada del texto, o puede ser usada por cuenta propia como una etiqueta para meter estilización a los elementos de una página tales como párrafos completos. En el primer caso, hablamos de una estilización enlínea (online), mientras que en el segundo caso hablamos de una estilización CSS incrustada (embedded) dentro de una página Web. La característica principal de una estilización enlínea es la ausencia de un selector; al usar el atributo enlínea “style” el selector no es necesario, puesto que el estilo es aplicado directamente a la etiqueta en la que es usado el atributo “style”. Y hay una tercera variante en la cual sacamos fuera de la página HTML los estilos incrustados (no los estilos enlínea) para ponerlos en un archivo independiente (como “estilos.css”), para lo cual usamos la etiqueta <link> que permite aplicarle una hoja externa de estilos a una página HTML. La etiqueta <link> es puesta dentro de la sección <head> del HTML como en el siguiente ejemplo:
<head><title>La Teoría de la Relatividad</title><link type='text/css' rel='stylesheet' href='estilos.css' /></head>
en donde la hoja de estilos invocada será el archivo “estilos.css”, lo cual nos permite hablar de tal archivo como una verdadera “hoja de estilos” y nos permite definir una Hoja de Estilos como una colección de reglas CSS:
Esto tiene la innegable ventaja de que para cambiarle todos los estilos a una página compleja no es necesario trabajar sobre el código HTML completo, basta con definir otra hoja de estilos (como “estilos2.css”) y hacer el cambio de enlace hacia la misma.
En este punto, tal vez haya surgido una interrogante en la mente del lector. Si a un párrafo completo se le aplica cierta estilización mediante un selector que afecta a todo el contenido del párrafo, y dentro del párrafo en algún lugar del mismo se aplica una estilización diferente enlínea, ¿cuál de las dos estilizaciones es la que tomará procedencia en ese lugar del párrafo en donde se aplicó la estilización enlínea? La interna, la estilización enlínea, desde luego, y en esto consiste la cascada de la que tanto se habla, que ahora definimos formalmente como el método mediante el cual CSS determina cuál de los varios valores conflictivos en las propiedades CSS deben tomar precedencia; entre más específica sea una regla, tanto mayor será la prioridad que se le concede.
Con el atributo “style” en una etiqueta <span>, podemos incluír no una sino varias declaraciones de estilo. Apareada con el atributo “style”, la etiqueta <span> puede reemplazar varias de las etiquetas usadas previamente en el HTML “viejo”, empezando con la propiedad text-decoration que puede ser usada para especificar qué tipo de decoración le podemos aplicar a un texto encapsulado dentro de la etiqueta <span> que lleva a cabo la decoración. Los valores para esta propiedas son:
underline (subrayado)
overline (rayado horizontal sobre los caracteres)
line-through (línea-a-través de los caracteres)
blink (parpadeo)
A continuación se presentan unos ejemplos de decoración CSS enlínea del texto:
<p>He aquí <span style="text-decoration: underline">texto subrayado</span>.</p>
<p>He aquí <span style="text-decoration: overline">texto sobrerayado</span>.</p>
<p>He aquí <span style="text-decoration: line-through">texto atravesado con línea</span>.</p>
<p>He aquí <span style="text-decoration: blinking">texto parpadeante</span>.</p>
Cuando queremos modificar el tipo de fuente usada para el texto, usamos las llamadas propiedades de fuente usando principalmente font-style y font-weight. De este modo, podemos resaltar texto en letras oblicuas o itálicas de la siguiente manera:
<p>He aquí <span style="font-style: oblique">texto oblicuo</span>.</p>
<p>He aquí <span style="font-style: italic">texto en itálicas</span>.</p>
Lo anterior en realidad no es diferente de lo que se podía previamente con etiquetas HTML mucho más sencillas. Una diferencia CSS la encontramos en las letras resaltadas en negritas con la propiedad font-weight, ya que CSs nos permite darle tonalidades de gris a las letras negritas:
<p>He aquí <span style="font-weight: bold">texto en negritas</span>.</p>
<p>He aquí <span style="font-weight: bolder">texto en negritas más obscuras</span>.</p>
<p>He aquí <span style="font-weight: lighter">texto en negritas más claras</span>.</p>
<p>He aquí <span style="font-weight: 700">texto en grisáceas obscuras</span>.</p>
En el último ejemplo, se usan valores que pueden ir de 100 a 900, en unidades de 100 en 100.
Normalmente, los navegadores (o mejor dicho, el sistema operativo de la plataforma) le dan a cada letra una anchura diferente para mejor estética, contrariamente a lo que ocurre en los blocs de notas en donde a cada letra se le dá la misma anchura. Podemos obligar que a cada letra se le dé la misma anchura dándole el valor de “monospace” a la propiedad font-family:
<p><span style="font-family: monospace">Esto es texto monoespaciado</span></p>.
Algo que ofrecen muchos procesadores de palabras es la capacidad para poder “alinear” todo un párrafo de texto ya sea hacia la izquierda, hacia la derecha, hacia ambos lados (justificación de texto) o centrarlo. Podemos lograr lo mismo con la propiedad CSS align como se hace en los siguientes ejemplos:
<div style="text-align: left">Texto alineado hacia la izquierda.</div>
<div style="text-right: left">Texto alineado hacia la derecha.</div>
<div style="text-align: center">Texto centrado.</div>
<div style="text-align: justify">Este es texto justificado.</div>
Con lo que hemos visto hasta aquí, debe ser claro que lo más importante en el estudio de las Hojas de Estilos en Cascada son las propiedades y los valores que pueden tomar las propiedades. En ello radica el secreto y la potencia de todo lo que es el CSS. Tomar conocimiento y control sobre lo que es el CSS requiere familiarizarse con las propiedades CSS y sus valores.
