escuela técnica superior de ingeniería informática

(1)

Departamento de Departamento de

Lenguajes y Sistemas Informáticos Lenguajes y Sistemas Informáticos

escuela técnica superior de ingeniería informática

Tiem

Versiones previas: David Benavides y Amador Durán (septiembre 2006) Reestructuracion General: Manuel Resinas (octubre 2007) Ultima Revision: Cambios Menores. Pablo Fernandez (Octubre 2010)

Hojas de Estilo en Hojas de Estilo en

Cascada (CSS) Cascada (CSS)

Grupo de Ingeniería del Software

(2)

Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes

y Sistemas Informáticos

[Ángel US V7] Diseño: Amador Durán

1.

1. Conceptos básicosConceptos básicos 1.1 Presentación y1.1 Presentación y

contenidocontenido

1.2 Ejemplo de estilos1.2 Ejemplo de estilos 1.3 El estándar CSS1.3 El estándar CSS 2.

2. Aplicación de estilosAplicación de estilos 2.1 Atributo 2.1 Atributo stylestyle 2.2 Hoja interna2.2 Hoja interna 2.3 Hoja externa2.3 Hoja externa 2.4 La cascada2.4 La cascada 3.

3. Sintaxis CSSSintaxis CSS 3.1 Sintaxis básica3.1 Sintaxis básica 3.2 Selectores CSS3.2 Selectores CSS 3.3 Valores CSS3.3 Valores CSS 4.

4. Propiedades de estiloPropiedades de estilo 4.1 Tipo de letra4.1 Tipo de letra 4.2 Colores y fondos4.2 Colores y fondos 4.3 Texto4.3 Texto

4.4 Listas4.4 Listas 5.

5. Maquetación CSSMaquetación CSS 5.1 El concepto de caja 5.1 El concepto de caja 5.2 Estilos de caja5.2 Estilos de caja 5.3 Posicionamiento5.3 Posicionamiento 5.4 Visibilidad5.4 Visibilidad

•• Presentación y contenido Presentación y contenido

– La separación del contenido (la información que se

muestra) de la presentación (cómo se muestra) presenta numerosas ventajas.

• Simplifica el código de las páginas web.

• Permite dar una apariencia homogénea a un sitio web al aplicar los mismos estilos a todas sus páginas.

• Amplía las posibilidades de presentación de HTML al permitir mucho más control.

• Permite presentar el mismo contenido de diferentes formas sin tener que modificarlo.

•• La web semántica La web semántica

– La separación entre presentación y

contenido es el primer paso hacia la

web semántica.

(3)

