Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 173

Visitas el mes pasado: 159

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




2. Texto en CSS (I)

2.1 Propiedades de tipografía

html

En esta página empezaremos a dar las definiciónes de las propiedades CSS, y los valores que éstas pueden tomar. Empezamos por las propiedades que modifican el texto, y dentro de éstas las propiedades de tipografía.

Se denominan propiedades de tipografía aquellas que afectan al texto en sí mismo, es decir a la forma de las letras y las palabras. Se diferencian de las propiedades de texto en que éstas últimas afectan a la estructura y la posición del mismo, es decir al estilo de un trozo de texto.


propiedad color

La propiedad color afecta al color del texto y su definición es la siguiente:

color Color de texto
Valores <color> | inherit
Descripción Establece el color de letra utilizado para el texto
Valor inicial Depende del navegador
se aplica a Todos los elementos

Los valores de los colores pueden definirse de varias maneras, las cuales hemos explicado en la página 1.4 Colores y medidas de este manual. Consulta esta página para ver las formas que hay de definir los valores de los colores, y cómo se definen.

El valor inherit significa heredado y quiere decir que se aplica el mismo valor que el elemento que lo contiene (llamado también elemento padre), este valor es común a muchas propiedades CSS.

El valor inicial depende del navegador, no obstante en los principales navegadores es el negro. (black)

Veamos el código de una página en la que cambiamos los colores del texto:

<html>
<head>
<title>Texto en varios colores</title>
</head>
<body>
<p style="color: blue">Este es el primer párrafo, 
   y su color es el blue, porque he utilizado la propiedad CSS color: blue</p>
<p style="color: red">Este es el segundo párrafo, y su color es el red</p>
<p style="color: #c07aad">Este este es el tercer párrafo, y su color es el #c07aad</p>
<p>Este cuarto párrafo tiene varios colores, <span style="color: orange">entre ellos
está el orange,<span><span style="color: olive">el color olive</span>
<span style="color: #8a00c6">y el color #8a00c6</span>.
</body>
</html>

La página anterior la verás en el navegador de la siguiente manera:

Colores de texto



propiedades font

Las propiedades font son una serie de propiedades que afectan a la letra, y comienzan todas por la palabra font: Veamos cuáles son:

Propiedad font-family

Esta propiedad afecta a la tipografía del texto y su definición es:

font-family Tipo de letra
Valores (( <nombre_familia> | <familia_generica> ) (,<nombre_familia> | <familia_generica>)* ) | inherit
Descripción Establece el tipo de letra o "fuente" utilizado para el texto
Valor inicial Depende del navegador
se aplica a Todos los elementos

El tipo de letra del texto se puede indicar de dos formas diferentes:

Los navegadores utilizan los tipos de letra instalados en el ordenador del propio usuario. De esta forma, si indicamos en la propiedad font-family un tipo de letra raro o rebuscado, casi ningún usuario dispondrá de ese tipo de letra.

Para evitar el problema de que el usuario no tenga instalado el tipo de letra, CSS permite indicar en la propiedad font-family más de un tipo de letra. El navegador probará en primer lugar con el primer tipo de letra indicado. Si el usuario la tiene instalada, el texto se muestra con ese tipo de letra. Si no es así probará con el segundo, después con el tercero, y si no tuviera ninguno mostraría el tipo de letra que usa el navegador por defecto.

El valor de font-family suele definirse como una lista de tipos de letra alternativos separados por comas. El último valor de la lista suele ser el nombre de la familia tipográfica genérica que más se parece al tipo de letra que se quiere utilizar. Ejemplos:

font-family: Arial, Helvetica, sans-serif;

font-family: "Times New Roman", Times, serif;

Cuando el nombre de la fuente (tipo de letra) tiene más de una palabra debemos escribirla entre comillas para no dar lugar a confusiones.

Propiedad font-size

Esta propiedad afecta al tamaño del texto y su definición es:

font-size Tamaño de letra
Valores <tamaño_absoluto> | <tamaño_relativo> | <medida> | <porcentaje> | inherit
Descripción Establece el tamaño de letra utilizado para el texto
Valor inicial medium
se aplica a Todos los elementos

los valores de tamaño absoluto pueden ser de menor a mayor las siguientes palabras clave: xx-small, x-small, small, medium, large, x-large, xx-large.

los valores de tamaño relativo emplean las palabras clave larger, smaller (más_grande , más_pequeño) y toman como referencia el valor del elemento que lo contiene (elemento padre).

Los valores de medidas emplean una serie de unidades de medida que pueden ser de varios tipos. Puedes consultar todas las unidades de medida que hay en CSS en la página 1.4 Colores y medidas de este manual. Las más utlizadas son los pixeles (px) y el em (1em = tamaño por defecto en el navegador ). Las medidas deben escribirse siempre seguidas del indicador de su unidad, y sin espacios entre el número y el indicador: ejemplo:

font-size: 12px;

por último el porcentaje es una unidad de medida relativa: indica el tanto por ciento respecto al tamaño de letra del elemento que lo contiene (elemento padre), considerando que el elemento que lo contiene es siempre el 100%; así por ejemplo font-size: 120%; será un tipo de letra un 20% más grande que el del elemento que lo contiene.

Propiedad font-weight

Esta propiedad afecta al grosor de la letra (negrita) y su definición es:

font-weight Grosor de letra
Valores normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
Descripción Establece la anchura de la letra utilizada para el texto
Valor inicial normal
se aplica a Todos los elementos

