Pseudoclases y pseudoelementos
En algunos casos el HTML ya proporciona a ciertas etiquetas un estilo especial propio. El hecho de que los enlaces se marquen y se subrayen es un ejemplo de estilo que ya existe incluso antes de ser especificado en nuestra hoja de estilo. A estos elementos los denominaremos pseudoclases.
Por pseudoelementos nos referiremos a algunos elementos del documento que no estan reconocidos como parte del HTML estándar pero que el navegador va a ser capaz de identificar y por lo tanto proporcionarles un estilo determinado. Son, por ejemplo, la primera letra o la primera linea de un bloque de texto.
Pseudoclases
Por el momento sólo podemos definir pseudoclases para los enlaces, es decir sólo se utiliza con la etiqueta A.
La forma de utilizarlas es la siguiente:
etiqueta:Pseudoclase {definición de estilo}
Se dispone de las siguientes pseudoclases:
- :link, nos indica el estilo con el que debe aparecer el enlace antes de ser visitado.
- :visited, nos indica el estilo con el que aparece un enlace visitado.
- :active, nos indica el estilo con el que aparece el enlace en el momento de activarlo, es decir de pulsar sobre él.
- :hover, nos indica el estilo en el que aparece el enlace al pasar por encima el ratón.
En el siguiente ejemplo, el enlace aparece en primer lugar de color verde. Cuando pasamos por encima el cursor se vuelve de color amarillo. Cuando lo pulsamos se vuelve gris. Y si se trata de un enlace ya visitado se vuelve azul.
<HTML>
<HEAD>
<TITLE>Esta con pseudoclases</TITLE>
<STYLE TYPE="text/css">
<!-
A:link {COLOR: green}
A:visited {COLOR: blue}
A:active {COLOR: gray}
A:hover {COLOR: yellow}
-->
</STYLE>
</HEAD>
<BODY>
<P>Un <a href="http://www.programacion.net/html">enlace</a>
de prueba.</P>
</BODY>
</HTML>
Las pseudoclases se pueden combinar con las clases. Es decir podemos aplicar estas pseudoclases sólo a la clase de enlace que nos interese.
En el siguiente ejemplo sólo las aplicaremos a los enlaces definidos con la clase external.
A.external:link {color:blue}
A.external:visited {color:purple}
<A class="external" href="ejem.htm">enlace</A>
Y también se pueden utilizar en función del contexto.
A:link IMG {border-color:blue}
Pseudoelementos
Los pseudolementos se utilizan por el momento para crear efectos de texto tales como letras capitales o destacar la primera linea de ciertos bloques de texto.
La forma de utilizarlas es la siguiente:
etiqueta:Pseudoelemento {definición de estilo}
Por el momento disponeros de los siguientes pseudoelementos:
- :first-line, selecciona y aplica estilo a la primera linea de un bloque de texto. La cantidad de texto que compone la primera línea depende del tamaño y familia de la fuente, tamaño de la ventana, tamaño del bloque, existencia de objetos flotantes, etc... Sólo se pueden aplicar algunas características de estilo.
- :first-letter, selecciona la primera letra del texto de un bloque de texto para aplicarle determinados efectos tipográficos. Sólo se pueden aplicar algunas características de estilo.
En el siguiente ejemplo la primera línea de un parrafo debe mostrarse en mayusculas.
P:first-line {text-transform:uppercase}
En el siguiente ejemplo los párrafos del documento van en negro y con un tamaño de fuente de 12 puntos, en cambio la primera letra del párrfo debe ser verde y de doble tamaño.
P {color: black; font-size: 12pt}
P:first-letter {color:green; font-size:200%}
Tutoriales
