martes, febrero 28, 2012

Tutorial de desarrollo web, Parte XXI: Pseudo-clases y pseudo-elementos (2). Identificadores y clases (3)

Previously, on The CubeBlog...
Parte XVII: La etiqueta iFrame
Parte XVIII: Metadatos. Comentarios
Parte XIX: Modelo de Caja CSS
Parte XX: Bordes exteriores. Pseudo-clases y pseudo-elementos (1) Identificadores y clases (2)

Bienvenidos a la vigésimo primera entrada dedicada al desarrollo web, ya empezando a cerrar las últimas cosas que quedan de HTML y CSS para poder, en máximo dos meses, empezar con JavaScript. Así que, ya saben, a ponerse las pilas. Y, antes de empezar con nuestro tutorial de hoy, la resolución del ejercicio de la semana pasada como ya es uso y costumbre. Disculparme ya que me he dado cuenta de que no todo lo que les pedí hacer es compatible en todos los navegadores. De hecho, algunas de las cosas son compatibles en Google Chrome y otras son compatibles en Firefox, pero no en ambas. Si quieren probrarlo, les recomiendo el navegador Opera.
La semana pasada habíamos aprendido a usar los "pseudo-elementos" y habíamos dejado pendiente para esta entrega aprender a usar las "pseudo-clases". Y, como lo prometido es deuda, aquí va. Como ya mencioné la semana pasada, no he encontrado ninguna definición "teórica" que me convenza sobre los pseudo-elementos y las pseudo-clases, así que intentaré explicarlo de una manera práctica.
La semana pasada veíamos que, cuando dábamos instrucciones CSS a un pseudo-elemento, estas instrucciones sólo se aplicaban a una parte del elemento (la que se hubiera especificado como pseudo-elemento). Las pseudo-clases, por contra, no son "partes" de nuestro elemento, de hecho, las instrucciones que le demos a nuestras pseudo-clases se aplicarán a todo el elemento en su totalidad. Sin embargo, las pseudo-clases afectarán a un "estado" del elemento. Esto será más fácil de entender si analizamos cada una de las siete pseudo-clases que existen:
  • Las cuatro primeras se aplican generalmente a los enlaces, aunque se puede aplicar a otra etiqueta (siempre y cuándo esta contenga un enlace). Son las pseudo-clases :link, :visited, :active y :hover, y, tal como habíamos hablado, cada una de las cuatro clases representa un distinto estado del enlace.
    • En primer lugar, la pseudo-clase :link es la manera de indicar al navegador que nos referimos a un enlace en el momento en el que su contenido aún no ha sido visitado por el usuario. Todos nos habremos dado cuenta de que normalmente, aquellos enlaces que hacemos y en los que nunca hemos pulsado tienen el color azul, sin embargo, cuando picamos en ellos, se vuelven púrpura (creo que es púrpura... lo siento, soy daltónico... es púrpura, ¿verdad?). Pues con la pseudo-clase :link podremos modificar ese estado inicial, con la siguiente estructura:

    • a:link
    • {
    • color: red;
    • }

    • Con este código hemos logrado que los enlaces, antes de ser pulsados, tengan color de fuente rojo. Sin embargo, al ser pulsados, pasarán a ser púrpura, una ventaja frente a los enlaces que podíamos hacer con CSS hasta la fecha, en la que, al definirle un color, daba igual lo que hiciéramos con el enlace, siempre iban a tener ese color. Anoto que no pongo ejemplos ya que mostrar cambios de estado en imágenes estáticas es un poco absurdo.
    • El segundo, :visited no será, por tanto, difícil de adivinar. La pseudo-clase :visited indicará el estilo que debe tomar un enlace que ya ha sido visitado (el color púrpura del que hablábamos antes). No tiene mucha ciencia.
    • El tercer caso, :active, me parece a mí hasta más interesante que los anteriores. Nos habremos dado cuenta al pulsar en un enlace que, en el momento en que lo estamos picando, cambia a otro color, ni azul ni púrpura (ahí ya paso de intentar adivinar cual es, ustedes mírenlo). Ese color (y otros atributos) se pueden cambiar mediante la pseudo-clase :active.
    • Finalmente, la cuarta pseudo-clase, la más abstracta ya que por defecto no tiene ningún valor, es la pseudo-clase :hover. Esta pseudo-clase se activa en el momento en el que pasamos con el puntero del ratón por encima del enlace pero no llegamos a pulsar. Lo habréis visto en botones de muchas páginas webs.
  • Algo curioso es que jugando con los bordes y el color de fondo de estas pseudo-clases, podemos convertir nuestro enlace en una especie de "botón". Pero de eso hablaremos en los ejercicios.
  • En segundo lugar, vamos a ver el pseudo-elemento :focus. Este elemento funcionará de la misma manera que los últimos, sólo es que en este caso para las etiquetas de tipo "input" (o cualquier tipo de etiqueta a través de la que el usuario pueda introducir texto, como un "textarea", o hacer una selección, como un "select"). El elemento entrará en este estado en el momento en el que el usuario haya hecho click encima suya y dicho elemento se encuentre "seleccionado" (o sea, que esté listo para que se escriba sobre él o se haga una selección con sólo mover las teclas direccionales). Desde el momento en el que el usuario haga click en cualquier otro lugar de la página (o pulse la tecla tabulador), el elemento volverá a su estado inicial (en lo que a estilo se refiere).
  • Las siguientes dos pseudo-clases, en mi opinión, deberían pertenecer a una categoría distinta, ni "pseudo-clase" ni "pseudo-elemento", ya que no se comportan como ninguno de los otros, pero ya que se las considera "pseudo-clases", no voy yo a pelearme con la W3C.
    • La primera de estas dos es la pseudo-clase :lang. Para ello también debemos saber que todos los elementos de HTML pueden tener el atributo "lang", con el cual se define el lenguaje del contenido de esa etiqueta. Por ejemplo:

    • <p lang="es">Esta etiqueta está en español</p>

    • De esta manera, usando la pseudo-clase lang, podemos dar un estilo particular sólo a las etiquetas que tengan un determinado idioma, de la siguiente manera:

    • p:lang(es)
    • {
    • color: red;
    • }

    • Con ese código dentro de la página que contuviera el párrafo antes escrito, dicho párrafo aparecería en color rojo.
    • Y la última pseudo-clase que tenemos es la pseudo-clase :first-child, también un tanto extraña, pero creo que fácil de entender. Para entender esta pseudo-clase tenemos que recordar la estructura jerárquica del HTML: todas las etiquetas se contienen unas a otras de una forma completamente jerarquizada, siendo la etiqueta "html" la que contiene a todas las demás. De esta manera, las etiquetas que contengan a otras etiquetas son llamadas "padres", mientras que las etiquetas contenidas en otra etiqueta se las llama "hijas". Y ahí es donde entra el consejo de la pseudo-clase :first-child ("primera-hija").
    • No habrá que hacer un genio para comprender que una etiqueta "primera-hija" funcionará de una manera parecida a como funcionaba el pseudo-elemento :first-line, con la diferencia de que, en este caso, afecta a toda la etiqueta en cuestión. Es un poco más complejo de explicar, pero lo veremos mejor con ejemplos. Construyamos una página con nuestra estructura básica de siempre e introduzcamos esto (sólo esto) en el "body":

    • <p>Aquí habrá un <a href="#">enlace</a>. Y aquí <a href="#">otro</a> Y además, algo de <i>cursiva</i>.</p>
    • <p>Aquí <a href="#">otro más</a>. Y <a href="#">éste</a> será el último.</p>
    • <h3>Pero aquí también voy a poner <a href="#">un enlace</a></h3>

    • Al no haber aún incluido ninguna pseudo-clase, nuestra página debería verse así:
    • Bien, ahora vamos a empezar a hacer magia. Con la etiqueta :first-child vamos a indicarle que el primer enlace de cada párrafo sea rojo. ¿Cómo? Pues así:

    • a:first-child
    • {
    • color: red;
    • }
    • Podemos entonces comprobar como todos los enlaces que son "primeros hijos" de alguna etiqueta (o sea, que son la primera etiqueta que contiene el párrafo o el encabezado), han cambiado su color, mientras que los otros, no. ¿Y si cambiáramos el a:first-child por i:first-child?

    • i:first-child
    • {
    • color: red;
    • }
    • Podemos comprobar de esta manera que volvemos a la pantalla original. ¿Por qué no ha funcionado esta vez? Porque la cursiva no es "primera hija" de ninguna etiqueta. De hecho, es la "tercera hija", ya que el párrafo en que está situada tiene dos enlaces antes. Como ya hemos señalado, la pseudo-clase :first-child SÓLO servirá para primeros hijos.
    • Sin embargo, aquí no se acaba lo que podemos hacer con esta pseudo-clase. Imaginaos que sólo queráis que sean los "primeros hijos" de "p" los que tengan de color de fuente el rojo, pero no los primeros hijos de h3. Para ello usaremos la siguiente sintaxis:

    • p > :first-child
    • {
    • color: red;
    • }
    • Podemos comprobar cómo, en esta ocasión, sólo el primer enlace de los párrafos se ha puesto en rojo, pero no el del encabezado. Esto hubiera servido para cualquier "primer hijo" que "p" hubiera tenido, da igual que fuera un enlace, una cursiva o lo que sea. Si hubiéramos querido especificar que queríamos que SÓLO afectara a aquellos enlaces que fueran primeros hijos de un párrafo, deberíamos haber usado el siguiente código:

    • p > a:first-child
    • {
    • color: red;
    • }

    • El resultado en pantalla sería el mismo del anterior en este caso, pero en caso de haber un párrafo cuyo primer hijo no hubiera sido un enlace, con este segundo código en ese párrafo nada habría pasado a ser rojo (ya que, aunque hubiera un enlace, no hubiera sido un "primer hijo").
