Página inicial

Unidad 17. Estilos CSS Avanzado (VII)


Aspecto del texto

 

text-decoration establece si el texto llevará decoración o no. Esta propiedad es muy útil para modificar el estilo de los enlaces. Los valores que puede tomar esta propiedad son none, underline, overline, line-through, blink.

none, underline, overline, line-through, blink

El valor blink hace que el texto parpadee. Este valor sólo funciona en determinados navegadores (no en Internet Explorer).

 

Con la propiedad text-transform puedes indicar la transformación del texto de la siguiente forma. Capitalize cambia la primera letra de cada palabra a mayúsculas. Uppercase y lowercase cambian el texto a mayúsculas o minúsculas respectivamente.

Este texto tiene el valor capitalize, las primeras letras serán en mayúsculas, el resto se mostrará en minúsculas automáticamente

Este texto tiene el valor uppercase, aunque este escrito en minúsculas se cambiará a mayúsculas

Este texto tiene el valor lowercase, aunque este escrito en mayúsculas se cambiará a minúsculas

 

Por último veremos la propiedad color que establece el color del texto.

Esta propiedad puede tomar un valor hexadecimal (como vimos en el apartado de colores del tema 3).

De modo que simplemente haría falta especificar el color de este modo:

p { color: #006600; }

Unos ejemplos serían los siguientes:

#006600 #00FF00 #003399 #33CC99 #66CCFF #00CCCC
#990000 #999900 #FF9933 #996699 #CCFF33 #CCFF99

 

También existe la posibilidad de utilizar unas palabras reservadas para nombrar unos cuantos colores básicos.

El modo en el que se definiría el estilo sería el mismo:

p { color: red; }

Aunque en este caso en vez de introducir su equivalente hexadecimal, referenciaríamos directamente su nombre.

Puedes encontrar el listado de los nombres de color que puedes utilizar en el sitio de la W3C.

 

Para practicar realiza el Ejercicio Paso a Paso de Controles de Fuente.

 

Controles de ratón

 

Hemos decidido dedicar este apartado a la propiedad cursor que modifica la apariencia del ratón cuando se sitúa sobre una etiqueta afectada por esta propiedad CSS.

Puedes aplicarla sobre párrafos, enlaces o incluso sobre el body mismo (así el cursor tendrá una forma personalizada en toda la página!).

 

El modo en el que se utiliza es igual que el resto:

p {

cursor: pointer;

}

Y puede tomar los valores auto, crosshair, pointer, move, n-resize, ne-resize, e-resize, se-resize, sw-resize, w-resize, nw-resize, text, wait y help.

 

Aquí tienes un ejemplo de cada uno de los cursores. Sitúa el ratón sobre ellos para ver el efecto:

auto
enlace
crosshair
enlace
pointer
enlace
move
enlace
text
enlace
wait
enlace
help
enlace
n-resize
enlace
ne-resize
enlace
e-resize
enlace
se-resize
enlace
sw-resize
enlace
w-resize
enlace
nw-resize
enlace

 

Para practicar realiza el Ejercicio Paso a Paso de Controles de Ratón.

 




  Ir a la página anterior Índice del curso  Ir a la siguiente página  

Pág. 17.7

© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier medio.
Agosto - 2006.