Previously, on The CubeBlog...
Parte XXI: Pseudo-clases y pseudo-elementos (2). Identificadores y clases (3)
Parte XXII: Selectores de atributos CSS. Instrucciones CSS varias (1)
¡Hola! Aquí estamos en el que será la última entrega de la primera parte del tutorial de desarrollo web. Porque sí, hoy con lo que aprendamos aquí cerramos por fin el HTML y CSS (la semana que viene sólo hablaremos un poco de lo que se viene con las nuevas versiones de ambos lenguajes) y podemos disponernos a comenzar con el lenguaje JavaScript. Supongo que recordaréis que la semana pasada el ejercicio fue libre, y de hecho, es el último ejercicio que tendremos hasta que comience el JavaScript, así que no va a tener ningún tipo de resolución (aunque si queréis hacerme llegar, de alguna manera, el ejercicio, para que lo revise, podéis contactarme a través de las redes sociales que muestro en el menú de la izquierda).
Bueno, como prometí la semana pasada, hoy terminaremos de ver algunas pequeñas pecularidades de CSS que nos pueden ser útiles. En primer lugar, vamos a ver la instrucción "float", cuyo objetivo es, como su nombre indica, hacer que la etiqueta a la que se le aplique "flote" alrededor del resto de etiquetas. ¿Extraño? Puede parecerlo, pero es algo que, realmente, solemos ver mucho. Sus valores posibles son simples: right, left o none (este último es el valor por defecto). Imaginemos que usamos este código:
img
{
float: right;
}
Ahora las imágenes de nuestro documento, en vez de aparecer, como hasta ahora, ocupando un hueco bastante difícil de cuadrar, simplemente se mostrarán en el texto como estais viendo mi avatar a la derecha de este texto. Algo bastante más cómodo.
Bien, y llegamos al último punto, uno que había prometido hace un par de entregas. De hecho, cuando expliqué los pseudo-elementos, en concreto los :before y :after. Esta es la instrucción content, cuyos valores empiezan ya a meternos en lo que aprenderemos a hacer poco: programación.
Los pseudo-elementos :before y :after, como recordarán, servían para introducir algo que aparecería antes o después de la etiqueta cada vez que la etiqueta apareciera. Para ello, necesitábamos esta instrucción content, en cuyo interior el otro día introducimos la palabra "Párrafo: ", pero en ella podemos introducir otros elementos. Vamos por pasos.
En primer lugar, como les digo, podemos introducir texto, de la forma tan simple que hemos visto. Sólo necesitamos introducir el texto que queramos mostrar entre comillas. Pero imaginemos que queremos, por ejemplo, una imagen. Lo que deberemos hacer será introducir lo siguiente:
p:before
{
content: url(http://img84.exs.cx/img84/8653/emealcubo4uh.jpg);
}
De esa manera, al comienzo de cada párrafo se introducirá la imagen que le hayan especificado, algo que también vimos en la anterior ocasión.
Una cosa curiosa de la instrucción content es que nos permite escribir automáticamente comillas, usando las instrucciones open-quote y close-quote. Veamos un ejemplo:
p:before
{
content: open-quote;
}
p:after
{
content: close-quote;
}
Con este sencillo código, todos los párrafos del documento estarán entre comillados, ya que en el pseudo-elemento :before le hemos dicho que abra unas comillas, y en el pseudo-elemento :after le hemos dicho que las cierre. En caso de que tengamos algún párrafo en el que no queramos entrecomillado podremos decirle:
p.sincomillas:before
{
content: no-open-quote;
}
p.sincomillas:after
{
content: no-close-quote;
}
Además, como también puede que queramos anular cualquier contenido para algún párrafo concreto, también podríamos usar el valor none.
p.sinvalores:before
{
content: none;
}
Al igual que en otras instrucciones CSS, cualquier valor que le demos en un puesto más bajo de la cascada, anulará los valores dados en los puntos superiores. Por ello, darle el valor none al content en los puestos más bajos de la cascada, anulará todo lo que trayera de atrás.
Otra curiosidad de la instrucción content es la posibilidad de que nos muestre el valor de un atributo de nuestra etiqueta. Por ejemplo, imaginad que tenemos el siguiente código:
<p id="parrafo">Esto es un párrafo.</p>
Como todos sabemos, su resultado sería:
Esto es un párrafo.
Y nunca sabríamos el contenido de su "id". Sin embargo, si añadimos este código CSS:
p:after
{
content: attr(id);
}
Su nuevo resultado sería:
Esto es un párrafo.parrafo
Aunque aquí no he usado esa instrucción (limitaciones de Blogger), ese es el resultado que, en principio, nos daría dicha instrucción, con la que le hemos dicho que al final de cada párrafo nos escriba el valor de su id.
El último de los valores que
content puede tener es, probablemente, el más complejo de todos, y que de hecho tiene un par de instrucciones asociadas: el contador. Precisamente este es el valor por el que dejé esta instrucción para el final, y por la que comento que tiene algo de parecido con la programación. Así que para explicarla empezaremos explicando las instrucciones
counter-reset y
counter-increment.
En primer lugar, cuando queramos incluir un contador para nuestro
content, en primer lugar deberemos decirle en qué momento queremos que el contador se resetee a 0. Por ejemplo, en caso de que queramos un contador que dure durante todo nuestro body, podremos hacer lo siguiente:
body
{
counter-reset: micontador;
}
De este modo le estamos diciendo al navegador que, en el momento en que aparezca la etiqueta "body" el contador "micontador" (cuyo nombre le he dado de forma completamente libre, viene a ser una "id" para el contador) se deberá resetear, o sea, ponerse a 0.
De este modo, si queremos que, tal vez, nuestro contador vaya contando los títulos de la página, podríamos introducir lo siguiente:
h1:before
{
content: counter(micontador);
}
De este modo, justo antes de todas las etiquetas "h1" se mostrará el valor actual del contador. Sin embargo, el contador está establecido a 0 y no le hemos dicho que avance en ningún momento, así que el número que escribirá en todos los "h1" será 0. ¿Cómo solucionar esto? Con la instrucción
counter-increment.
h1:before
{
counter-increment: micontador;
content: counter(micontador);
}
De este modo, cada vez que haya una etiqueta h1, en primer lugar, el navegador aumentará en uno el contador "micontador" como le hemos especificado al incluir el
counter-increment, y en segundo lugar, lo escribirá justo antes de la etiqueta en cuestión, al indicárselo en el
counter. No creo que sea especialmente difícil, ¿no?
Y, para terminar ya con la instrucción
content, esta entrega del tutorial y, en definitiva, esta parte del tutorial en general, veamos lo dinámica que puede ser la etiqueta
content, ya que, aparte de, como hasta ahora, mostrar distintos valores, también podremos hacer cosas como la siguiente:
h1:before
{
counter-increment: micontador;
content: url(./punto.gif) "Sección " counter(micontador) ":" open-quote;
}
Esto daría como resultado que antes de los encabezados "h1", en primer lugar se muestre la imagen "punto.gif", luego la palabra "Sección " seguida por el valor del contador en este momento y, finalmente, se abran unas comillas. Por supuesto, cualquier combinación es posible y, a diferencia de la mayoría de los lenguajes informáticos, para unirlos sólo necesitaremos un espacio entre los distintos valores.
Y, con esto termino con esta parte del tutorial. Como ya he dicho par de veces, la semana que viene le echaremos un vistazo por encima a lo nuevo que viene con los HTML5 y CSS3 para luego, en dos semanas, comenzar a programar en JavaScript, haciendo de este modo nuestras páginas mucho más interactivas. Aún intentaré de vez en cuando incluir algunos pequeños trucos HTML y CSS de vez en cuando, además de las guías de referencia que les dejaré desde que las tenga completas, pero llegados a este punto, sabéis casi todo lo que necesitáis saber sobre HTML y CSS para hacer páginas con un aspecto vistoso. Así que ahora nos queda trabajar por debajo de esa "fachada" que crearéis con HTML y CSS.
