Diseño y Programación de
Páginas Web
1.2. Hojas de Estilo CSS
Juan Ruiz de Miras (
[email protected])
Departamento de Informática
Universidad de Jaén
Contenidos
Introducción
1.
2. Sintaxis de las hojas de estilo
3. Uso de hojas de estilo
4. Especificación de reglas CSS
5. Cascada y herencia
6. Propiedades CSS
Juan Ruiz de Miras
2
1. Introducción
Evolución HTML:
HTML (1994): fácil, estructurado y muy pocas etiquetas
Navegadores ganan en visualización gráfica y HTML 4 (1997)
añade muchas etiquetas de formato (<font>, ...) y deja de ser un
lenguaje orientado a la estructura
Objetivo de las hojas de estilo:
Separar el contenido de las páginas web de su apariencia
contenidos: se especifican en ficheros HTML
formato: se especifica en ficheros CSS
CSS 1 (1996, 1999): fuentes, márgenes, colores, ...
CSS 2 (1998, 2005): posición absoluta, numeración automática, ...
CSS 3 (en desarrollo): interacción usuario, ...
http://www.w3.org/Style/CSS/
Juan Ruiz de Miras
3
1. Introducción
Principales ventajas y características:
Permite edición más fácil y rápida:
<h1 align="center">Apartado 1</h1>
Texto del primer apartado
<h1 align="center">Apartado 2</h1>
Texto del segundo apartado
Mayor posibilidad de formato que HTML
Reutilización de estilos
Aplicación y combinación en cascada
Reduce el tamaño del código a enviar
Inconvenientes:
Tratamiento desigual por los distintos navegadores
Juan Ruiz de Miras
4
Contenidos
Introducción
1.
2. Sintaxis de las hojas de estilo
3. Uso de hojas de estilo
4. Especificación de reglas CSS
5. Cascada y herencia
6. Propiedades CSS
Juan Ruiz de Miras
5
2. Sintaxis de las hojas de estilo
Los estilos se especifican utilizando reglas
Cada regla consta de:
selector: identifica los elementos de la página web a los que se
les aplicará el estilo
declaraciones: especifican el estilo a aplicar, cada declaración
consiste en un par:
propiedad CSS a aplicar
valor para la propiedad
Ejemplo: h1 {text-align: center;}
propiedad CSS valor
selector
declaraciones
regla
Juan Ruiz de Miras
6
Contenidos
Introducción
1.
2. Sintaxis de las hojas de estilo
3. Uso de hojas de estilo
4. Especificación de reglas CSS
5. Cascada y herencia
6. Propiedades CSS
Juan Ruiz de Miras
7
3. Uso de hojas de estilo
En línea
Incrustación
Vinculación
Varias hojas de estilo
Juan Ruiz de Miras
8
3.1 En línea
Se utiliza la propiedad STYLE de la etiqueta HTML
El valor de la propiedad STYLE es la especificación del estilo a
aplicar (declaraciones de la regla)
Ejemplo:
<h1 style="text-align:center">Apartado 1</h1>
Características:
No es la forma más práctica de aplicar estilos
Da más posibilidades de formato que utilizando sólo HTML
Tiene preferencia sobre el formato aplicado con HTML
<h1 align="right" style="text-align:center">
Apartado 1
</h1>
Juan Ruiz de Miras
9
3.2. Incrustación
Se utiliza la etiqueta STYLE en la cabecera de la página web
Entre <style type="text/css"> y </style> se especifican las reglas
Ejemplo:
<html>
<head>
</head>
<body>
</body>
</html>
<style type="text/css">
</style>
h1 {text-align:center;}
<h1>Apartado 1</h1>
Texto del primer apartado
Juan Ruiz de Miras
10
3.2. Incrustación
La hoja de estilos sólo afecta a la página donde se ha incrustado
Interesante si en el web hay unas pocas páginas con un formato
distinto al resto
Para evitar problemas en navegadores que no soportan CSS (IE antes
de la versión 3 y Netscape antes de la versión 4) se pueden poner las
reglas entre comentarios html:
<head>
<style type="text/css">
<!--
h1 {text-align:center;}
-->
</style>
</head>
Juan Ruiz de Miras
11
3.3 Vinculación
Separa realmente los contenidos (fichero .html) de su
formato (fichero .css)
El fichero de texto .css contiene las reglas de estilo
En la cabecera del fichero .html se establece la vinculación
con la hoja de estilos del fichero .css utilizando la etiqueta:
<link rel="stylesheet" href="fichero.css" type="text/css">
Es la forma más flexible de aplicar las hojas de estilo:
Permite cambiar el estilo sin tocar el código html
La misma hoja de estilo puede ser compartida por varias páginas
Juan Ruiz de Miras
12
3.3 Vinculación
Fichero "estilo.css":
h1 {text-align: center;}
h2 {text-indent: 20pt;}
Fichero html:
<html>
<head>
</head>
<body>
<link rel="stylesheet" href="estilo.css" type="text/css">
<h1>Apartado 1</h1>
Texto del primer apartado
<h2>SubApartado 1.1</h1>
Texto del subapartado
</body>
</html>
Juan Ruiz de Miras
13
3.4 Varias hojas de estilo
Combinar vinculación, incrustación y estilos en línea:
vinculación: para los estilos comunes a todo el web
incrustación: para personalizar varias páginas
estilos en línea: para detalles concretos
Juan Ruiz de Miras
14
3.4 Varias hojas de estilo
Vincular varias hojas en función del destino
se utiliza la propiedad MEDIA de la etiqueta LINK, posibles valores:
screen: visualización en el monitor, valor por defecto
print: cuando la página se imprime
projection: proyección
braille: dispositivos braille
speech: dispositivos de habla
all: para todos los dispositivos
Muy útil para diferenciar vista en pantalla y vista
</head>
Juan Ruiz de Miras
15
impresora:
<head>
<link rel="stylesheet" href="pantalla.css"
type="text/css" media="screen">
<link rel="stylesheet" href="impresora.css"
type="text/css" media="print">
3.4 Varias hojas de estilo
Vincular varias hojas y la selección la hace el usuario
se utiliza la propiedad NAME de la etiqueta LINK para dar nombre
a las hojas de estilo que se cargan por defecto pero que se pueden
desactivar
se da el valor "alternate stylesheet" a la propiedad REL para
especificar hojas de estilo alternativas que el usuario podrá activar
(también hay que especificar la propiedad NAME) pero que no se
cargan por defecto
NO está soportado por los navegadores actuales: debería aparecer
un menú donde se permitiera activar/desactivar las distintas hojas
de estilo:
IE permite cargar una hoja de estilo propia del usuario
Mozilla permite visualizar la página eliminando todas las hojas
de estilos
Juan Ruiz de Miras
16
3.4 Varias hojas de estilo
Vincular varias hojas y la selección la hace el usuario
<link rel="stylesheet" href="hoja1.css">
<link rel="stylesheet" href="hoja2.css" name="Por defecto">
<link rel="alternate stylesheet" href="hoja3.css" name="Alternativa">
<head>
</head>
hoja1.css se aplicará siempre y no es posible desactivarla
hoja2.css se aplicará inicialmente y es posible desactivarla
hoja3.css no se aplicará inicialmente pero es posible activarla
Juan Ruiz de Miras
17
Contenidos
Introducción
1.
2. Sintaxis de las hojas de estilo
3. Uso de hojas de estilo
4. Especificación de reglas CSS
5. Cascada y herencia
6. Propiedades CSS
Juan Ruiz de Miras
18
Especificación de reglas CSS
Agrupación de selectores y declaraciones
Especificación de selectores
Selectores de clase
Selectores "ID"
Selectores de contexto
Selectores de propiedades
Seudo-clases
Seudo-elementos
Juan Ruiz de Miras
19
4.1. Agrupación de selectores y declaraciones
Agrupación de selectores
Los selectores que comparten las mismas declaraciones se
pueden poner juntos en la misma regla, separados por comas:
H1, H2 {color:blue;} equivale a:
H1 {color:blue;}
H2 {color:blue;}
Juan Ruiz de Miras
20
4.1. Agrupación de selectores y declaraciones
Agrupación de declaraciones
Las declaraciones que afectan al mismo selector se pueden
poner juntas en la misma regla, separadas por puntos y comas:
H1 {color:blue; text-align:center;} equivale a:
H1 {color:blue;}
H1 {text-align:center;}
Juan Ruiz de Miras
21
4.2. Especificación de selectores
Especificación de selectores es variada y muy flexible
Permite sacar el máximo partido a las hojas de estilo
Los editores CSS no suelen aprovechar al máximo estas
capacidades
Selector universal: *
* {font-family:arial}
Selectores de tipo
Corresponden a las etiquetas HTML
Cambiando la hoja de estilo cambia el aspecto de la etiqueta html en
todos los sitios que aparezca y en todas las páginas vinculadas
Problema: cambiar el estilo en distintos sitios para la misma etiqueta
Juan Ruiz de Miras
22
4.2.1. Selectores de clase
Selectores de clase:
Permiten crear clases de estilos para aplicar a cualquier elemento o
como particularización de elementos concretos
Especificación:
Particularizar elemento:
elemento.id_clase
Ejemplo: h1.centrado {text-align:center;}
Clase genérica:
.id_clase
Ejemplo: .resaltado {color:red;}
Juan Ruiz de Miras
23
4.2.1. Selectores de clase
Selectores de clase:
Utilización:
<etiqueta class="id_clase1 id_clase2 …">
Ejemplo:
h1.centrado {text-align:center;}
.resaltar {color:red;}
<h1 class="centrado">Apartado 1</h1>
Texto del apartado 1
<p class="resaltar">Párrafo importante</p>
<p class="centrado">Párrafo centrado</p>
Implica modificar el código html, pero
(cid:
Crear cuenta
Comentarios de: 1.2. Hojas de Estilo CSS - Diseño y Programación de Páginas Web (0)
No hay comentarios