[Ángel US V7] Diseño: Amador Durán Toro (2

1.

contenidocontenido

5. Maquetación CSSMaquetación CSS 5.1 El concepto de caja 5.1 El concepto de caja 5.2 Estilos de caja5.2 Estilos de caja 5.3 Posicionamiento5.3 Posicionamiento 5.4 Visibilidad5.4 Visibilidad 6.

6. CSS avanzadoCSS avanzado

•• Especificación de estilos (ejemplo) Especificación de estilos (ejemplo)

<html>

<body>

<h1>Ejemplo de CSS</h1>

<p>Párrafo sencillo</p>

</body>

</html>

h1 {

color: navy;

font-family: sans-serif;

border-bottom-width: 5;

border-bottom-style: solid;

border-bottom-color: blue;

}

p {

color: olive;

font-style: italic;

font-size: large; No todos los No todos los

(4)

1.

contenidocontenido

•• El estándar CSS El estándar CSS

– La primera versión del estándar es de diciembre de 1996, conocido como CSS nivel 1.

– Posteriormente, en mayo de 1998 se aprueba definitivamente la especificación CSS nivel 2.

– Desde junio de 2005 está disponible el borrador de CSS 2.1.

– Desde finales de 1999 se trabaja en CSS 3.

– Los estándares están disponibles en varios idiomas (incluido el

español) en la web

del W3C.

(5)

1.

contenidocontenido

•• El atributo El atributo style style

– Se puede especificar el estilo de un elemento HTML mediante el atributo style.

– No es recomendable porque no separa presentación de contenido.

<html>

<body>

<h1>Ejemplo atributo style</h1>

<p>Párrafo sin estilo</p>

<p style="font-family:monospace;

color:red">

Párrafo con estilo

</p>

</body>

</html>

Esta forma tiene Esta forma tiene la prioridad más

alta en la cascada*

(6)

1.

contenidocontenido

•• Hoja de estilo interna Hoja de estilo interna

– Se puede incluir una hoja de estilos en una cabecera HTML mediante el elemento <style>.

– Es mejor que usar el atributo style pero no permite reutilizar los estilos en otras páginas.

<html>

<head>

<!--

p {font-family:monospace; color:red}

-->

</style>

</head>

<body>

<h1>Ejemplo hoja interna</h1>

<p>Párrafo sin estilo</p>

<p>Párrafo con estilo</p>

(7)

1.

contenidocontenido

•• Hoja de estilo externa Hoja de estilo externa

– Para aplicar una hoja de estilos externa se usa el elemento

<link> en la cabecera.

– Es la forma recomendada, ya que permite reutilizar la misma hoja de estilo en varias páginas.

="ejemplo.css" />

<html>

<head>

</head>

<body>

<h1>Ejemplo hoja externa</h1>

<p>Párrafo de ejemplo</p>

</body>

</html>

/* ejemplo.css */

h1 {

color: navy;

font-family: sans-serif;

border-bottom-width: 5;

border-bottom-style: solid;

border-bottom-color: blue;

}

p {

color: olive;

font-style: italic;

font-size: large;

}

(8)

1.

contenidocontenido

•• Cascada de estilos Cascada de estilos

– Un mismo elemento de un documento HTML podría tener asociados varios estilos.

– La precedencia la tiene siempre el más cercano o el más específico.

– Si no se redefine, los elementos hijos heredan el estilo de su elemento padre.

hoja interna atributo style

usuario

(9)

1.

contenidocontenido

•• Sintaxis básica Sintaxis básica

– Los selectores indican a qué elementos afecta la declaración de estilo.

– La declaración está formada por una lista de pares propiedad:valor separados por punto y comas.

– Algunas propiedades admiten valores compuestos (separados por espacios) o valores alternativos (separados por comas).

– Se pueden importar (incluir) otras hojas de estilo.

– Se pueden introducir comentarios al estilo del lenguaje C tanto dentro como fuera de las declaraciones.

/* comentario */

selector

}

@

/* comentario */

selector

₁

, selector

₂

, …, selector

_M

{ propiedad

₁

: valor

₁

; /* comentario */

propiedad

₂

: valor

₂

;

… ;

propiedad

_N

: valor

_N

}

@import url(camino_hoja_externa.css);

declaración

(10)

1.

contenidocontenido

•• El ejemplo: El ejemplo:

<html>

<body>

<div>

<h1>Indice</h1>

<ul>

</ul>

</div>

<div>

<h1>Contenido</h1>

<p>Parrafo primero</p>

<p>Parrafo <em>segundo</em></p>

</div>

</body>

</html>

(11)

1.

contenidocontenido

•• Elementos HTML: el estilo se aplica a los elementos Elementos HTML: el estilo se aplica a los elementos especificados

especificados

p {

p { text text--indent indent: 2em; color: : 2em; color: blue blue; } ; }

<html>

<body>

<div>

<h1>Indice</h1>

<ul>

</ul>

</div>

<div>

<h1>Contenido</h1>

</div>

</body>

</html>

(12)

1.

contenidocontenido

•• Elementos HTML: el estilo se aplica a los elementos Elementos HTML: el estilo se aplica a los elementos especificados

especificados

p {

p { text text--indent indent: 2em; color: : 2em; color: blue blue; } ; }

h1 {color: red;}

<html>

<body>

<div>

<h1>Indice</h1>

<ul>

</ul>

</div>

<div>

<h1>Contenido</h1>

</div>

</body>

</html>

(13)

1.

contenidocontenido

•• Elementos HTML: el estilo se aplica a los elementos Elementos HTML: el estilo se aplica a los elementos especificados

especificados

p {

p { text text--indent indent: 2em; color: : 2em; color: blue blue; } ; } h1 {color: red;}

h1 {color: red;}

body

body {color: {color: green green;} ;}

<html>

<body>

<div>

<h1>Indice</h1>

<ul>

</ul>

</div>

<div>

<h1>Contenido</h1>

</div>

</body>

</html>

(14)

1.

contenidocontenido

•• Elementos HTML en contexto: el estilo se aplica a los Elementos HTML en contexto: el estilo se aplica a los elementos que cumplen la relación padre

elementos que cumplen la relación padre--hijo hijo especificada

especificada

p

p em em {{font font--weight weight: : bolder bolder; color: ; color: blue blue;} ;}

<html>

<body>

<div>

<h1>Indice</h1>

<ul>

</ul>

</div>

<div>

<h1>Contenido</h1>

</div>

</body>

</html>

(15)

1.

contenidocontenido

•• Elementos HTML en contexto: el estilo se aplica a los Elementos HTML en contexto: el estilo se aplica a los elementos que cumplen la relación padre

elementos que cumplen la relación padre--hijo hijo especificada

especificada

p

p em em {{font font--weight weight: : bolder bolder; color: ; color: blue blue;} ;}

lili em em {{text text--decoration decoration: : underline underline;} ;}

<html>

<body>

<div>

<h1>Indice</h1>

<ul>

</ul>

</div>

<div>

<h1>Contenido</h1>

</div>

</body>

</html>

(16)

1.

contenidocontenido

•• El ejemplo: Mediante el atributo El ejemplo: Mediante el atributo class class podemos asociar podemos asociar una o más clases (normalmente una) a un elemento una o más clases (normalmente una) a un elemento HTML

HTML

<html>

<body>

<div>

<h1>Indice</h1>

<ul>

</ul>

</div>

<div>

<h1>Titulo</h1>

<p class=“aviso”>Parrafo <em>segundo</em></p>

</div>

</body>

</html>

(17)

1.

contenidocontenido

•• Clases: Podemos asociar estilos a clases, que se Clases: Podemos asociar estilos a clases, que se aplicarán a cualquier elemento con el atributo

aplicarán a cualquier elemento con el atributo class class coincidente.

coincidente.

<html>

<body>

<div>

<h1>Indice</h1>

<ul>

</ul>

</div>

<div>

<h1>Contenido</h1>

</div>

</body>

</html>

.aviso { color: red; }

(18)

1.

contenidocontenido

•• Clases: Tambi Clases: También p én podemos asociar estilos a clases para odemos asociar estilos a clases para elementos de un tipo concreto.

elementos de un tipo concreto.

<html>

<body>

<div>

<h1>Indice</h1>

<ul>

</ul>

</div>

<div>

<h1>Contenido</h1>

</div>

</body>

</html>

.aviso { color: red; } .aviso { color: red; }

p.aviso

p.aviso {{text text--align align: center;} : center;}

(19)

1.

contenidocontenido

•• El ejemplo: Los elementos pueden tener un atributo El ejemplo: Los elementos pueden tener un atributo id id (que debe ser único dentro de un documento

(que debe ser único dentro de un documento XHTML/HTML)

XHTML/HTML)

<html>

<body>

<h1>Indice</h1>

<ul>

</ul>

</div>

<h1>Contenido</h1>

</div>

</body>

</html>

(20)

1.

contenidocontenido

•• Clases: Se pueden definir estilos para elementos con un Clases: Se pueden definir estilos para elementos con un determinado valor del atributo

determinado valor del atributo id id

<html>

<body>

<h1>Indice</h1>

<ul>

</ul>

</div>

<h1>Contenido</h1>

</div>

</body>

</html>

##menu menu {{border border--style style: : dotted dotted;} ;}

(21)

1.

contenidocontenido