Como aclaramos anteriormente, la nueva especificación de HTML (HTML5) no describe solo los nuevos elementos HTML o el lenguaje mismo. La web demanda diseño y funcionalidad, no solo organización estructural o definición de secciones. En este nuevo paradigma, CSS y HTML se presentan junto con Javascript como un único instrumento integrado.
La función de cada tecnología ya ha sido explicada en capítulos previos, así como los nuevos elementos HTML responsables de la estructura del documento. Ahora es momento de analizar CSS, su relevancia dentro de esta unión estratégica y su influencia sobre la presentación de documentos HTML.
Oficialmente, CSS nada tiene que ver con HTML5. CSS no es parte de la especificación y nunca lo fue. Este lenguaje es, de hecho, un complemento desarrollado para superar las limitaciones y reducir la complejidad de HTML.
Al comienzo, atributos dentro de las etiquetas HTML proveían estilos esenciales para cada elemento, pero a medida que el lenguaje evolucionó, la escritura de códigos se volvió más compleja y HTML por sí mismo no pudo más satisfacer las demandas de diseñadores. En consecuencia, CSS pronto fue adoptado como la forma de separar la estructura de la presentación. Desde entonces, CSS ha crecido y ganado importancia, pero siempre desarrollado en paralelo, enfocado en las necesidades de los diseñadores y apartado del proceso de evolución de HTML.
La versión 3 de CSS sigue el mismo camino, pero esta vez con un mayor compromiso. La especificación de HTML5 fue desarrollada considerando CSS a cargo del diseño. Debido a esta consideración, la integración entre HTML y CSS es ahora vital para el desarrollo web y esta es la razón por la que cada vez que mencionamos HTML5 también estamos haciendo referencia a CSS3, aunque oficialmente se trate de dos tecnologías completamente separadas.
Incorporaciones en CSS3
En este momento las nuevas características incorporadas en CSS3 están siendo implementadas e incluidas junto al resto de la especificación en navegadores compatibles con HTML5. En este capítulo, vamos a estudiar conceptos básicos de CSS y las nuevas técnicas de CSS3 ya disponibles para presentación y estructuración. También aprenderemos cómo utilizar los nuevos selectores y pseudoclases que hacen más fácil la selección e identificación de elementos HTML.
Conceptos básicos: CSS es un lenguaje que trabaja junto con HTML para proveer estilos visuales a los elementos del documento, como tamaño, color, fondo, bordes, etc…
IMPORTANTE: En este momento las nuevas incorporaciones de CSS3 están siendo implementadas en las últimas versiones de los navegadores más populares, pero algunas de ellas se encuentran aún en estado experimental. Por esta razón, estos nuevos estilos deberán ser precedidos por prefijos tales como –moz- o -webkit- para ser efectivamente interpretados. Analizaremos este importante asunto más adelante.
Estilos y estructura en CSS y HTML
A pesar de que cada navegador garantiza estilos por defecto para cada uno de los elementos HTML, estos estilos no necesariamente satisfacen los requerimientos de cada diseñador. Normalmente se encuentran muy distanciados de lo que queremos para nuestros sitios webs. Diseñadores y desarrolladores a menudo deben aplicar sus propios estilos para obtener la organización y el efecto visual que realmente desean.
IMPORTANTE: En esta parte del capítulo vamos a revisar estilos CSS y explicar algunas técnicas básicas para definir la estructura de un documento. Si usted ya se encuentra familiarizado con estos conceptos, siéntase libre de obviar las partes que ya conoce.
Elementos block
Con respecto a la estructura, básicamente cada navegador ordena los elementos por defecto de acuerdo a su tipo: block (bloque) o inline (en línea). Esta clasificación está asociada con la forma en que los elementos son mostrados en pantalla.
- Elementos block son posicionados uno sobre otro hacia abajo en la página
- Elementos inline son posicionados lado a lado, uno al lado del otro en la misma línea y sin ningún salto de línea. (A menos que ya no haya más espacio horizontal para ubicarlos).
Casi todos los elementos estructurales en nuestros documentos serán tratados por los navegadores como elementos block por defecto. Esto significa que cada elemento HTML que representa una parte de la organización visual (por ejemplo, <section>, <nav>, <header>, <footer>, <div>) será posicionado debajo del anterior.
En el Capítulo 1 creamos un documento HTML con la intención de reproducir un sitio web tradicional. El diseño incluyó barras horizontales y dos columnas en el medio. Debido a la forma en que los navegadores muestran estos elementos por defecto, el resultado en la pantalla está muy lejos de nuestras expectativas.
Tan pronto como el archivo HTML con el código del Listado 1-18, Capítulo 1, es abierto en el navegador, la posición errónea en la pantalla de las dos columnas definidas por los elementos <section> y <aside> es claramente visible. Una columna está debajo de la otra en lugar de estar a su lado, como correspondería. Cada bloque (block) es mostrado por defecto tan ancho como sea posible, tan alto como la información que contiene y uno sobre otro.
Modelos de caja en CSS y HTML
Para aprender cómo podemos crear nuestra propia organización de los elementos en pantalla, debemos primero entender cómo los navegadores procesan el código HTML. Los navegadores consideran cada elemento HTML como una caja. Una página web es en realidad un grupo de cajas ordenadas siguiendo ciertas reglas. Estas reglas son establecidas por estilos provistos por los navegadores o por los diseñadores usando CSS.
CSS tiene un set predeterminado de propiedades destinados a sobrescribir los estilos provistos por navegadores y obtener la organización deseada. Estas propiedades no son específicas, tienen que ser combinadas para formar reglas que luego serán usadas para agrupar cajas y obtener la correcta disposición en pantalla. La combinación de estas reglas es normalmente llamada modelo o sistema de disposición. Todas estas reglas aplicadas juntas constituyen lo que se llama un modelo de caja.
Existe solo un modelo de caja que es considerado estándar estos días, y muchos otros que aún se encuentran en estado experimental. El modelo válido y ampliamente adoptado es el llamado Modelo de Caja Tradicional, el cual ha sido usado desde la primera versión de CSS.
Aunque este modelo ha probado ser efectivo, algunos modelos experimentales intentan superar sus deficiencias, pero la falta de consenso sobre el reemplazo más adecuado aún mantiene a este viejo modelo en vigencia y la mayoría de los sitios webs programados en HTML5 lo continúan utilizando.
Conceptos básicos sobre estilos
Antes de comenzar a insertar reglas CSS en nuestro archivo de estilos y aplicar un modelo de caja, debemos revisar los conceptos básicos sobre estilos CSS que van a ser utilizados en el resto del libro.
Aplicar estilos a los elementos HTML cambia la forma en que estos son presentados en pantalla. Como explicamos anteriormente, los navegadores proveen estilos por defecto que en la mayoría de los casos no son suficientes para satisfacer las necesidades de los diseñadores. Para cambiar esto, podemos sobrescribir estos estilos con los nuestros usando diferentes técnicas.
Nociones básicas: En este libro encontrará solo una introducción breve a los estilos CSS. Solo mencionamos las técnicas y propiedades que necesita conocer para entender los temas y códigos estudiados en próximos capítulos. Si considera que no tiene la suficiente experiencia en CSS y necesita mayor información visite nuestro sitio web y siga los enlaces correspondientes a este capítulo.
Hágalo usted mismo: Dentro de un archivo de texto vacío, copie cada código HTML estudiado en los siguientes listados y abra el archivo en su navegador para comprobar su funcionamiento. Tenga en cuenta que el archivo debe tener la extensión.html para ser abierto y procesado correctamente.
Estilos en línea
Una de las técnicas más simples para incorporar estilos CSS a un documento HTML es la de asignar los estilos dentro de las etiquetas por medio del atributo style. El Listado 2-1 muestra un documento HTML simple que contiene el elemento <p> modificado por el atributo style con el valor font-size: 20px. Este estilo cambia el tamaño por defecto del texto dentro del elemento <p> a un nuevo tamaño de 20 pixeles.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este es el título del documento</title>
</head>
<body>
<p style=”font-size: 20px”>Mi texto</p>
</body>
</html>
Usar la técnica demostrada anteriormente es una buena manera de probar estilos y obtener una vista rápida de sus efectos, pero no es recomendado para aplicar estilos a todo el documento. La razón es simple: cuando usamos esta técnica, debemos escribir y repetir cada estilo en cada uno de los elementos que queremos modificar, incrementando el tamaño del documento a proporciones inaceptables y haciéndolo imposible de mantener y actualizar.
Solo imagine lo que ocurriría si decide que en lugar de 20 pixeles el tamaño de cada uno de los elementos <p> debería ser de 24 pixeles. Tendría que modificar cada estilo en cada etiqueta <p> en el documento completo.
Estilos embebidos
Una mejor alternativa es insertar los estilos en la cabecera del documento y luego usar referencias para afectar los elementos HTML correspondientes:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<style>
p { font-size: 20px }
</style>
</head>
<body>
<p>Mi texto</p>
</body>
</html>
Listad
El elemento <style> (mostrado en el Listado 2-2) permite a los desarrolladores agrupar estilos CSS dentro del documento. En versiones previas de HTML era necesario especificar qué tipo de estilos serían insertados. En HTML5 los estilos por defecto son CSS, por lo tanto no necesitamos agregar ningún atributo en la etiqueta de apertura <style>.
El código resaltado del Listado 2-2 tiene la misma función que la línea de código del Listado 2-1, pero en el Listado 2-2 no tuvimos que escribir el estilo dentro de cada etiqueta <p> porque todos los elementos <p> ya fueron afectados. Con este método, reducimos nuestro código y asignamos los estilos que queremos a elementos específicos utilizando referencias. Veremos más sobre referencias en este capítulo.
Archivos externos
Declarar los estilos en la cabecera del documento ahorra espacio y vuelve al código más consistente y actualizable, pero nos requiere hacer una copia de cada grupo de estilos en todos los documentos de nuestro sitio web. La solución es mover todos los estilos a un archivo externo y luego utilizar el elemento <link> para insertar este archivo dentro de cada documento que los necesite.
Este método nos permite cambiar los estilos por completo simplemente incluyendo un archivo diferente. También nos permite modificar o adaptar nuestros documentos a cada circunstancia o dispositivo, como veremos al final del libro.
En el Capítulo 1, estudiamos la etiqueta <link> y cómo utilizarla para insertar archivos con estilos CSS en nuestros documentos. Utilizando la línea <link rel=”stylesheet” href=”misestilos.css”> le decimos al navegador que cargue el archivo misestilos.css porque contiene todos los estilos necesitados para presentar el documento en pantalla.
Esta práctica fue ampliamente adoptada por diseñadores que ya están trabajando con HTML5. La etiqueta <link> referenciando el archivo CSS será insertada en cada uno de los documentos que requieren de esos estilos:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<p>Mi texto</p>
</body>
</html>
Hágalo usted mismo: De ahora en adelante agregaremos estilos CSS al archivo llamado misestilos.css. Debe crear este archivo en el mismo directorio (carpeta) donde se encuentra el archivo HTML y copiar los estilos CSS en su interior para comprobar cómo trabajan.
Conceptos básicos: Los archivos CSS son archivos de texto comunes. Al igual que los archivos HTML, puede crearlos utilizando cualquier editor de texto como el Bloc de Notas de Windows, por ejemplo.
Referencias en CSS y HTML
Almacenar todos nuestros estilos en un archivo externo e insertar este archivo dentro de cada documento que lo necesite es muy conveniente, sin embargo no podremos hacerlo sin buenos mecanismos que nos ayuden a establecer una específica relación entre estos estilos y los elementos del documento que van a ser afectados.
Cuando hablábamos sobre cómo incluir estilos en el documento, mostramos una de las técnicas utilizadas a menudo en CSS para referenciar elementos HTML. En el Listado 2-2, el estilo para cambiar el tamaño de la letra referenciaba cada elemento <p> usando la palabra clave p. De esta manera el estilo insertado entre las etiquetas <style> referenciaba cada etiqueta <p> del documento y asignaba ese estilo particular a cada una de ellas.
Existen varios métodos para seleccionar cuáles elementos HTML serán afectados por las reglas CSS:
- Referencia por la palabra clave del elemento
- Referencia por el atributo ID
- Referenciación por el atributo class.
Más tarde veremos que CSS3 es bastante flexible a este respecto e incorpora nuevas y más específicas técnicas para referenciar elementos, pero por ahora aplicaremos solo estas tres.
Referenciando con palabra clave
Al declarar las reglas CSS utilizando la palabra clave del elemento afectamos cada elemento de la misma clase en el documento. Por ejemplo, la siguiente regla cambiará los estilos de todos los elementos <p>:
p { font-size: 20px }
Esta es la técnica presentada previamente en el Listado 2-2. Utilizando la palabra clave p al frente de la regla le estamos diciendo al navegador que esta regla debe ser aplicada a cada elemento <p> encontrado en el documento HTML. Todos los textos envueltos en etiquetas <p> tendrán el tamaño de 20 pixeles.
Por supuesto, lo mismo funcionará para cualquier otro elemento HTML. Si especificamos la palabra clave span en lugar de p, por ejemplo, cada texto entre etiquetas <span> tendrá un tamaño de 20 pixeles:
span { font-size: 20px }
La regla en el Listado 2-6 será aplicada al elemento HTML identificado con el atributo id=”texto1”. Ahora nuestro código HTML lucirá de esta manera:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<p id=”texto1”>Mi texto</p>
</body>
</html>
El resultado de este procedimiento es que, cada vez que hacemos una referencia usando el identificador texto1 en nuestro archivo CSS, el elemento con ese valor de id será modificado. No obstante, el resto de los elementos <p>, o cualquier otro elemento en el mismo documento, no serán afectados.
Esta es una forma extremadamente específica de referenciar un elemento y es normalmente utilizada para elementos más generales, como etiquetas estructurales. El atributo ID y su especificidad es de hecho más apropiado para referencias en Javascript, como veremos en próximos capítulos.
Referenciando con el atributo class
La mayoría del tiempo, en lugar de utilizar el atributo id para propósitos de estilos es mejor utilizar class. Este atributo es más flexible y puede ser asignado a cada elemento HTML en el documento que comparte un diseño similar:
.texto1 { font-size: 20px }
Para trabajar con el atributo class, debemos declarar la regla CSS con un punto antes del nombre. La ventaja de este método es que insertar el atributo class con el valor texto1 será suficiente para asignar estos estilos a cualquier elemento que queramos:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<p class=”texto1”>Mi texto</p>
<p class=”texto1”>Mi texto</p>
<p>Mi texto</p>
</body>
</html>
Los elementos <p> en las primeras dos líneas dentro del cuerpo del código en el Listado 2-9 tienen el atributo class con el valor texto1. Como dijimos previamente, la misma regla puede ser aplicada a diferentes elementos en el mismo documento. Por lo tanto, estos dos primeros elementos comparten la misma regla y ambos serán afectados por el estilo del Listado 2-8. El último elemento <p> conserva los estilos por defecto otorgados por el navegador.
La razón por la que debemos utilizar un punto delante del nombre de la regla es que es posible construir referencias más complejas. Por ejemplo, se puede utilizar el mismo valor para el atributo class en diferentes elementos pero asignar diferentes estilos para cada tipo:
p.texto1 { font-size: 20px }
En el Listado 2-10 creamos una regla que referencia la clase llamada texto1 pero solo para los elementos de tipo <p>. Si cualquier otro elemento tiene el mismo valor en su atributo class no será modificado por esta regla en particular.
Referenciando con cualquier atributo
Aunque los métodos de referencia estudiados anteriormente cubren un variado espectro de situaciones, a veces no son suficientes para encontrar el elemento exacto. La última versión de CSS ha incorporado nuevas formas de referenciar elementos HTML. Uno de ellas es el Selector de Atributo. Ahora podemos referenciar un elemento no solo por los atributos id y class sino también a través de cualquier otro atributo:
p[name] { font-size: 20px }
La regla en el Listado 2-11 cambia solo elementos <p> que tienen un atributo llamado name. Para imitar lo que hicimos previamente con los atributos id y class, podemos también especificar el valor del atributo:
p[name=”mitexto”] { font-size: 20px }
Listado 2-12
Referenciando elementos <p> que tienen un atributo name con el valor mitexto, CSS3 permite combinar “=” con otros para hacer una selección más específica:
p[name^=”mi”] { font-size: 20px }
p[name$=”mi”] { font-size: 20px }
p[name*=”mi”] { font-size: 20px }
Si usted conoce Expresiones Regulares desde otros lenguajes como Javascript o PHP, podrá reconocer los selectores utilizados en el Listado 2-13. En CSS3 estos selectores producen similares resultados:
- La regla con el selector ^= será asignada a todo elemento <p> que contiene un atributo name con un valor comenzado en “mi” (por ejemplo, “mitexto”, “micasa”)
- Por su lado, la regla con el selector $= será asignada a todo elemento <p>, el cual contiene un atributo name con un valor finalizado en “mi” (por ejemplo “textomi”, “casami”)
- La regla con el selector *= será asignada a todo elemento <p>, que contiene un atributo name con un valor que incluye el texto “mi” (en este caso, el texto podría también encontrarse en el medio, como en “textomicasa”).
En estos ejemplos usamos el elemento <p>, el atributo name, y una cadena de texto al azar como “mi”. Sin embargo, la misma técnica puede ser utilizada con cualquier atributo y valor que necesitemos. Solo tiene que escribir los corchetes e insertar entre ellos el nombre del atributo y el valor que necesita para referenciar el elemento HTML correcto.
Referenciando con pseudoclases
CSS3 también incorpora nuevas pseudoclases que hacen la selección aún más específica.<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<div id="wrapper">
<p class="mitexto1">Mi texto1</p>
<p class="mitexto2">Mi texto2</p>
<p class="mitexto3">Mi texto3</p>
<p class="mitexto4">Mi texto4</p>
</div>
</body>
</html>
Miremos por un momento el nuevo código HTML del Listado 2-14. Contiene cuatro elementos <p> que, considerando la estructura HTML, son hermanos entre sí e hijos del mismo elemento <div>.
Usando pseudoclases podemos aprovechar esta organización y referenciar un elemento específico sin importar cuánto conocemos sobre sus atributos y el valor de los mismos:
p:nth-child(2){
background: #999999;
}
La adición de la pseudoclase
La pseudoclase es agregada usando dos puntos luego de la referencia y antes del su nombre. En la regla del Listado 2-15 referenciamos solo elementos <p>. Esta regla puede incluir otras referencias. Por ejemplo, podríamos escribirla como .miclase:nthchild(2) para referenciar todo elemento que es hijo de otro elemento y tiene el valor de su atributo class igual a miclase. La pseudoclase puede ser aplicada a cualquier tipo de referencia estudiada previamente.
La pseudoclase nth-child() nos permite encontrar un hijo específico. Como ya explicamos, el documento HTML del Listado 2-14 tiene cuatro elementos <p> que son hermanos. Esto significa que todos ellos tienen el mismo padre que es el elemento <div>.
Lo que esta pseudoclase está realmente indicando es algo como: “el hijo en la posición…” por lo que el número entre paréntesis será el número de la posición del hijo, o índice. La regla del Listado 2-15 está referenciando cada segundo elemento <p> encontrado en el documento.
Hágalo usted mismo: Reemplace el código en su archivo HTML por el del Listado 2-14 y abra el archivo en su navegador. Incorpore las reglas estudiadas en el Listado 2-15 dentro del archivo misestilos.css para comprobar su funcionamiento.
Usando este método de referencia podemos, por supuesto, seleccionar cualquier hijo que necesitemos cambiando el número de índice. Por ejemplo, la siguiente regla tendrá impacto sólo sobre el último elemento <p> de nuestra plantilla:
p:nth-child(4){
background: #999999;
}
Asignación de estilos
Como seguramente se habrá dado cuenta, es posible asignar estilos a todos los elementos creando una regla para cada uno de ellos:
*{
margin: 0px;
}
p:nth-child(1){
background: #999999;
}
p:nth-child(2){
background: #CCCCCC;
}
p:nth-child(3){
background: #999999;
}
p:nth-child(4){
background: #CCCCCC;
}
La primera regla del Listado 2-17 usa el selector universal “*” para asignar el mismo estilo a cada elemento del documento. Este nuevo selector representa cada uno de los elementos en el cuerpo del documento y es útil cuando necesitamos establecer ciertas reglas básicas. En este caso, configuramos el margen de todos los elementos en 0 pixeles para evitar espacios en blanco o líneas vacías como las creadas por el elemento <p> por defecto.
En el resto del código del Listado 2-17 usamos la pseudoclase nth-child() para generar un menú o lista de opciones que son diferenciadas claramente en la pantalla por el color de fondo.
Hágalo usted mismo: Copie el último código dentro del archivo CSS y abra eldocumento HTML en su navegador para comprobar el efecto.
Para agregar más opciones al menú, podemos incorporar nuevos elementos <p> en el código HTML y nuevas reglas con la pseudoclase nth-child() usando el número de índice adecuado. Sin embargo, esta aproximación genera mucho código y resulta imposible de aplicar en sitios webs con contenido dinámico. Una alternativa para obtener el mismo resultado es aprovechar las palabras clave odd y even disponibles para esta pseudoclase:
*{
margin: 0px;
}
p:nth-child(odd){
background: #999999;
}
p:nth-child(even){
background: #CCCCCC;
}
Completación de la lista
Ahora solo necesitamos dos reglas para crear la lista completa. Incluso si más adelante agregamos otras opciones, los estilos serán asignados automáticamente a cada una de ellas de acuerdo a su posición. La palabra clave odd para la pseudoclase nth-child() afecta los elementos <p> que son hijos de otro elemento y tienen un índice impar. La palabra clave even, por otro lado, afecta a aquellos que tienen un índice par.
Existen otras importantes pseudoclases relacionadas con esta última, como firstchild, last-child y only-child, algunas de ellas recientemente incorporadas. La pseudoclase first-child referencia solo el primer hijo, last-child referencia solo el último hijo, y only-child afecta un elemento siempre y cuando sea el único hijo disponible. Estas pseudoclases en particular no requieren palabras clave o parámetros, y son implementadas como en el siguiente ejemplo:
*{
margin: 0px;
}
p:last-child{
background: #999999;
}
Otra importante pseudoclase llamada not() es utilizada realizar una negación:
:not(p){
margin: 0px;
}
La regla del Listado 2-20 asignará un margen de 0 pixeles a cada elemento del documento excepto los elementos <p>. A diferencia del selector universal utilizado previamente, la pseudoclase not() nos permite declarar una excepción. Los estilos en la regla creada con esta pseudoclase serán asignados a todo elemento excepto aquellos incluidos en la referencia entre paréntesis.
En lugar de la palabra clave de un elemento podemos usar cualquier otra referencia que deseemos. En el próximo listado, por ejemplo, todos los elementos serán afectados excepto aquellos con el valor mitexto2 en el atributo class:
:not(.mitexto2){
margin: 0px;
}
