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%}