Clase 9 - Trabajo Práctico de DOM (Editor de Texto)

Seguimos trabajando con el DOM, ahora con el enunciado de “Editor de Texto”.

Formato de Texto

Vimos las distintas propiedades de CSS que podemos usar para aplicar formato a un texto.

Algunas de ellas son:

• color: para cambiar el color del texto. Acepta valores de color de CSS.
• font-family: para definir la fuente, o la familia de fuentes. Acepta un listado de múltiples valores separados por comas.
• font-size: para definir el tamaño del texto. Acepta varias unidades distintas.
• font-style: para mostrar el texto en estilo cursiva. Acepta los valores normal, italic y oblique.
• font-weight: para mostrar el texto en estilo negrita. Puede aceptar distintos valores de peso como numeros de 100 a 900, y también valores como normal (equivale a 400) y bold (equivale a 700).
• text-decoration: agrega subrayado, suprarayado o tachado al texto. Acepta los valores underline, overline y line-through respectivamente.
• text-transform: permite cambiar entre mayúsculas y minúsculas un texto. Acepta valores como capitalize, uppercase o lowercase.

selector {
	/* aplicando todas las propiedades */
	color: red;
	font-family: serif;
	font-size: 1.3em;
	font-style: italic;
	font-weight: 300;
	text-decoration: underline;
	text-transform: capitalize;
}

Nos da como resultado:

texto de ejemplo

Aplicar Formato

Para aplicar formato a un elemento tenemos –al menos– dos opciones, siendo:

1. Aplicar estilos directamente sobre el elemento, usando el atributo style="".
2. Aplicar estilos a partir de clases de CSS.

<!-- Ejemplo 1 -->
<p style="color: red">texto color rojo</p>

<!-- Ejemplo 2 -->
<p class="texto-rojo">texto color rojo</p>

<style type="text/css">
.texto-rojo {
	color: red;
}	
</style>

El resultado en ambos casos es el mismo (el texto se ve color rojo), pero el segundo caso tiene la ventaja de poder reutilizar ese mismo estilo, esa misma clase, para diferentes elementos.