Dreamweaver CS3

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:

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.

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:

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

Pág. 17.7

 Cursos Informática Gratuitos