HTML    •    CSS

Introducción a las CSS.
Formas de aplicar CSS I.
Formas de aplicar CSS II.
Pseudoclases.
Unidades de medida.
Estilos de fuentes.
Estilos de párrafos.
Estilos de fondo.
Estilos de bordes.
Margin y Padding.
Float y Clear.
Position, left y top.
Width y height.
Altura de las capas.
Visibility y display.
Overflow.
Scrollbar.
Inicio > Curso de CSS (hojas de estilo) > Estilos de fuentes.

Estilos de fuentes.

Los siguientes estilos se pueden aplicar a las fuentes. Podemos cambiar el tamaño del texto, el color del mismo, su anchura, su estilo e incluso su tipo de letra. Vamos a verlos más detenidamente:

Estilo color

Este estilo lo usamos para darle color al texto. Lo podemos indicar como nombre del color o con el modo RGB. Este último es el más recomendable, pues no todos los nombres de colores son admitidos en el estándar.

A continuación vamos a ver cómo escribiríamos el estilo para darle al texto un color rojo.

<div style="color:#FF0000;">Este texto se verá de color rojo.</div>

Y el resultado será el siguiente:

Este texto se verá de color rojo.

Estilo font-size

Nos sirve para indicarle el tamaño a la letra. Se lo podemos indicar utilizando las unidades de medida de CSS o mediante los siguientes valores: xx-large, x-large, large, medium, small, x-small, xx-small; siendo “xx-small” el más pequeño y “xx-large” el más grande.

A continuación vamos a ver cómo escribiríamos el estilo para darle al texto un tamaño de fuente de 25 pixeles. Como ves, nosotros hemos elegido darle a la fuente el tamaño mediante una unidad de medida de CSS, ya que es un valor más exacto.

<div style=" font-size:25px;">Este texto tiene un tamaño de 25 pixeles.</div>

Y el resultado sería el siguiente:

Este texto tiene un tamaño de 25 pixeles.

Estilo font-family

Utilizaremos este estilo para definir el tipo de fuente que queramos que tenga el texto. Si no le indicamos nada, el texto estará escrito en la tipografía que el usuario tenga en su sistema.

Escribiremos las fuentes separadas con comillas. El navegador buscará por orden cada una de las fuentes especificadas, y usará la primera fuente que encuentre instalada en el sistema del usuario.

Vamos a ver como escribiríamos el estilo font-family:

<div style=" font-family: Georgia, 'Times New Roman', serif;">Este texto estará escrito con un determinado tipo de letra.</div>

Como vemos hemos escrito tres tipos de fuentes. Tu navegador, siguiendo las preferencias marcadas, usará la primera que encuentre instalada en tu sistema. Y el resultado será el siguiente:

Este texto estará escrito con un determinado tipo de letra.



Estilo font-weight

Este estilo se usa para darle anchura al texto. Es decir, define la anchura que tendrá cada caracter. La anchura la podemos especificar de forma relativa al valor actual que tenga el texto (bold , bolder , lighter) o mediante un valor numérico (del 100 al 900).

A continuación vamos a ver cómo escribiríamos el estilo font-weight en un texto. Nosotros hemos querido usar el valor relativo “bold”.

<div style=" font-weight: bold;">Estos caracteres tienen una anchura mayor.</div>

Y el resultado sería el siguiente:

Estos caracteres tienen una anchura mayor.
Estilo font-style

Con el siguiente atributo podemos cambiar el estilo al texto. Los estilos que podemos aplicar al texto son: normal, italic y oblique.
Nosotros al siguiente texto hemos querido darle una forma itálica, por lo que hemos utilizado el siguiente estilo.

<div style=" font-style: italic;">Este texto tiene un estilo it&aacute;lico</div>

Y el resultado es el siguiente:

Este texto tiene un estilo itálico
<< Unidades de medida. Estilos de párrafos. >>

Artículo escrito por Alberto Gómez para HazUnaweb.com. Queda absolutamente prohibida su reproducción.  


© HazUnaWeb.com. Tutoriales y manuales de programación y diseño de páginas web. :: Contacto :: Aviso legal
Queda absolutamente prohibida la copia o reproducción total o parcial de los contenidos de este página.