Logotipo de Aprende Gratis.

CSS - Lección 5: Dando presentación al texto

En la lección anterior hemos visto como darle color al texto. Por supuesto, el diseño no se limita solo alto, en vez de eso, podemos controlar hasta el más mínimo detalle en cuanto a la presentación del texto se refiere.

En concreto, vamos a aprender como cambiar el tipo de letra, la alineación, la separación de líneas, el tamaño del texto y muchos otros aspectos en cuanto a la presentación del texto se refiere.

Ovserva la siguiente tabla, en ella se detallan las diferentes propiedades para configurar la presentación del texto:

propiedades para darle presentaci?n al texto
color Con esta propiedad le damos color al texto
font-family Para aplicar un tipo de letra
font-size Nos permite modificar el tama?o de la fuente
font-weight Habilitamos con esta propiedad el texto en negrita
text-align Nos permite alinear el texto y justificarlo
line-height Para controlar la separaci?n de los renglones

Por ejemplo, el siguiente código nos permite diseñar una página en la que tenemos un título y un párrafo. En concreto, presenta el texto en color rojo para el título, y naranja para el párrafo. Además, el párrafo tiene el texto justificado y un interlineado grueso. También, le daremos al título un tipo de letra arial y le cambiaremos el tamaño.

h1 {
  color:red;           /* color rojo del texto */
  font-family:arial;   /* tipo de letra arial */
  font-size:20px;      /* tamaño de letra 24 pixels */
 }
 
p {
  color:orange;        /* color rojo del texto */
  text-align:justify;  /* texto justificado */
  line-height:18px;    /* interlineado grueso */
  font-size:12px;      /* tamaño de letra 24 pixels */
 }

Hay propiedades cuyo valor es un tamaño, como el tamaño del texto (font-size) o el tamaño del interlineado (line-height). Para estas magnitudes utilizaremos una cantidad en pixeles. El atributo text-align tiene cuatro valores: left para alinear a la izquierda, right para alinear a la derecha, center para centrar el texto y justify para ajustarlo al ancho de la ventama.

El código presentaría así el texto en una página:

título en rojo y párrafo en naranja con interlineado grueso y justificado
Figura 4. Dise?o de una página cambiando la
presentación del texto

Ir a:


Aprende Gratis 2017 © Mario Raja | página web responsive.