¡Descarga introducción a CSS y más Apuntes en PDF de Lenguajes de Programación solo en Docsity!

www.librosweb.es

Introducción a

CSS

Javier Eguíluz Pérez

Sobre este libro...

▪ Los contenidos de este libro están bajo una licencia Creative Commons Reconocimiento - No Comercial - Sin Obra Derivada 3.0 (http://creativecommons.org/licenses/by-nc-nd/ 3.0/deed.es)

▪ Esta versión impresa se creó el 17 de diciembre de 2008 y todavía está incompleta. La versión más actualizada de los contenidos de este libro se puede encontrar en http://www.librosweb.es/css

▪ Si quieres aportar sugerencias, comentarios, críticas o informar sobre errores, puedes enviarnos un mensaje a contacto@librosweb.es

Introducción a CSS

• Capítulo 1. Introducción
  • 1.1. ¿Qué es CSS?
  • 1.2. Breve historia de CSS
  • 1.3. Soporte de CSS en los navegadores.........................................................................................................
  • 1.4. Especificación oficial................................................................................................................................
  • 1.5. Funcionamiento básico de CSS
  • 1.6. Cómo incluir CSS en un documento XHTML
  • 1.7. Glosario básico
  • 1.8. Medios CSS
  • 1.9. Comentarios
  • 1.10. Sintaxis de la definición de cada propiedad CSS..................................................................................
• Capítulo 2. Selectores................................................................................................................................
  • 2.1. Selectores básicos..................................................................................................................................
  • 2.2. Selectores avanzados
  • 2.3. Agrupación de reglas
  • 2.4. Herencia.................................................................................................................................................
  • 2.5. Colisiones de estilos...............................................................................................................................
• Capítulo 3. Unidades de medida y colores .................................................................................................
  • 3.1. Unidades de medida..............................................................................................................................
  • 3.2. Colores...................................................................................................................................................
• Capítulo 4. Modelo de cajas (box model)...................................................................................................
  • 4.1. Anchura y altura
  • 4.2. Margen y relleno
  • 4.3. Bordes....................................................................................................................................................
  • 4.4. Margen, relleno, bordes y modelo de cajas
  • 4.5. Fondos
• Capítulo 5. Posicionamiento y visualización...............................................................................................
  • 5.1. Tipos de elementos
  • 5.2. Posicionamiento
  • 5.3. Posicionamiento normal........................................................................................................................
  • 5.4. Posicionamiento relativo
  • 5.5. Posicionamiento absoluto
  • 5.6. Posicionamiento fijo
  • 5.7. Posicionamiento flotante
  • 5.8. Visualización
• Capítulo 6. Texto .......................................................................................................................................
  • 6.1. Tipografía...............................................................................................................................................
  • 6.2. Texto....................................................................................................................................................
• Capítulo 7. Enlaces ..................................................................................................................................
  • 7.1. Estilos básicos
  • 7.2. Estilos avanzados.................................................................................................................................
• Capítulo 8. Imágenes ...............................................................................................................................
  • 8.1. Estilos básicos
  • 8.2. Estilos avanzados.................................................................................................................................
• Capítulo 9. Listas .....................................................................................................................................
  • 9.1. Estilos básicos
  • 9.2. Estilos avanzados.................................................................................................................................
• Capítulo 10. Tablas ..................................................................................................................................
  • 10.1. Estilos básicos
  • 10.2. Estilos avanzados...............................................................................................................................
• Capítulo 11. Formularios .........................................................................................................................
  • 11.1. Estilos básicos
  • 11.2. Estilos avanzados...............................................................................................................................
• Capítulo 12. Layout .................................................................................................................................
  • 12.1. Centrar una página horizontalmente
  • 12.2. Centrar una página verticalmente
  • 12.3. Estructura o layout
  • 12.4. Alturas/anchuras máximas y mínimas...............................................................................................
  • 12.5. Estilos avanzados...............................................................................................................................
• Capítulo 13. Otros ...................................................................................................................................
  • 13.1. Propiedades shorthand
  • 13.2. Versión para imprimir........................................................................................................................
  • 13.3. Personalizar el cursor
  • 13.4. Hacks y filtros.....................................................................................................................................
  • 13.5. Prioridad de las declaraciones CSS
  • 13.6. Validador
  • 13.7. Recomendaciones generales sobre CSS
• Capítulo 14. Recursos útiles.....................................................................................................................
  • 14.1. Extensiones de Firefox.......................................................................................................................
  • 14.2. Aplicaciones web
  • 14.3. Sitios web de inspiración
  • 14.4. Referencias y colecciones de recursos
• Capítulo 15. Ejercicios .............................................................................................................................
• Capítulo 16. Ejercicios resueltos ..............................................................................................................

Capítulo 1. Introducción

1.1. ¿Qué es CSS?

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas.

Separar la definición de los contenidos y la definición de su aspecto presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado completo (también llamados "documentos semánticos" ). Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes.

Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo, titular, texto destacado, tabla, lista de elementos, etc.

Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical entre elementos, posición de cada elemento dentro de la página, etc.

1.2. Breve historia de CSS

Las hojas de estilos aparecieron poco después que el lenguaje de etiquetas SGML, alrededor del año 1970. Desde la creación de SGML, se observó la necesidad de definir un mecanismo que permitiera aplicar de forma consistente diferentes estilos a los documentos electrónicos.

El gran impulso de los lenguajes de hojas de estilos se produjo con el boom de Internet y el crecimiento exponencial del lenguaje HTML para la creación de documentos electrónicos. La guerra de navegadores y la falta de un estándar para la definición de los estilos dificultaban la creación de documentos con la misma apariencia en diferentes navegadores.

El organismo W3C (http://www.w3.org/) (World Wide Web Consortium), encargado de crear todos los estándares relacionados con la web, propuso la creación de un lenguaje de hojas de estilos específico para el lenguaje HTML y se presentaron nueve propuestas. Las dos propuestas que se tuvieron en cuenta fueron la CHSS ( Cascading HTML Style Sheets ) y la SSP ( Stream-based Style Sheet Proposal ).

La propuesta CHSS fue realizada por Håkon Wium Lie y SSP fue propuesto por Bert Bos. Entre finales de 1994 y 1995 Lie y Bos se unieron para definir un nuevo lenguaje que tomaba lo mejor de cada propuesta y lo llamaron CSS ( Cascading Style Sheets ).

En 1995, el W3C decidió apostar por el desarrollo y estandarización de CSS y lo añadió a su grupo de trabajo de HTML. A finales de 1996, el W3C publicó la primera recomendación oficial, conocida como "CSS nivel 1".

Introducción a CSS Capítulo 1. Introducción

Por su parte, el navegador Internet Explorer sólo puede considerarse adecuado desde el punto de vista de CSS a partir de su versión 7. De hecho, la versión Internet Explorer 6 que aún utilizan muchos usuarios sufre carencias muy importantes y contiene decenas de errores en su soporte de CSS. Afortunadamente, Internet Explorer 8 asegura que su soporte de CSS 2.1 será tan completo como el del resto de navegadores.

La información de la tabla anterior ha sido elaborada a partir de la información que se puede encontrar en la página Comparison of layout engines (http://en.wikipedia.org/wiki/ Comparison_of_layout_engines_(Cascading_Style_Sheets)) de la Wikipedia, donde se muestra una comparación exhaustiva sobre el soporte de todas las características de CSS por parte de cada navegador.

1.4. Especificación oficial

La especificación o norma oficial que se utiliza actualmente para diseñar páginas web con CSS es la versión CSS 2.1, actualizada por última vez el 19 de julio de 2007 y que se puede consultar libremente en http://www.w3.org/TR/CSS21/

Desde hace varios años, el organismo W3C trabaja en la elaboración de la próxima versión de CSS, conocida como CSS 3. Esta nueva versión incluye miles de cambios importantes en todos los niveles y es mucho más avanzada y compleja que CSS 2.

No obstante, pasarán muchos años hasta que se publique la versión definitiva completa de CSS 3 y hasta que los principales navegadores del mercado incluyan la mayor parte del nuevo estándar.

El sitio web del organismo W3C dispone de una sección en la que se detalla el trabajo que el W3C está desarrollando actualmente en relación a CSS (http://www.w3.org/Style/CSS/ current-work) y también dispone de un blog en el que se publican todas las novedades relacionadas con CSS (http://www.w3.org/blog/CSS).

1.5. Funcionamiento básico de CSS

Antes de la adopción de CSS, los diseñadores de páginas web debían definir el aspecto de cada elemento dentro de las etiquetas HTML de la página. El siguiente ejemplo muestra una página HTML con estilos definidos sin utilizar CSS:

Titular de la página

Un párrafo de texto no muy

Introducción a CSS Capítulo 1. Introducción

largo.

El ejemplo anterior utiliza la etiqueta con sus atributos color, face y size para definir el color, la tipografía y el tamaño del texto de cada elemento del documento.

El principal problema de esta forma de definir el aspecto de los elementos se puede ver claramente con el siguiente ejemplo: si la página tuviera 50 elementos diferentes, habría que insertar 50 etiquetas . Si el sitio web entero se compone de 10.000 páginas diferentes, habría que definir 500.000 etiquetas . Como cada etiqueta tiene 3 atributos, habría que definir 1.5 millones de atributos.

Por otra parte, el diseño de los sitios web está en constante evolución y es habitual modificar cada cierto tiempo los colores principales de las páginas o la tipografía utilizada para el texto. Si se emplea la etiqueta , habría que modificar el valor de 1.5 millones de atributos para modificar el diseño general del sitio web.

La solución que propone CSS es mucho mejor, como se puede ver en el siguiente ejemplo:

Titular de la página

Un párrafo de texto no muy largo.

CSS permite separar los contenidos de la página y su aspecto o presentación. En el ejemplo anterior, dentro de la propia página HTML se reserva una zona en la que se incluye toda la información relacionada con los estilos de la página.

Utilizando CSS, en esa zona reservada se indica que todas las etiquetas

de la página se deben ver de color rojo, con un tipo de letra Arial y con un tamaño de letra grande. Además, las etiquetas

de la página se deben ver de color gris, con un tipo de letra Verdana y con un tamaño de letra medio.

Definiendo los estilos de esta forma, no importa el número de elementos

que existan en la página, ya que todos tendrán el mismo aspecto establecido mediante CSS. Como se verá a continuación, esta forma de trabajar con CSS no es ideal, ya que si el sitio web dispone de 10. páginas, habría que definir 10.000 veces el mismo estilo CSS.

Introducción a CSS Capítulo 1. Introducción

Un párrafo de texto.

Normalmente, la etiqueta incluye cuatro atributos cuando se enlaza un archivo CSS:

▪ rel: indica el tipo de relación que tiene el recurso enlazado (en este caso, el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet ▪ type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css ▪ href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web. ▪ media: indica el medio en el que se van a aplicar los estilos del archivo CSS. Más adelante se explican en detalle los medios CSS y su funcionamiento.

De todas las formas de incluir CSS en las páginas HTML, esta es la más utilizada con mucha diferencia. La principal ventaja es que se puede incluir un mismo archivo CSS en multitud de páginas HTML, por lo que se garantiza la aplicación homogénea de los mismos estilos a todas las páginas que forman un sitio web.

Con este método, el mantenimiento del sitio web se simplifica al máximo, ya que un solo cambio en un solo archivo CSS permite variar de forma instantánea los estilos de todas las páginas HTML que enlazan ese archivo.

Aunque generalmente se emplea la etiqueta para enlazar los archivos CSS externos, también se puede utilizar la etiqueta

Un párrafo de texto.

Introducción a CSS Capítulo 1. Introducción

En este caso, para incluir en la página HTML los estilos definidos en archivos CSS externos se utiliza una regla especial de tipo @import. Las reglas de tipo @import siempre preceden a cualquier otra regla CSS (con la única excepción de la regla @charset).

La URL del archivo CSS externo se indica mediante una cadena de texto encerrada con comillas simples o dobles o mediante la palabra reservada url(). De esta forma, las siguientes reglas @import son equivalentes:

@import '/css/estilos.css'; @import "/css/estilos.css"; @import url('/css/estilos.css'); @import url("/css/estilos.css");

1.6.3. Incluir CSS en los elementos HTML

El último método para incluir estilos CSS en documentos HTML es el peor y el menos utilizado, ya que tiene los mismos problemas que la utilización de las etiquetas .

Ejemplo:

Un párrafo de texto.

Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en determinadas situaciones en las que se debe incluir un estilo muy específico para un solo elemento concreto.

1.7. Glosario básico

CSS define una serie de términos que permiten describir cada una de las partes que componen los estilos CSS. El siguiente esquema muestra las partes que forman un estilo CSS muy básico:

Introducción a CSS Capítulo 1. Introducción

Además, CSS clasifica a los medios en diferentes grupos según sus características. La siguiente tabla resume todos los grupos definidos en el estándar:

Medio Continuo /Paginado Visual / Auditivo / Táctil /Vocal Mapa de bits /Caracteres Interactivo /Estático

braille continuo táctil caracteres ambos embossed paginado táctil caracteres estático handheld ambos visual, auditivo, vocal ambos ambos print paginado visual mapa de bits estático projection paginado visual mapa de bits interactivo screen continuo visual, auditivo mapa de bits ambos speech continuo vocal (no tiene sentido) ambos tty continuo visual caracteres ambos tv ambos visual, auditivo mapa de bits ambos

La gran ventaja de CSS es que permite modificar los estilos de una página en función del medio en el que se visualiza. Existen cuatro formas diferentes de indicar el medio en el que se deben aplicar los estilos CSS.

1.8.1. Medios definidos con las reglas de tipo @media

Las reglas @media son un tipo especial de regla CSS que permiten indicar de forma directa el medio o medios en los que se aplicarán los estilos incluidos en la regla. Para especificar el medio en el que se aplican los estilos, se incluye su nombre después de @media. Si los estilos se aplican a varios medios, se incluyen los nombres de todos los medios separados por comas.

A continuación se muestra un ejemplo sencillo:

@media print { body { font-size: 10pt } } @media screen { body { font-size: 13px } } @media screen, print { body { line-height: 1.2 } }

El ejemplo anterior establece que el tamaño de letra de la página cuando se visualiza en una pantalla debe ser 13 píxel. Sin embargo, cuando se imprimen los contenidos de la página, su tamaño de letra debe ser de 10 puntos. Por último, tanto cuando la página se visualiza en una pantalla como cuando se imprimen sus contenidos, el interlineado del texto debe ser de 1. veces el tamaño de letra del texto.

Introducción a CSS Capítulo 1. Introducción

1.8.2. Medios definidos con las reglas de tipo @import

Cuando se utilizan reglas de tipo @import para enlazar archivos CSS externos, se puede especificar el medio en el que se aplican los estilos indicando el nombre del medio después de la URL del archivo CSS:

@import url("estilos_basicos.css") screen; @import url("estilos_impresora.css") print;

Las reglas del ejemplo anterior establecen que cuando la página se visualiza por pantalla, se cargan los estilos definidos en el primer archivo CSS. Por otra parte, cuando la página se imprime, se tienen en cuenta los estilos que define el segundo archivo CSS.

Si los estilos del archivo CSS externo deben aplicarse en varios medios, se indican los nombres de todos los medios separados por comas. Si no se indica el medio en una regla de tipo @import, el navegador sobreentiende que el medio es all, es decir, que los estilos se aplican en todos los medios.

1.8.3. Medios definidos con la etiqueta

Si se utiliza la etiqueta para enlazar los archivos CSS externos, se puede utilizar el atributo media para indicar el medio o medios en los que se aplican los estilos de cada archivo:

En este ejemplo, el primer archivo CSS se tiene en cuenta cuando la página se visualiza en la pantalla (media="screen"). Los estilos indicados en el segundo archivo CSS, se aplican al imprimir la página (media="print") o al visualizarla en un dispositivo móvil (media="handheld"), como por ejemplo en un iPhone.

1.8.4. Medios definidos mezclando varios métodos

CSS también permite mezclar los tres métodos anteriores para indicar los medios en los que se aplica cada archivo CSS externo:

@import url("estilos_seccion.css") screen; @media print { /* Estilos específicos para impresora */ }

Los estilos CSS que se aplican cuando se visualiza la página en una pantalla se obtienen mediante el recurso enlazado con la etiqueta y mediante el archivo CSS externo incluido con la regla de tipo @import. Además, los estilos aplicados cuando se imprime la página se indican directamente en la página HTML mediante la regla de tipo @media.

1.9. Comentarios

CSS permite incluir comentarios entre sus reglas y estilos. Los comentarios son contenidos de texto que el diseñador incluye en el archivo CSS para su propia información y utilidad. Los

Introducción a CSS Capítulo 1. Introducción

podría establecer un color y un estilo, solamente una medida o una medida y un estilo. Además, el orden en el que se indican los valores es indiferente. Opcionalmente, se pueden utilizar paréntesis para agrupar diferentes valores.

Por último, en cada valor o agrupación de valores se puede indicar el tipo de valor: opcional, obligatorio, múltiple o restringido.

El carácter * indica que el valor ocurre cero o más veces; el carácter + indica que el valor ocurre una o más veces; el carácter? indica que el valor es opcional y por último, el carácter {número_1, número_2} indica que el valor ocurre al menos tantas veces como el valor indicado en número_1 y como máximo tantas veces como el valor indicado en número_2.

Por ejemplo, el valor [<family-name> , ]* indica que el valor de tipo <family_name> seguido por una coma se puede incluir cero o más veces. El valor ? significa que la URL es opcional y el color obligatorio y en el orden indicado. Por último, el valor [ | thick | thin] {1,4} indica que se pueden escribir entre 1 y 4 veces un valor que sea o una medida o la palabra thick o la palabra thin.

No obstante, la mejor forma de entender la notación formal para las propiedades de CSS es observar la definición de cada propiedad y volver a esta sección siempre que sea necesario.

Introducción a CSS Capítulo 1. Introducción

Capítulo 2. Selectores

Para crear diseños web profesionales, es imprescindible conocer y dominar los selectores de CSS. Como se vio en el capítulo anterior, una regla de CSS está formada por una parte llamada "selector" y otra parte llamada "declaración".

La declaración indica "qué hay que hacer" y el selector indica "a quién hay que hacérselo". Por lo tanto, los selectores son imprescindibles para aplicar de forma correcta los estilos CSS en una página.

A un mismo elemento HTML se le pueden asignar infinitas reglas CSS y cada regla CSS puede aplicarse a un número infinito de elementos. En otras palabras, una misma regla puede aplicarse sobre varios selectores y un mismo selector se puede utilizar en varias reglas.

El estándar de CSS 2.1 incluye una docena de tipos diferentes de selectores, que permiten seleccionar de forma muy precisa elementos individuales o conjuntos de elementos dentro de una página web.

No obstante, la mayoría de páginas de los sitios web se pueden diseñar utilizando solamente los cinco selectores básicos.

2.1. Selectores básicos

2.1.1. Selector universal

Se utiliza para seleccionar todos los elementos de la página. El siguiente ejemplo elimina el margen y el relleno de todos los elementos HTML (por ahora no es importante fijarse en la parte de la declaración de la regla CSS):

• { margin: 0; padding: 0; }

El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no se utiliza habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página.

No obstante, sí que se suele combinar con otros selectores y además, forma parte de algunos hacks muy utilizados (como se verá más adelante).

2.1.2. Selector de tipo o etiqueta

Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo selecciona todos los párrafos de la página:

p { ... }

Introducción a CSS Capítulo 2. Selectores

font-weight: normal; font-family: Arial, Helvetica, sans-serif; }

h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.2em; }

2.1.3. Selector descendente

Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento.

El selector del siguiente ejemplo selecciona todos los elementos de la página que se encuentren dentro de un elemento

:

p span { color: red; }

Si el código HTML de la página es el siguiente:

... texto1 ... ...texto2 ...

El selector p span selecciona tanto texto1 como texto2. El motivo es que en el selector descendente, un elemento no tiene que ser "hijo directo" de otro. La única condición es que un elemento debe estar dentro de otro elemento, sin importar lo profundo que se encuentre.

Al resto de elementos de la página que no están dentro de un elemento

, no se les aplica la regla CSS anterior.

Los selectores descendentes permiten mejorar la precisión del selector de tipo o etiqueta. Así, utilizando el selector descendente es posible aplicar diferentes estilos a los elementos del mismo tipo. El siguiente ejemplo amplía el anterior y muestra de color azul todo el texto de los contenidos dentro de un

:

p span { color: red; } h1 span { color: blue; }

Con las reglas CSS anteriores:

▪ Los elementos que se encuentran dentro de un elemento

se muestran de color rojo. ▪ Los elementos que se encuentran dentro de un elemento

se muestran de color azul. ▪ El resto de elementos de la página, se muestran con el color por defecto aplicado por el navegador.

Introducción a CSS Capítulo 2. Selectores

La sintaxis formal del selector descendente se muestra a continuación:

elemento1 elemento2 elemento3 ... elementoN

Los selectores descendentes siempre están formados por dos o más partes separadas entre sí por espacios en blanco. La última parte indica el elemento sobre el que se aplican los estilos y todas las partes anteriores indican el lugar en el que se tiene que encontrar ese elemento para que los estilos se apliquen realmente.

En el siguiente ejemplo, el selector descendente se compone de cuatro partes:

p a span em { text-decoration: underline; }

Los estilos de la regla anterior se aplican a los elementos de tipo que se encuentren dentro de elementos de tipo , que a su vez se encuentren dentro de elementos de tipo que se encuentren dentro de elementos de tipo

.

No debe confundirse el selector descendente con la combinación de selectores:

/* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */ p, a, span, em { text-decoration: underline; }

/* El estilo se aplica solo a los elementos "em" que se encuentran dentro de "p a span" */ p a span em { text-decoration: underline; }

Si se emplea el selector descendente combinado con el selector universal, se puede restringir el alcance de un selector descendente. El siguiente ejemplo, muestra los dos enlaces de color rojo:

p a { color: red; }

Enlace

Enlace

Sin embargo, en el siguiente ejemplo solamente el segundo enlace se muestra de color rojo:

p * a { color: red; }

Enlace

Enlace

La razón es que el selector p * a se traduce como _todos los elementos de tipo que se encuentren dentro de cualquier elemento que, a su vez, se encuentre dentro de un elemento de tipo

_. Como el primer elemento se encuentra directamente bajo un elemento

, no se cumple la condición del selector p * a.

2.1.4. Selector de clase

Si se considera el siguiente código HTML de ejemplo:

Lorem ipsum dolor sit amet...

Nunc sed lacus et est adipiscing accumsan...

Class aptent taciti sociosqu ad litora...

Introducción a CSS Capítulo 2. Selectores