Y, para terminar la entrega de esta semana, volvemos a hablar de los identificadores y clases y su relación con las jerarquías, las pseudo-clases y los pseudo-elementos. Realmente, lo único que voy a dar esta semana son unos cuantos ejemplos extras, como los que dí al final del artículo de la semana pasada, para dejar claro cómo funcionan en estos casos. Ahí van:

#primero td p:first-line - La primera línea de los párrafos que se encuentren dentro de una celda que se encuentre dentro de un elemento con identificador "primero".

table #tercera-fila .titulo p a:visited - Un enlace que ya ha sido visitado que esté dentro de un párrafo, dentro de un elemento de clase "titulo", a su vez dentro de un elemento con identificador "tercera-fila" que esté dentro de una tabla.

#rojo > p:first-child a i - El código en cursiva que se encuentre dentro de un enlace que se encuentre dentro de un párrafo que sea el primer hijo de un elemento con identificador "rojo".

Como veis, sobre todo quería destacar cómo se pueden combinar los pseudo-elementos y pseudo-clases con los métodos que habíamos visto la semana pasada. Animo al lector a probar sus propias combinaciones, a ver cuales funcionan y cuales no.

EJERCICIO


Para el ejercicio de esta semana, les voy a dejar un código CSS que no deberéis tocar, es el siguiente:



a
{
border: outset 5px;
width: 100px;
display: block;
text-align: center;
background-color: black;
border-radius: 15px;
text-decoration: none;
color: red;
}


Para resolver este ejercicio, introducid este código en una página en la que debéis crear un enlace y luego, mediante las pseudo-clases estudiadas, debéis conseguir que se comporte como un botón, haciendo lo siguiente:

  • Que cambie de color ligeramente cuando pasas el cursor por encima.
  • Que al pulsarlo no sólo cambie de color sino que también parezca que se introduce para dentro (pista: instrucción border).
No es muy difícil. Y con mis pistas creo que lo he puesto chupado.

La verdad, respecto a las demás pseudo-clases, no se me ocurre qué ejercicio ponerles. Simplemente, practiquen, como ya les he dicho antes, probando distintas combinaciones de rutas para declarar algún estilo.

No hay comentarios: