PDF de programación - Hojas de estilo en cascada - Accesibilidad en la Web

Accesibilidad en la Web

Universidad de Colima

México

Departamento de Lenguajes y
Sistemas Informáticos

Hojas de estilo en cascada
Hojas de estilo en cascada

Departamento de Lenguajes y Sistemas Informáticos

Sergio Luján Mora

Universidad de Alicante

DLSI – Universidad de Alicante

1

Contenido

• Introducción
• Ejemplos
• Sintaxis
• Herramientas

Introducción

• ¿Qué significa?
• ¿Para qué sirve?
• ¿Cómo se utiliza?
• ¿Hay algún problema de compatibilidad?

DLSI – Universidad de Alicante

2

Introducción
• CSS: Cascading Style Sheet
• Estándar de W3C
• Los estilos definen cómo mostrar los

elementos HTML

• Los estilos se incluyen en la misma

á i
t
página o en un fichero aparte

fi h

• En cascada: múltiples estilos se

fusionan en uno

Introducción

• Se crearon para resolver una serie de

problemas
problemas

• Las etiquetas de HTML inicialmente

indicaban el contenido de un documento:
– <h1>: Esto es un encabezado
– <p>: Esto es un párrafo
– <table>: Esto es una tabla

• Pero llegaron Netscape y Microsoft y

empezaron a añadir etiquetas de estilo:
<font>, atributo color, etc.

DLSI – Universidad de Alicante

3

Introducción

• Objetivo: separar la presentación (estilo) del

contenido de las páginas web

p g

• ¿Por qué?:

páginas

– Permite unificar la presentación de múltiples

– Permite controlar con más detalle la presentación
– Permite modificar cada uno por separado

– Permite emplear distintas presentaciones para el
l

Distintas personas
P
mismo contenido Distintos dispositivos
– Permite reducir el peso de los sitios web:

di ti t

t

i

• Definición única
• Evita el uso de tablas para situar el contenido

it

l

Introducción

• Varias versiones:

– CSS1: CSS nivel 1. 1996.

• http://www.w3.org/TR/REC-CSS1

– CSS2: CSS nivel 2. 1998.

• http://www.w3.org/TR/REC-CSS2/

– CSS2 revisión 1. 2003.
– CSS3: CSS nivel 3. En desarrollo.

• Incompatibilidades entre navegadores

DLSI – Universidad de Alicante

4

Introducción

• Más información:

– W3C: http://www.w3.org/
– W3 Schools: http://www.w3schools.com/

DLSI – Universidad de Alicante

5

Ejemplos

• CSS Zen Garden
• CSS/edge
• Once
• Seguridad Social

DLSI – Universidad de Alicante

6

DLSI – Universidad de Alicante

7

DLSI – Universidad de Alicante

8

DLSI – Universidad de Alicante

9

DLSI – Universidad de Alicante

10

DLSI – Universidad de Alicante

11

DLSI – Universidad de Alicante

12

DLSI – Universidad de Alicante

13

CSS

• Tipos de propiedades:

– Fuentes: tipos letra, tamaño, negrita, cursiva,...
– Color: de texto, de fondo, imagen de fondo,...
– Texto: justificación, espacio entre letras y/o

palabras

– Caja: bordes a los 4 lados
– Formato visual:posición en la página mostrar o
– Formato visual:posición en la página, mostrar o

no...

– Tablas
– Listas, numeración automática

CSS
• Estructura dentro del CSS:

Selector {propiedad1:valor1; …}

• Selectores:

– De tipos: nombre de elemento HTML
– De clases: nombre de la clase precedido por .
– De ID: nombre del identificador precedido por #

( ól
HTML)
(sólo puede haber uno por documento HTML)

d h b

d

– De pseudo-clases: selector : nombre de la

pseudo-clase

DLSI – Universidad de Alicante

14

CSS

• Propiedad: la propiedad del selector

que deseamos modificar

• Valor: el valor deseado, ya sea el

nombre de un tipo de letra, un tamaño,
un color, etc

• Para especificar varias propiedades se
• Para especificar varias propiedades se

separan con un punto y coma

CSS

• Ejemplo:
body {color: black; font-size: 15px;}
p {background: yellow;}
.rojo {background: red;}
.azulGrande {background: blue; font-size:

30px;}

#rojo {color: red;}
#rojo {color: red;}
• Si el valor tiene múltiples palabras:
p {font-family: "Times New Roman"}

DLSI – Universidad de Alicante

15

CSS

• Queremos mostrar un texto con el estilo
H1 con fondo rojo, otro con fondo verde
y otro con fondo azul

• ¿Cómo se haría con HTML?

CSS

• Con sólo HTML:
<table border="0" bgcolor="red" width="100%">
<table border 0 bgcolor red width 100% >
<tr><td><h1>Fondo rojo</h1></td></tr>
</table>
<table border="0" bgcolor="green" width="100%">
<tr><td><h1>Fondo verde</h1></td></tr>
</table>
<table border="0" bgcolor="blue" width="100%">
<tr><td><h1>Fondo azul</h1></td></tr>
</table>

DLSI – Universidad de Alicante

16

CSS

• Con CSS:
h1 {background: red;}
.titulo {background: green;}
.subtitulo {background: blue;}

DLSI – Universidad de Alicante

17

CSS

• Uso:
<h1>Fondo rojo</h1>
<h1 class=”titulo”>Fondo verde</h1>
<h1 class=”subtitulo”>Fondo azul</h1>

DLSI – Universidad de Alicante

18

CSS

• Para aumentar la legibilidad, se puede

escribir en varias líneas:

p {
text-align: center;
color: black;
font-family: arial
font family: arial
}

CSS

• Se pueden agrupar selectores:
h1,h2,h3,h4,h5,h6 { color: green; }
Equivale a:
h1 { color: green; }
h2 { color: green; }
h3 { color: green; }
h4 { color: green; }
h5 { color: green; }
h6 { color: green; }

DLSI – Universidad de Alicante

19

CSS

• Existe un selector universal (*) que
representa a cualquier elemento de
la página:
*{color:red;}
• Existe una jerarquía de herencia: un
elemento hereda las propiedades del
elemento que lo contiene
– No se heredan todas las propiedades

CSS

y

;

y {

• Hoja de estilo:
body {font-family: Arial; color: blue;}
;}
table {background: yellow; font-size: 18px;}
tr {color: red;}
td {text-decoration: underline;}
• HTML:
<p>Esto es un párrafo de texto con unas propiedades.
</p>
<table>
<tr><td>Esto es una fila</td></tr>
<tr><td>Esto es una fila</td></tr>
<tr><td>Esto es otra fila fila</td></tr>
</table>
• ¿Cuál es el resultado?

DLSI – Universidad de Alicante

20

CSS

• Un selector cuando aparece dentro de

otro selector (descendiente):

h1 a {color:red; font-family: sans-

serif;}

DLSI – Universidad de Alicante

21

CSS

• Hoja de estilo:
p b {background: red;}
p b {background: red;}
p i {background: green;}
p b i {color: blue;}
• HTML:
<p>En este párrafo ocurren cosas curiosas:
<i>este está en cursiva</i>, y finalmente

<b>este texto está en negrita</b>,
<b><i>este está en negrita y cursiva</i></b> y
y
<i><b>este también en negrita y
cursiva</b></i>.

</p>
• ¿Cuál es el resultado?

g

y

DLSI – Universidad de Alicante

22

CSS
html

head

title

style

body

p

b

i

b

i

i

b

CSS

• Un selector cuando aparece dentro de

otro selector (hijo):

h1 > a {color:red; font-family:

sans-serif;}

(No funciona en Internet Explorer 6)

DLSI – Universidad de Alicante

23

CSS

• Hoja de estilo:
p > b {background: red;}
p > b {background: red;}
p > i {background: green;}
p > b > i {color: blue;}
• HTML:
<p>En este párrafo ocurren cosas curiosas:
<i>este está en cursiva</i>, y finalmente

