CSS: definir el estilo de una lista (1)

Un nuevo vídeo de iDESWEB que se ofrecerá a través de la iniciativa Actívate patrocinada por Google.

[kml_flashembed movie=”http://www.youtube.com/v/ixgxusIl66I” width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar cómo se define con CSS el estilo del texto.

En CSS existen muchas propiedades para definir el estilo del texto, en este vídeo vamos a ver el conjunto de propiedades que comienzan con el prefijo font-.

En la recomendación de CSS1, que se publicó en diciembre de 1996, se definían las propiedades font-family, font-style, font-variant, font-weight y font-size, que son las que vamos a ver en este vídeo.

La propiedad font es un resumen de las anteriores y permite modificar las anteriores con una sola regla.

CSS3 es muy complejo y se ha dividido en varios módulos.

Existe un módulo específico para el tipo de letra llamado “CSS Fonts Module Level 3”, que añade propiedades nuevas. La mayoría de los navegadores actuales no admiten estas propiedades. Además, estas propiedades son muy específicas y es muy improbable que las vayas a utilizar alguna vez.

Las nuevas propiedades de CSS3 permiten un ajuste tipográfico muy fino y tienen sentido en la actualidad porque la resolución de los dispositivos de visualización ha aumentado considerablemente.

Por ejemplo, compárese la resolución VGA de 640×480, tan común hace 15 años, con la resolución FullHD 1920×1080 que se ha convertido en el estándar actual.

Las propiedades que vamos a ver a continuación son font-family, font-size, font-weight, font-style y font-variant.

Font-family permite modificar la familia tipográfica, el tipo de letra.

Existen miles y miles de familias tipográficas. Como existen tantas familias tipográficas, se han propuesto varias clasificaciones para poder ordenarlas y compararlas.

Una de las más conocidas es la clasificación tipográfica de Francis Thibaudeau, que divide las familias tipográficas en tres grupos: con serifas, sin serifas y otras tipografías.

Las serifas son las terminaciones, las decoraciones o adornos que aparecen en los extremos de algunas letras, como en este ejemplo la letra s, la r, la i y la f.

Estas terminaciones proporcionan un aspecto más elegante y clásico y facilitan la lectura en los documentos impresos.

En los tipos de letra sin serifas estas terminaciones no aparecen. Los tipos de letra sin serifas también se conocen en español como de “palo seco”.

A la hora de especificar la familia tipográfica que se quiere emplear se puede indicar una lista de tipos de letra.

Por ejemplo, en este código, para el elemento h1, se ha indicado el tipo de letra Times New Roman y el tipo Georgia. Y para el elemento p, un párrafo, el tipo de letra Arial y el tipo Helvetica.

Un navegador web intentará emplear el primer tipo de letra definido. Si no puede utilizarlo, pasará al segundo tipo de letra, después al tercero y así sucesivamente hasta el final. Si ninguno de los tipos de letra definidos puede ser utilizado, el navegador utilizará un tipo de letra por defecto. Pero quizás el tipo de letra no se ajuste a nuestro diseño.

Para solventar este problema, se recomienda indicar siempre un tipo genérico al final de la lista de tipos de letra.

Las familias o tipos genéricos son serif y sans-serif para los tipos de letra con serifas y sin serifas.

cursive para tipografías que simulan la escritura a mano, como por ejemplo Lucida Handwriting.

fantasy para tipografías exageradas que se emplean en anuncios y pósteres.

Y monospace para las tipografías en las que cada carácter ocupa exactamente la misma cantidad de espacio horizontal.

Font-size especifica el tamaño de la letra, que se puede especificar de muchas formas.

Existen cuatro formas, de forma absoluta, relativa, mediante un tamaño especificado con distintas unidades de medida y mediante un porcentaje.

Font-weight permite seleccionar el peso del tipo de letra.

El peso es el grosor de los caracteres.

La propiedad font-weight puede tomar todos estos valores, pero normalmente sólo se emplean normal y bold.

La razón de ello es que, normalmente, una familia tipográfica no incluye todos los pesos existentes, sólo unos pocos. Por tanto, cuando se emplea una familia tipográfica conviene conocer sus características para saber lo que se puede usar.

Font-style permite seleccionar el estilo de la fuente, del tipo de letra.

La propiedad font-style puede tomar estos tres valores: normal, italic y oblique.

En esta imagen se representan dos letras con los tipos de letra Palatino y Baskerville.

El estilo oblicuo suele ser el estilo de letra normal que se ha inclinado, como si fuera una figura geométrica que ha sufrido una transformación.

Sin embargo, el estilo cursiva, italic, es un diseño específico de las letras con una inclinación y una forma distinta a la normal.

La última propiedad, font-variant, permite seleccionar variaciones del tipo de letra.

Esta propiedad puede tomar dos valores, normal y small-caps.

Small-caps en español es el tipo de letra versalita, letras mayúsculas cuyo tamaño es similar al de las minúsculas.

Antes de terminar, te invito a que utilices este configurador de tipos de letra que puedes encontrar en el Mozilla Developer Network.

Por ejemplo, aquí he elegido como variante versalitas, small-caps.

El tamaño lo he fijado a 24 pixels.

Y la familia tipográfica seleccionada es serif.

Este es un ejemplo de texto con el tipo de letra seleccionado.

En este otro ejemplo, he elegido el estilo cursiva, italic.

El peso es negrita y el tamaño 24 pixels.

La familia tipográfica seleccionada es sans-serif.

Por último, este es un ejemplo de texto con el tipo de letra seleccionado.

Ahora te invito a que veas la segunda parte de este vídeo.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.