Seminario

Hojas de estilo CSS

Juan Antonio Pastor Snchez

UNIVERSIDAD DE MURCIA

Construccin de Servicios de Informacin Digital Curso 2013-2014 Grado en Comunicacin Audiovisual

Introduccin

UNIVERSIDAD DE MURCIA

El objetivo fundamental de las hojas de estilo CSS es separar el contenido de una pgina (o pginas) web de la apariencia. La gestin eficaz de un sitio web se realiza editando documentos HTML XHTML sin ningn informacin sobre estilos visuales globales. Las hojas de estilo CSS pueden ser compartidas por infinidad de pginas (incluso desde fuera de un sitio web). Un documento HTML puede tener asociadas ms de una hoja de estilo CSS. Si se precisa realizar un cambio de estilo visual de un sitio web nicamente deber hacerse en la hoja CSS correspondiente. Una misma hoja de estilo incluye las especificaciones para la presentacin de diferentes elementos de un documento. Esta informacin se almacena en un fichero de texto que suele tener la extensin .css Actualmente existen tres especificaciones CSS. La ms utilizada hoy da es CSS 2.1, aunque CSS 3 est implantndose muy rpidamente. Cuidado !!! Existen extensiones propietarias que nicamente funcionan en un determinado navegador y su uso est desaconsejado.

Funcionamiento de las hojas de estilo CSS

UNIVERSIDAD DE MURCIA

Al asociar una hoja CSS a una pgina WEB se sugiere al navegador como debe mostrar dicha pgina (es posible desactivar el uso de estilos desde el navegador)

Informacin
Documento (X)HTML

Presentacin
Hoja de estilo CSS

Servidor web

Estructura de las hojas de estilo CSS

Hoja de estilos Regla Regla Regla Regla Selector Atributos Regla Regla
body { font-family: Verdana; font-size: 1em; text-align: justify }

UNIVERSIDAD DE MURCIA

h1 { font-family: Verdana, sans-serif; font-size: 1.3em } code { font-family: Courier, sans-serif; font-size: 1em } .note{ background-color: #003333; border-width: thin; border-color: black; border-style: ridge; color: white; font-family: Geneva; font-size: .9em; vertical-align: text-bottom }

Prioridad de los estilos CSS

La definicin de los estilos para un elemento se puede realizar:
Dentro de la propia marca a travs del atributo style. Con una hoja de estilo interna del documento HTML. Con una hoja de estilo externa (que puede ser reutilizada por varios documentos) Comportamiento por defecto del visualizador (por ejemplo Mozilla Firefox)

UNIVERSIDAD DE MURCIA

Todas las definiciones se combinan en cascada para producir una nica hoja de estilo Las definiciones mas locales al documento tienen ms prioridad, es decir:
Navegador Prioridad 4 Hoja de estilo externa Prioridad 3 Hoja de estilo interna Prioridad 2 Atributo style Prioridad 1

Sintaxis de las reglas CSS

Selector {propiedad:valor} Normalmente el selector es el elemento al que se aplica el estilo

UNIVERSIDAD DE MURCIA

Selector

Declaracin

h2 { color : red }
Propiedad Valor

Herencia CSS
A menos que haya una regla mas especifica, los elementos comprendidos dentro de una etiqueta, heredan el estilo definido para esta etiqueta. La palabra enfatizada aparecer enfatizada y en azul (ya que es una regla mas especifica que prevalece sobre la herencia), mientras que el resto del texto se mostrar en rojo. Algunas propiedades como background no se heredan. Para los valores de propiedades que admiten valores porcentuales se hereda el "valor efectivo" (calculado) en base a valores establecidos para otras propiedades. Ejemplo:
p { font-size: 10pt } p { line-height: 200% }

UNIVERSIDAD DE MURCIA

Cdigo
h1 { color: red; } em { color: blue; }

Resultado

Un documento con ttulo con palabra enfatizada

Establecera un espaciado interlineal de 20pt (el 200% de 10pt).

Tipos de etiquetas

UNIVERSIDAD DE MURCIA

Cada etiqueta HTML pertenece a uno de los siguientes tipos. Cada tipo de etiqueta se muestra de una manera distinta:
Bloque: El contenido est separado del resto de elementos que lo rodean, normalmente se deja un margen de espacio encima y debajo de la etiqueta. En lnea: Los elementos no son separados del resto de elementos que lo rodean. Listas: Se comportan de manera similar al tipo bloque, pero adems se muestra una marca (vieta, numeracin) a su izquierda, para identificar cada elemento de la lista.

El tipo al que asociamos la etiqueta se controla con el atributo display

display : box

Convierte la caja en tipo bloque. Convierte la caja en tipo en lnea. Convierte la caja en tipo lista.

display : inline

display : list-item

Tipos de selectores
Etiqueta
p {text-align: center; color: red }

UNIVERSIDAD DE MURCIA

Se pueden agrupar varias etiquetas a las que se les aplica el mismo estilo
h1, h2, h3, h4, h5, h6 { color: green }

Clase ID Pseudo clase Pseudo elemento Contextual

Cmo se incluyen los estilos en un documento HTML?

Indicando la hoja u hojas de estilo CSS externas asociadas al documento. Utilizando una hoja de estilo interna en el elemento <head> del documento. Utilizando el atributo style dentro de una marca. IMPORTANTE: Recordar la prioridad de los estilos CSS. De dentro hacia afuera.

UNIVERSIDAD DE MURCIA

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="es"> <head> <title>Mi primer documento HTML</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="es"/> <meta name="description" content="Pgina web de ejemplo" /> <link rel="stylesheet" type="text/css" href="estilo1.css" /> <link rel="stylesheet" type="text/css" href="estilo2.css" /> <style type="text/css"> h1 {font-size: 20pt; } </style> </head> <body> <h1 style="color:red;"> Documento de prueba</h1> </body> </html>