<b>este texto está en negrita</b>,
<b><i>este está en negrita y cursiva</i></b> y
y
<i><b>este también en negrita y
cursiva</b></i>.

</p>
• ¿Cuál es el resultado?

g

y

DLSI – Universidad de Alicante

24

Ejercicio:
- Crear una página web sencilla donde se use
lo aprendido hasta el momento

DLSI – Universidad de Alicante

25

CSS

• Comentarios:
/*/*
…
*/
• Ejemplo:
/* Párrafo normal */
p {
text align: center; /* Centrado */
text-align: center; /* Centrado */
color: black; /* Negro */
font-family: arial /* Tipo de letra */
}

Hojas de estilo (CSS)

CSS

• Clase: Utilizar el mismo formato más de una vez:

Para una sola etiqueta: Cuando deseemos
– Para una sola etiqueta: Cuando deseemos
especificar una propiedad que sólo pueda ser utilizada
por un tipo de etiqueta:
• h1.rojo {color:rojo;}

<h1 class=”rojo”> Título rojo </h1>
<p class=”rojo”> Párrafo con texto del color por
defecto y no rojo </p>

Genérico: Para utilizarlo con cualquier etiqueta HTML:
– Genérico: Para utilizarlo con cualquier etiqueta HTML:
• .rojo {color:red;}

<h1 class=”rojo”> Título rojo </h1>
<p class=”rojo”> Párrafo con texto rojo </p>

DLSI – Universidad de Alicante

26

CSS

• Se pueden especificar varias clases a la

vez:
vez:

<p class="right" class="center"> Esto es un

párrafo a la derecha y centrado </p>

<p class="right center"> Esto es un párrafo a la

derecha y centrado </p>
derecha y centrado </p>

Pero cuidado cuando dos o más clases

emplean la misma propiedad …

Ejercicio:
- ¿Cuál es el resultado del siguiente código?
- ¿Qué pasa si cambiamos el orden de las
declaraciones de los estilos?
declaraciones de los estilos?

DLSI – Universidad de Alicante

27

CSS

/

<html>
<head>
<style type="text/css" media="screen">
<!--
.verde {color: #00FF00; background: #00FFFF;}
.rojo {color: #FF0000; font-family: Arial;}
-->
</style>
</head>
<body>
<h1 class="rojo">Esto es rojo</h1>
<h1 class= rojo >Esto es rojo</h1>
<h1 class="rojo verde">Esto es rojo y verde</h1>
<h1 class="verde">Esto es verde</h1>
<h1 class="verde rojo">Esto es verde y rojo</h1>
</body>
</html>

DLSI – Universidad de Alicante

28

CSS

• ID: Para un solo uso, ya que sólo será

utilizado por la etiqueta con ese
identificador:
– h1#rojo {color:red;} /* Etiqueta

especifica */
#rojo {color:red;} /*
Etiqueta genérica */
<h1 id=”rojo”> Título rojo </h1>

DLSI – Universidad de Alicante

29

CSS

• Pseudo-clases: Utilizado para especificar

los diferentes “estados” de las etiquetas:
los diferentes estados de las etiquetas:
– a:visited {color:red;}

a:hover {color:red;background:blue;}

• Pseudo-clases:

– a:link: Enlace no visitado
– a:hover: Cursor sobre enlace
– a:visited: Enlace visitado
– a:active: Enlace activo
– :first-child: Estilo especial para un
elemento que es el primer hijo de otro elemento
– :lang: Estilo especial para un idioma particular

CSS

• Pseudo-elementos: Cuando deseemos
ól d b d

especificar una propiedad que sólo debe de
cumplir una parte de un elemento
– p:first-letter {font-size:3em}

i d d

ifi

DLSI – Universidad de Alicante

30

CSS

til

i

• Pseudo-elementos:

Añ d

– :first-letter: Añade un estilo especial
l
a la primera letra de un texto (letra
capitular)
– :first-lin