Los valores que normalmente se utilizan son normal (el valor por defecto) y bold para los textos en negrita. El valor normal equivale al valor numérico 400 y el valor bold al valor numérico 700.

Propiedad font-style

Esta propiedad afecta al estilo de la letra (cursiva) y su definición es:

font-style Estilo de letra
Valores normal | italic | oblique | inherit
Descripción Establece el estilo de la letra utilizada para el texto (cursiva)
Valor inicial normal
se aplica a Todos los elementos

Normalmente la propiedad font-style se emplea para mostrar un texto en cursiva mediante el valor italic. El valor oblique muestra también un texto en cursiva, con algunos tipos de letra el texto se muestra un poco más inclinado.

Propiedad font-variant

Esta propiedad afecta también al estilo de la letra, pudiendo dar un tipo de letra de mayúsculas pequeñas (tipo versales) y su definición es:

font-variant Estilo alternativo de letra
Valores normal | small-caps | inherit
Descripción Establece el estilo alternativo de la letra utilizada para el texto (versal)
Valor inicial normal
se aplica a Todos los elementos

La propiedad font-variant es poco utilizada, ya que sólo permite mostrar el texto con letra versal (mayúsculas pequeñas).

Veamos ahora el código de una página en la que hemos aplicado algunas de las propiedades anteriores para cambiar los distintos tipos de títulos:


<html>
<head>
<title>Color y estilo del texto</title>
<style type="text/css">
h1 { color: red; font-family: arial; font-size: 2em; font-weight: bold; }
h2 { color: blue; font-family: cursive; font-size: 1.5em; font-style: italic; }
h3 { color: green; font-family: fantasy; font-size: 15px; font-weight: normal; }
h4 { color: maroon; font-family: monospace; font-size: 15pt; font-weight: normal; }
h5 { color: purple; font-family: serif; font-size: 1.5pc; font-style: italic; }
h6 { color: olive; font-family: verdana; font-size: 1em; font-variant: small-caps; }
</style>
</head>
<body>
<h1>Texto color rojo, tipo arial, tamaño 2em, grosor negrita</h1>
<h2>Texto color azul, tipo cursive, tamaño 1.5em, estilo italica</h2>
<h3>Texto color verde, tipo fantasy, tamaño 15px, grosor normal</h3> 
<h4>Texto color marrón, tipo monospace, tamaño 15pt, grosor normal</h4>
<h5>Texto color purpura, tipo serif, tamaño 1.5pc, estilo italica</h5>
<h6>Texto color oliva, tipo verdana, tamaño 1em, letra versal</h6>
</body>
</html>

Observa cómo en esta página el código CSS está puesto en la cabecera, dentro de una etiqueta de estilo, al contrario que en la anterior, donde colocabamos el código directamente en las etiquetas HTML.

Esta página la veremos en el navegador como en el siguiente enlace:

Color y estilo del texto



Propiedad font - tipo "shorthand"

Cuando tenemos un grupo de propiedades afines, que empiezan todas por la misma palabra, como es el caso de las propiedades "font-...", podemos, normalmente agruparlas bajo una única propiedad que las engloba. Esto es lo que se llama una propiedad de tipo "shorthand".

Podemos por tanto aplicar las propiedades vistas anteriormente (excepto la propiedad color) a un mismo elemento mediante la propiedad font, que es su propiedad de tipo shorthand.

La definición de la propiedad font es la siguiente:

font Tipo de letra
Valores ( ( <font-style> || <font-variant> || <font-weight> )? <font-size> ( / <line-height> )? <font-family> ) | caption | icon | menu | message-box | small-caption | status-bar | inherit
Descripción Permite indicar todas las propiedades de la tipografía de un texto
Valor inicial -
se aplica a Todos los elementos

Las propiedades deben indicarse en el siguiente orden:

Veamos algunos ejemplos:

font: italic bold 1.2em/1em helvetica, arial, sans-serif;

font: 12px "Times new roman",serif;

font: small-caps 20px/22px "Century Gothic","Trebuchet MS",Arial,sans-serif;

La propiedad font también permite indicar el tipo de letra a utilizar mediante una serie de palabras clave: caption, icon, menu, message-box, small-caption, status-bar.

Estas palabras muestran el mismo tipo de letra que usa el sistema operativo para sus distintas funciones. Ejemplo: iconos (icon); barras de estado (status-bar) menus (menu) etc.


Por último veamos cómo quedaría el código CSS de la página de ejemplo anterior, mediante la etiqueta "font" tipo shorthand:


<style type="text/css">
h1 { color: red; font: bold 2em arial; }
h2 { color: blue; font: italic 1.5em cursive; }
h3 { color: green; font: normal 15px fantasy; }
h4 { color: maroon; font: normal 15pt monospace; }
h5 { color: purple; font:  italic 1.5pc serif; }
h6 { color: olive; font: small-caps 1em verdana; }
</style>

Si sustituyes el primer código por el segundo, verás que el resultado es casi el mismo, sin embargo si que hay una pequeña diferencia, y es el valor de la propiedad font-weight. En el primer código, si no se indica esta propiedad, el valor por defecto es "negrita", ya que lo toma de las etiquetas html, las cuales tienen este valor por defecto, mientras que en el segundo, si no se indica nada, la propiedad font le imprime como valor por defecto "normal".




En la siguiente página veremos las propiedades que afectan a la estructura del texto:

Propiedades de texto



manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com