HTML5 y CSS3

2

HTML 5
●

Referencias históricas. Evolución de HTML y XHTML

●

¿Qué aporta HTML 5?

●

Estructura de una página web. Semántica

●

Diferencias entre HTML 5 y HTML 4.01 / XHTML 1.0

●

Formularios

●

Incorporación de elementos multimedia

●

Más etiquetas incorporadas en HTML 5

●

Webs offline

●

¿Únicamente para crear webs?

3

Referencias históricas.
Evolución de HTML y XHTML
HTML

HTML

HTML 5.0
- Opera y Mozilla proponen HTML5

HTML 2.0

- Apple, Opera y Mozilla crean WHATWG
para desarrollar HTML5

HTML 3.0

- W3C empieza a trabajar con
WHATWG en HTML5

HTML 3.2

- Primer borrador de HTML5
- 1ª
versión candidata

HTML 4.0

- 2ª
versión candidata

HTML 4.01

XHTML 1.0

XHTML
XHTML 1.1

XHTML 2.0
- Incompatible con todo lo anterior
1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014

4

¿Qué aporta HTML 5?
Algunas reglas establecidas para
el desarrollo de HTML 5
●

●

●

●

●

●

Las nuevas características deben
basarse en HTML, CSS, DOM y
JavaScript
Reducir la necesidad de plugins
externos
Mejor manejo de errores

Algunas de las novedades más
interesantes en HTML 5
●

Nuevas etiquetas para dar más
significado a las páginas
(semántica)

●

Más control en los formularios

●

Almacenamiento offline

●

Soporte para audio y vídeo

Más etiquetas para reemplazar
scripting

●

Debe ser independiente del
dispositivo

●

Sockets web

●

Doctype sencillo

●

XHTML 5

El proceso de desarrollo es
visible para el público

http://www.w3.org/TR/html5/
http://www.w3.org/html/wg/drafts/html/master/Overview.html

El elemento canvas para crear
dibujos y animaciones

http://www.w3.org/TR/html5/introduction.html#html-vs-xhtml

5

Estructura de una página web.
Semántica
Etiquetas para estructurar
la web
●

<header>

●

<main>

●

<nav>

●

<section>

●

<article>

●

<aside>

●

<footer>

Advertencias:
http://html5doctor.com/avoiding-common-html5-mistakes/
http://www.w3.org/TR/html5/sections.html#the-section-element
http://html5doctor.com/aside-revisited/

6

Semántica
la web
●

●

<header>

Encabezados
●

Títulos jerarquizados

<main>

●

<nav>

●

<article>

●

<aside>

●

●

<section>

●

<h1> ··· <h6>
<header>

<footer>

Advertencias:

Encabezado del documento.
Especifica una introducción o
elementos de navegación
●

Sectioning content:

article, aside, nav, section

HTML5 outliner: http://gsnedders.html5.org/outliner
Advertencia: http://html5doctor.com/the-hgroup-element/

7

Semántica
la web
●

<header>

●

<main>

●

<nav>

●

<section>

●

<article>

●

<aside>

●

<footer>

Advertencias:

8

Semántica
header

la web
●

<header>

●

<main>

●

<nav>

●

<section>

●

<article>

●

<aside>

●

<footer>

Advertencias:

9

Semántica
header

la web
●

<header>

●

<main>

●

<nav>

●

<section>

●

<article>

●

<aside>

●

<footer>

Advertencias:

10

Semántica
header

la web
●

<header>

●

<main>

●

<nav>

●

<section>

●

<article>

●

<aside>

●

<footer>

h1

Advertencias:

11

Semántica
header

la web
●

<header>

●

<main>

h1

●

<nav>

●

<section>

●

<article>

●

<aside>

●

<footer>

Advertencias:

nav

12

Semántica
header

la web
●

<header>

●

<main>

●

<nav>

●

<section>

●

<article>

●

<aside>

●

<footer>

Advertencias:

h1

nav

13

Semántica
header
main

la web
●

<header>

●

<main>

●

<nav>

●

<section>

●

<article>

●

<aside>

●

<footer>

Advertencias:

h1

nav

14

Semántica
header
main

la web
●

<header>

●

<main>

●

<nav>

●

<section>

●

<article>

●

<aside>

●

<footer>

Advertencias:

h2

h1

nav

15

Semántica
header
main

la web
●

<header>

●

<main>

●

<nav>

●

<section>

●

<article>

●

<aside>

●

<footer>

Advertencias:

h1

h2

div “slider”

nav

16

Semántica
header
main

la web
●

<main>

●

<nav>

●

<section>

●

<article>

●

<aside>

●

<footer>

h2

div “slider”

<header>

●

h1

Advertencias:

section “definitions”

nav

17

Semántica
header
main

la web
●

<main>

●

<nav>

●

<section>

●

<article>

●

<aside>

●

<footer>

h2

div “slider”

<header>

●

h1

Advertencias:


nav

18

Semántica
header
main

article

la web

●

<main>

●

<nav>

●

<section>

●

<article>

●

<aside>

●

<footer>

h2

div “slider”

<header>

●

h1

Advertencias:


nav

19

Semántica
header
main

article

article
la web

●

<main>

●

<nav>

●

<section>

●

<article>

●

<aside>

●

<footer>

nav

h2

div “slider”
article

<header>

●

h1

Advertencias:


20

Semántica
header
main

article
h1

article
la web
h1

●

<main>

●

<nav>

●

<section>

●

<article>

●

<aside>

●

<footer>

nav

h2

div “slider”
article
h1

<header>

●

h1

Advertencias:


21

Semántica
header
main

la web
●

<main>

nav

h2

div “slider”

<header>

●

h1

●

<nav>

●

<section>

●

<article>

●

<aside>

●

<footer>

Advertencias:

article

article

article

22

Semántica
header
main

la web
●

<main>

nav

h2

div “slider”

<header>

●

h1

●

<nav>

●

<section>

●

<article>

●

<aside>

●

<footer>

Advertencias:

article

aside

article

article

23

Semántica
header
main

la web
●

<main>

nav

h2

div “slider”

<header>

●

h1

●

<nav>

●

<section>

●

<article>

●

<aside>

●

<footer>

Advertencias:

article

aside
section “news”

article

article

24

Semántica
header
main

la web
●

<main>

nav

h2

div “slider”

<header>

●

h1

●

<section>

article

<nav>

●


●

<article>

●

<aside>

●

<footer>

Advertencias:

aside
section “news”

article

article

25

Semántica
header
main

la web

h1

nav

h2

div “slider”

article

●

<header>

●

<main>

●

<section>

article

<nav>

●


●

<article>

●

<aside>

●

<footer>

Advertencias:

aside
section “news”

article

article

26

Semántica
header
main

la web

h1

nav

h2

div “slider”

article
header

●

<header>

●

<main>

●

<section>

article

<nav>

●


●

<article>

●

<aside>

●

<footer>

Advertencias:

aside
section “news”

article

article

27

Semántica
header
main

la web

h1

nav

h2

div “slider”

article
header

●h1

<header>

●

<main>

●

<section>

article

<nav>

●


●

<article>

●

<aside>

●

<footer>

Advertencias:

aside
section “news”

article

article

28

Semántica
header
main

la web
article
header

●h1

<header>

●

h2

div “slider”

article
header

h1

h1

<section>


article

<nav>

●

●

<article>

●

<aside>

●

nav

article
header

<main>

●

h1

<footer>

Advertencias:

aside
section “news”

article

article

29

Semántica
header
main

la web
●

<main>

nav

h2

div “slider”

<header>

●

h1

●

<nav>

●

<section>

●

<article>

●

<aside>

●

<footer>

Advertencias:

article

article

article

article

article

aside
section “news”
article

30

Semántica
header
main

la web
●

<main>

nav

h2

div “slider”

<header>

●

h1

●

<nav>

●

<section>

●

<article>

●

<aside>

●

article

article

article

article

aside
section “news”
article

<footer>
footer

Advertencias:

article

31

Semántica
header
main

la web
●

nav

h2

div “slider”

<header>

●

h1

<main>

●

<nav>

●

article

article

<section>

●

<article>

●

<aside>

●

aside
section “news”
article

<footer>
footer

Advertencias:

article

article

article

32

Semántica
header
main

la web
section
●

nav

h2

div “slider”

<header>

●

h1

<main>

●

<nav>

●

article

article

<section>

●

<article>

●

<aside>

●

aside
section “news”
article

<footer>
footer

Advertencias:

article

article

article

33

Semántica
header
main

la web
section
●

<header>

●

h1

nav

h2

div “slider”

h1

<main>

●

<nav>

●

article

article

<section>

●

<article>

●

<aside>

●

aside
section “news”
article

<footer>
footer

Advertencias:

article

article

article

34

Semántica
header
main

la web
section
●

<header>

●

h1

h1

nav

h2

div “slider”
section
h1

section
h1

<main>

●

<nav>

●

article

article

<section>

●

<article>

●

<aside>

●

aside
section “news”
article

<footer>
footer

Advertencias:

article

article

article

35

Semántica
header
main

la web
●

<main>

nav

h2

div “slider”

<header>

●

h1

●

<nav>

●

<section>

●

<article>

●

<aside>

●

article

article

article

article

article

aside
section “news”
article

<footer>
footer

Advertencias:

section

section

section

36

Diferencias entre HTML 5 y
HTML 4.01 / XHTML 1.0
Estructura HTML 5
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Título del sitio</title>
</head>
<body>
<div id="contenedor">
<header id="cabecera">

<nav id="menuPrincipal"></nav>
</header>
<aside id="colIzq">

</aside>
<main id="colCentro">

<article>

</article>
<article>
</article>
</main>
<footer id="pie"></footer>
</div>
</body>
</html>

Estructura HTML 4.01 / XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
</head>
<body>
<div id="cabecera">
<div id="menuPrincipal"></div>
</div>
<div id="colIzq">
</div>
<div id="colCentro">
<div class="articulo">
</div>
</div>
</div>
<div id="pie"></div>
</div>
</body>
</html>

37

Estructura HTML 5
<!DOCTYPE HTML>
<html lang="es">
<head>
</head>
<body>
</header>
<aside id="colIzq">
</aside>
<article>
</article>
<article>
</article>
</main>
</div>
</body>
</html>

<head>
</head>
<body>
<div id="cabecera">
</div>
<div id="colIzq">
</div>
</div>
</div>
</div>
</div>
</body>
</html>

38

Estructura HTML 5
<!DOCTYPE HTML>
<html lang="es">
<head>
</head>
<body>
</header>
<aside id="colIzq">
</aside>
<article>
</article>
<article>
</article>
</main>
</div>
</body>
</html>

<head>
</head>
<body>
<div id="cabecera">
</div>
<div id="colIzq">
</div>
</div>
</div>
</div>
</div>
</body>
</html>

39

Estructura HTML 5
<!DOCTYPE HTML>
<html lang="es">
<head>
</head>
<body>
</header>
<aside id="colIzq">
</aside>
<article>
</article>
<article>
</article>
</main>
</div>
</body>
</html>

<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
</head>
<body>
<div id="cabecera">
</div>
<div id="colIzq">
</div>
</div>
</div>
</div>
</div>
</body>
</html>

40

Estructura HTML 5
<!DOCTYPE HTML>
<html lang="es">
<head>
</head>
<body>
</header>
<aside id="colIzq">
</aside>
<article>
</article>
<article>
</article>
</main>
</div>
</body>
</html>

<head>
</head>
<body>
<div id="cabecera">
</div>
<div id="colIzq">
</div>
</div>
</div>
</div>
</div>
</body>
</html>

41

Estructura HTML 5


<!DOCTYPE HTML>
<html lang="es">
<head>
</head>
<body>
</header>
<aside id="colIzq">
</aside>
<article>
</article>
<article>
</article>
</main>
</div>
</body>
</html>

<head>
</head>
<body>
<div id="cabecera">
</div>
<div id="colIzq">
</div>
</div>
</div>
</div>
</div>
</body>
</html>

42

Estructura HTML 5
<!DOCTYPE HTML>
<html lang="es">
<head>
</head>
<body>
</header>
<aside id="colIzq">
</aside>
<article>
</article>
<article>
</article>
</main>
</div>
</body>
</html>

<head>
</head>
<body>
<div id="cabecera">
</div>
<div id="colIzq">
</div>
</div>
</div>
</div>
</div>
</body>
</html>

43

Estructura HTML 5
<!DOCTYPE HTML>
<html lang="es">
<head>
</head>
<body>
</header>
<aside id="colIzq">
</aside>
<article>
</article>
<article>
</article>
</main>
</div>
</body>
</html>

<head>
</head>
<body>
<div id="cabecera">
</div>
<div id="colIzq">
</div>
</div>
</div>
</div>
</div>
</body>
</html>

44

Estructura HTML 5
<!DOCTYPE HTML>
<html lang="es">
<head>
</head>
<body>
</header>
<aside id="colIzq">
</aside>
<article>
</article>
<article>
</article>
</main>
</div>
</body>
</html>

<head>
</head>
<body>
<div id="cabecera">
</div>
<div id="colIzq">
</div>
</div>
</div>
</div>
</div>
</body>
</html>

45

Estructura HTML 5
<!DOCTYPE HTML>
<html lang="es">
<head>
</head>
<body>
</header>
<aside id="colIzq">
</aside>
<article>
</article>
<article>
</article>
</main>
</div>
</body>
</html>

<head>
</head>
<body>
<div id="cabecera">
</div>
<div id="colIzq">
</div>
</div>
</div>
</div>
</div>
</body>
</html>

46

Formularios
●

Nuevos tipos de <input>

●

Nuevos atributos

●

Nuevas etiquetas:
–

<datalist>

–

<keygen>

–

<output>

47

Nuevos tipos de <input>
●

color

●

date, datetime, datetime-local, month, week, time

●

email

●

number

●

range

●

search

●

tel

●

url

49

Incorporación de elementos multimedia
●

<video>

●

<audio>

●

<canvas>

50

<video>
Etiquetas
●

<video>

●

<source>

●

<track>

Atributos de <video>
●

src

●

height, width

●

controls

●

autoplay

●

preload (auto, metadata, none)

●

loop

●

poster

●

muted

●

crossorigin

●

mediagroup

<video src="video.ogv" width="1024" height="436" controls="controls" preload="auto" poster="poster.jpg">
Por favor <a href="http://browsehappy.com/">actualiza el navegador</a> para mejorar la experiencia de uso.
</video>

http://diveintohtml5.info/video.html
http://camendesign.com/code/video_for_everybody

<video width="320" height="240" controls="controls">
<source src="video.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<a href="webDelVideo"><img src="poster.jpg" alt="video" /></a>
</video>

51

<audio>
Etiquetas
●

<audio>

●

<source>

●

<audio src="rebirth.ogg" controls="controls" preload="auto" autoplay="autoplay" loop="loop">
Por favor <a href="http://browsehappy.com/">actualiza el navegador</a> para mejorar la experiencia de uso.
</audio>

<track>

Atributos de <audio>
●

src

●

controls

●

autoplay

●

preload (auto, metadata, none)

●

loop

●

muted

●

crossorigin

●

mediagroup

<audio id="rebirth" controls="controls" preload="auto">
<source src="rebirth.ogg" type="audio/ogg">
<source src="rebirth.mp3" type="audio/mpeg">
<p>Por favor <a href="http://browsehappy.com/">actualiza el navegador</a> para mejorar la experiencia de uso.</p>
</audio>

52

<canvas>
Atributos
●

width

●

height

Advertencia:
No se puede dibujar sin utilizar
JavaScript

http://www.chromeexperiments.com/
http://weavesilk.com/
http://mugtug.com/sketchpad/

<canvas id="dibujo" width="400" height="400">
Su navegador no soporta HTML5.<br />
Por favor <a href="http://browsehappy.com/">actualice el navegador</a> para mejorar la experiencia de uso.
</canvas>

<canvas id="logotipo" width="100" height="120">
<img src="logo.png" alt="Logotipo" />
</canvas>

53

Otras etiquetas incorporadas en HTML
5
<figure>
<img src="img/setas_MAC.jpg" alt="Metropol Parasol en Sevilla" />
<figcaption>Fotografía de <span>Manuel Ángel Carmona</span></figcaption>
</figure>

Etiquetas
●

<details>, <summary>

●

<time>

●

<meter>

●

<progress>

●

<figure>, <figcaption>

●

<mark>
<p>Compra <meter value="3" min="0" max="4">paso 3 de 4</meter></p>

Curiosidad:
http://www.webmonkey.com/2011/11/w3c-adds-time-element-back-to-html5/

54

Webs offline
The cache manifest (El manifiesto de cache)

<html lang="es" manifest="cache.appcache">

CACHE MANIFEST
# v:01 rev:001
CACHE:
NETWORK:
FALLBACK:

CACHE MANIFEST
/clock.css
/clock.js
/clock-face.jpg

http://html5css3.somosalumnos.com

CACHE MANIFEST
NETWORK:
/tracking.cgi
CACHE:
/clock.css
/clock.js
/clock-face.jpg

CACHE MANIFEST
FALLBACK:
/ /offline.html
NETWORK:
*
Código de
http://diveintohtml5.info/

55

¿Únicamente para crear webs?
http://html5test.com/

56

CSS 3
●

CSS Level 3

●

Selectores

●

Valores y unidades

●

Colores y transparencias

●

Fuentes

●

Nuevas propiedades

●

Funciones

●

Media Queries

●

CSS Template Layout Module

http://css3test.com/

57

CSS Level 3
●

●

●

●
●

●

Las hojas de estilo en cascada (CSS) no tienen versiones en el sentido
tradicional, sino niveles
Cada nivel de CSS se basa en el anterior, refinando definiciones y
añadiendo características
CSS Level 1: Todas las características de CSS 1 pero con la sintaxis
indicada en CSS 2.1
CSS Level 2: Lo define la especificación CSS 2.1
CSS Level 3: Se basa en CSS Level 2 módulo a módulo, utilizando CSS
2.1 como su núcleo. Cada módulo añade funcionalidad y/o reemplaza parte
de CSS 2.1
Estado de desarrollo de CSS: http://www.w3.org/Style/CSS/current-work

Guía de referencia: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

58

Selectores (1/7)
●

ef

: Cualquier <f> incluido en <e>

●

e>f

: Cualquier <f> hijo de <e>

●

e+f

: <f> inmediatamente precedido por <e>

●

e~f

: <f> precedido por <e>

<p>párrafo 1</p>
<h1>Título</h1>
<p>párrafo 2</p>
<p>párrafo 3</p>
<p>párrafo 4</p>
<p>párrafo 5</p>

http://www.w3.org/TR/css3-selectors/#selectors

h1 + p {
font-size: 1.5em;
font-style: italic;
}
h1 ~ p {
background-color: #FBD551;
}

59

Selectores (2/7)
●

e[atr]

: <e> si posee el atributo atr

●

e[atr="v"]

: <e> si posee el atributo atr con el valor "v"

●

e[atr~="v"]

: <e> con atr y el valor "v" dentro de una lista de valores

●

e[atr^="v"]

: <e> con atr y un valor que empiece por "v"

●

e[atr$="v"]

: <e> con atr y un valor que termine por "v"

●

e[atr*="v"]

: <e> con atr y un valor que contenga la subcadena "v"

<a href="http://www.w3c.es/">W3C España</a><br />
<a href="http://es.wikipedia.org/wiki/World_Wide_Web_Consortium"> W3C Wikipedia</a><br />
<a href="http://www.w3.org/">W3C</a>

a {color: #4364E0; text-decoration: none; font-weight: bold;}
a[href*="w3"] {
background: url(w3c.png) no-repeat 100% 50%;
padding-right: 20px;
}

60

Selectores (3/7)
●

:root

: raíz del documento. Se corresponde con la etiqueta <html>

●

e:empty

: <e> sin hijos

●

e:first-child

: <e> cuando es el primer hijo de su elemento padre

●

e:last-child

: <e> cuando es el último hijo de su elemento padre

●

e:only-child

: <e> cuando es el único hijo de su elemento padre

●

e:nth-child(n)

: <e> cuando es el enésimo hijo de su elemento padre

●

e:nth-last-child(n) : <e> cuando es el enésimo hijo contando desde el final

<p>párrafo 1</p>
<div>
<h1>Título</h1>
<h2>Subtítulo</h2>
</div>
<p>párrafo 2</p>
<p>párrafo 3</p>
<p>párrafo 4</p>
<p>párrafo 5</p>

p:nth-child(4) {
color: #E5E5E5;
background-color: #7F7F7F;
}

61

Selectores (4/7)
●

e:first-of-type

: <e> cuando es el primer <e> de su elemento padre

●

e:last-of-type

: <e> cuando es el último <e> de su elemento padre

●

e:only-of-type

●

e:nth-of-type(n)

●

e:nth-last-of-type(n) : <e> cuando es el enésimo <e> contando desde el final

●

:not(e)

<p>párrafo 1</p>
<div>
<h1>Título</h1>
<h2>Subtítulo</h2>
</div>
<p>párrafo 2</p>
<p>párrafo 3</p>
<p>párrafo 4</p>
<p>párrafo 5</p>

: <e> cuando es el único <e> de su elemento padre
: <e> cuando es el enésimo <e> de su elemento padre
: cualquier <e> que no es el indicado

p:nth-of-type(4) {
color: #E5E5E5;
background-color: #7F7F7F;
}

62

Selectores (4/7)

Caso práctico: Formato de tablas (1/6)
<table>
<tr>
<th>Ventas</th>
<th>Trim1</th>
<th>Trim2</th>
<th>Trim3</th>
<th>Trim4</th>
<th>Total vendedor</th>
</tr>
<tr>
<th>Blanco</th>
<td>25.488</td>
<td>32.452</td>
<td>16.684</td>
<td>47.888</td>
<td>122.512</td>
</tr>
……………………
<tr>
<th>Total trimestre</th>
<td>590.011</td>
……………………
</tr>
</table>

63

Selectores (4/7)

table {
border-collapse: collapse;
border: 1px solid #004A4A;
width: 50em;
}
th,td {
padding: 0.2em 0.5em;
}
td {
text-align: right;
}
td:after {
content: " €";
}

64

Selectores (4/7)

En nth-of-type(n) podemos sustituir n por:
●

un número

●

la fórmula an+b, dónde a indica el múltiplo y b un desfase

●

la constante odd (impar) equivalente al valor 2n+1

●

la constante even (par) equivalente al valor 2n

tr:nth-of-type(odd){
background-color: #92C4C4;
}
tr:nth-of-type(even){
background-color: #92D0D0;
}

65

Selectores (4/7)

tr:first-of-type th {
background-color: #004A4A;
color: #FFF;
font-size: 1.2em;
}
tr:first-of-type th:first-of-type {
font-size: 1.8em;
}
tr:first-of-type th:last-of-type {
font-size: 1.5em;
}

66

Selectores (4/7)

tr td:last-child {
font-weight: bold;
font-size: 1.2em;
}
tr:nth-of-type(2n+1) td:last-child {
background-color: #5FA8A8;
}
tr:nth-of-type(2n) td:last-child {
background-color: #5EC2C2;
}

67

Selectores (4/7)

tr:last-of-type {
background-color: #FFFFC4;
font-size: 1.2em;
font-weight: bold;
}
tr:last-of-type td:last-child {
background-color: #FFFF00;
font-size: 1.5em;
}

68

Selectores (5/7)
●

:target

: elemento referenciado por una URL

●

::selection : selección del usuario

<ul>
<li><a href="#t1">Ir a título 1</a></li>
</ul>
<article>
<h1 id="t1">Título 1</h1>
<p>Lorem ipsum dolor sit amet,
consetetur sadipscing elitr.</p>
</article>
<article>
<p>Sed diam nonumyeirmod tempor
invidunt ut labore et dolore magna aliquyam
erat, sed diamvoluptua.</p>
</article>
<article>
<p>At vero eos et accusam et justo duo
dolores et ea rebum.</p>
</article>

:target {
background-color: #FBD551;
}
::selection {
background-color: #91E9B6;
color: #E45262;
}

69

Selectores (6/7)
●

e:enabled

: <e> de la interfaz de usuario activado

●

e:disabled

: <e> de la interfaz de usuario desactivado

●

input:checked : casilla de verificación o de opción marcada

<div><input name="nombre" placeholder="Nombre" /></div>
<div><input name="apellidos" placeholder="Apellidos" disabled="disabled" /></div>
<div>
<label>Forma de pago:</label>
<ul>
<li>
<input id="pagoMetalico" name="pago" type="radio" value="metalico" />
<label for="pagoMetalico">En metálico</label>
</li>
<li>
<input id="pagoVisa" name="pago" type="radio" value="visa" />
<label for="pagoVisa">Visa</label>
</li>
<li>
<input id="pagoMastercard" name="pago" type="radio" value="mastercard" />
<label for="pagoMastercard">Mastercard</label>
</li>
</ul>
</div>

li {list-style: none;}
input:enabled {
background-color: #DBFFE6;
}
input:disabled {
background-color: #FFE0DB;
}
input:checked {
background-color: #0F0;
}

70

Selectores (7/7)
●

input:valid

: campo con un valor válido

●

input:invalid

: campo con un valor inválido

●

input:in-range

: campo con un valor dentro de rango

●

input:out-of-range: campo con un valor fuera de rango

●

e:required

: <e> requerida

●

e:optional

: <e> opcional

●

e:read-only

: <e> de sólo lectura

●

e:read-write

: <e> de lectura y escritura

<form action="#">
<label>correo válido:</label>
<input name="correoVal" type="email" value="usuario@servidor.com" />
<label>correo inválido:</label>
<input name="correoInv" type="email" value="usuario" />
</form>

http://www.w3.org/TR/css3-ui/#new-user-interface-state-pseudo-classes

input {
border: 1px solid #FFA500;
padding: 0.5em;
}
input:valid {
background-color: #90EE90;
}
input:invalid {
background-color: #FFC0CB;
}

71

Valores y unidades
Unidades más interesantes
●

px

: píxel

●

%

●

em

: tamaño de fuente de la caja

●

rem

: tamaño de fuente de la raíz

●

dpi

: puntos por pulgada

●

dppx : puntos por píxel

●

vw

●

vh : viewport-percentage height

●

vmin : el más pequeño de vw o vh

●

vmax: el más grande de vw o vh

●

deg

: grados

●

ms

: milisegundos

●

s

: segundos

: proporción de la caja

: viewport-percentage width

http://www.w3.org/TR/css3-values/

72

Colores y transparencias
●

RGB : Red Green Blue

●

HSL : Hue, Saturation, Lightness

●

opacity : Opacidad de 0 a 1

●

RGBA : RGB + Alpha

●

HSLA : HSL + Alpha

●

transparent : Color transparente

<div id="caja1">Caja 1</div>
#caja1 {
background-color: hsl(60,100%,50%);
color: #00F;
}
#caja2 {
background-color: #7AC7FF;
opacity: 0.5;
}
#caja3 {
background-color: rgba(255,160,120,0.6);
}

73

Fuentes
@font-face {
font-family: nombreAsignado;
src: local(fuenteInstalada),
url(fuenteParaDescarga);
}

@font-face {
font-family: 'Cabin Sketch';
src: local('CabinSketch-Bold'), url('fonts/CabinSketch-Bold.woff' format('woff');
}
@font-face {
font-family: Aclonica;
src: local('Aclonica'), url('fonts/Aclonica.woff') format('woff');
}
h1 {
font-family: 'Cabin Sketch', Arial, sans-serif;
}
h2 {
font-family: Aclonica, Arial, sans-serif;
}

http://www.w3.org/TR/css3-webfonts/
http://www.fontsquirrel.com/

74

Nuevas propiedades
●

Cajas redondeadas

●

Desbordamiento de texto

●

Cajas con sombras

●

Columnas

●

Texto con sombras

●

Transiciones

●

Bordes con imágenes

●

Interfaz de usuario

●

Imágenes de fondo

http://leaverou.me/ft2010
http://www.css3.me/
http://css3generator.com/
http://westciv.com/tools/index.html

Guía de referencia:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

75

Cajas redondeadas
border-radius:
[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

http://www.w3.org/TR/css3-background/#corners

76

Cajas con sombras
box-shadow:
none | inset? && h-shadow v-shadow [blur] [spread] [color]

http://www.w3.org/TR/css3-background/#box-shadow

77

Texto con sombras
text-shadow: none | h-shadow v-shadow [blur] [color]
Pseudo-elementos :first-line y :first-letter

http://www.w3.org/TR/css-text-decor-3/#text-shadow-property

78

Bordes con imágenes
border-image: source slice [width] [outset] repeat
Propiedades individuales:
●

border-image-source: none | <image>

●

border-image-slice: [< number > | <%>]{1,4} && fill?

●

border-image-width: [<length> | <%> | <num> | auto]{1,4}

●

border-image-outset: [<length> | <number>]{1,4}

●

border-image-repeat: [ stretch | repeat | round | space]{1,2}

border: double orange 1em;
border-image: url("border.png") 27 round stretch;

http://www.w3.org/TR/css3-background/#border-images

border-image-slice: 25% 30% 12% 20%

79

Imágenes de fondo (1/8)
El nivel 3 de CSS incorpora gran flexibilidad a las propiedades existentes
permitiendo incluir múltiples valores separados por comas.
●

background-color: <color>

●

background-image: <bg-image> [ , <bg-image> ]*

●

background-repeat: <repeat-style> [ , <repeat-style> ]*

●

background-attachment: <attachment> [ , <attachment> ]*

●

background-position: <position> [ , <position> ]*

●

background-clip: <box> [ , <box> ]*

●

background-origin: <box> [ , <box> ]*

●

background-size: <bg-size> [ , <bg-size> ]*

●

background: [ <bg-layer> , ]* <final-bg-layer>
–

<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}

–

<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <background-color>

http://www.w3.org/TR/css3-background/#backgrounds

80

●


●


●

–

<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}

background-image: url('bola.png');
background-repeat: repeat;
background-color: #FFA500;

background-repeat: no-repeat;

background-repeat: repeat-y;

81

●


●


●

–

<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}

background-repeat: repeat;

background-repeat: space;

background-repeat: no-repeat space;

82

●

–

<position> = Cualquier combinación con top, bottom, left, center, right, <percentage> o <length>

background-position: center;

background-position: center top;

background-position: 20% 80%;

83

●


●


●


background-image: url('bola.png'), url('bola.png');
background-repeat: repeat-x, repeat-y;

background-image: url('bola.png'), url('bola2.png');
background-position: center, 80% top;
background-repeat: repeat-x, repeat-y;

background-image: url('bola.png'), url('bola2.png');
background-position: 20% 100%, 80% top;
background-repeat: no-repeat, repeat-y;

84

●

background-size: <bg-size> [ , <bg-size> ]*
–

<bg-size> = [<length> | <percentage> | auto ]{1,2} | cover | contain

background-size: 100% 100%;

background-size: contain;

background-size: cover;

85

●

background-clip: <box> [ , <box> ]*
–

<box> = border-box | padding-box | content-box

border: 20px double #00f;
background-clip: border-box;

background-clip: padding-box;

background-clip: content-box;

86

●

background: [ <bg-layer> , ]* <final-bg-layer>
–

<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}

–

<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <background-color>

#caja {
background:
url("bola.png") left top repeat-x,
url("bola2.png") right top repeat-y,
url("bola3.png") left bottom repeat-x,
url("bola4.png") left top repeat-y,
url("bola.png") 15% 15% no-repeat,
url("bola2.png") 85% 15% no-repeat,
url("bola3.png") 85% 85% no-repeat,
url("bola4.png") 15% 85% no-repeat #FFA500;
background-size: auto, auto, auto, auto, 10%, 20%, 30%, 40%;
}

87

Desbordamiento de texto (1/2)
●

overflow-wrap: normal | break-word

#caja1, #caja2 {
width: 200px;
height: 200px;
padding: 1em;
}

#caja1 {
overflow-wrap: normal;
}

http://www.w3.org/TR/css3-text/#overflow-wrap-property

#caja2 {
overflow-wrap: break-word;
}

88

Desbordamiento de texto (2/2)
●

text-overflow: clip | ellipsis | <string>

#caja1 {
overflow: visible;
}

http://www.w3.org/TR/css3-ui/#text-overflow0

#caja2 {
overflow: hidden;
text-overflow: clip;
}

#caja3 {
overflow: hidden;
text-overflow: ellipsis;
}

89

Columnas (1/6)
●

column-count: <integer> | auto

●

column-width: <length> | auto

●

columns: <column-width> || <column-count>

●

column-gap: <length> | normal

●

column-rule-color: <color>

●

column-rule-style: <border-style>

●

column-rule-width: <border-width>

●

column-rule: <column-rule-width> || <column-rule-style> ||
[<column-rule-color> | transparent]

●

column-span: none | all

●

column-fill: auto | balance

http://www.w3.org/TR/css3-multicol/

90

Columnas (2/6)
●

column-count: <integer> | auto

#caja1, #caja2, #caja3 {
padding: 1em;
text-align: justify;
}
#caja1 {
column-count: 1;
}
#caja2 {
column-count: 3;
}
#caja3 {
height: 80px;
column-count: 3;
}

91

Columnas (3/6)
●

column-width: <length> | auto

padding: 1em;
overflow: hidden;
}
#caja1 {
column-width: 150px;
}
#caja2 {
}
#caja3 {
column-count: 3;
}

92

Columnas (4/6)
●

column-gap: <length> | normal

padding: 1em;
overflow: hidden;
}
#caja1 {
column-count: 3;
column-gap: normal;
}
#caja2 {
column-count: 3;
column-gap: 2em;
}
#caja3 {
column-count: 3;
column-gap: 4em;
}

93

Columnas (5/6)
●

column-rule: <column-rule-width> || <column-rule-style> || [<columnrule-color> | transparent]

padding: 1em;
overflow: hidden;
}
#caja1 {
column-count: 3;
column-gap: 2em;
column-rule: 1px solid #FFA500;
}
#caja2 {
column-count: 3;
column-gap: 2em;
column-rule: 5px dotted #7300FF;
}
#caja3 {
column-count: 3;
column-gap: 2em;
column-rule: 0.5em double #FFA500;
}

94

Columnas (6/6)
●

column-span: none | all

article {
padding: 1em;
column-count: 2;
column-gap: 2em;
column-rule: 1px solid #FFA500;
overflow: hidden;
}
article h1, article h2, article h3 {
text-align: center;
}
article h1, article h2 {
column-span: all;
}

95

Transiciones (1/4)
●

transition-property: none | all | [ <CSSprop> ] [ ‘,’ <CSSprop > ]*

●

transition-duration: <time> [, <time>]*

●

●

●

transition-timing-function: <single-transition-timing-function> [ ‘,’
<single-transition-timing-function> ]*
<single-transition-timing-function> = ease | linear | ease-in | ease-out
| ease-in-out | step-start | step-end | steps(<int>[, [ start | end ] ]?) |
cubic-bezier(<num>, <num>, <num>, <num>)
transition-delay: <time> [, <time>]*
transition: [<t-property> || <t-duration> || <t-timing-function> || <tdelay> [, [<t-property> || <t-duration> || <t-timing-function> || <tdelay>]]*

http://www.w3.org/TR/css3-transitions/
http://cubic-bezier.com/
http://leaverou.github.io/animatable/

96

Transiciones (2/4)
#caja {
width: 200px;
height: 200px;
transition-property: all;
transition-duration: 2s;
}
#caja:hover {
width: 400px;
height: 400px;
}

transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
-moz-transition: all 2s;
-ms-transition: all 2s;

98

Transiciones (4/4)
article {
margin: 1em auto;
width: 600px;
}
article h1 {
text-align: center;
margin: 0;
padding: 0.5em;
}
article .cuerpo {
padding: 0 1em;
}
article p {
margin-bottom: 1em;
}
.autor {
background-color: #BFBFBF;
width: 50px;
margin: 0 0 1em 1em;
float: right;
transition: all 1s;
}

.autor img {
width: 100%;
}
.autor:hover {
width: 150px;
margin: 1em;
background-color: #FFFF00;
}
.autor figcaption {
overflow: hidden;
font-size: 0.8em;
text-align:center;
padding: 0;
height: 0;
transition: all 0.5s;
}
.autor figcaption span {
opacity: 0;
transition: all 1s 0.5s;
}
.autor:hover figcaption {
height: 1em;
padding: 0.5em;
}
.autor:hover figcaption span {
opacity: 1;
}

99

Modelo de cajas
●

box-sizing: content-box | border-box | inherit

.colIzq {
width: 50%;
float: left;
padding: 0.5em;
border: 1em solid #127B12;
}
.colDcha {
width: 50%;
float: left;
padding: 0.5em;
background-color: #C698E2;
border: 1em solid #A020F0;
}

http://www.w3.org/TR/css3-ui/#box-sizing

.colIzq {
width: 50%;
float: left;
padding: 0.5em;
border: 1em solid #127B12;
box-sizing: border-box;
}
.colDcha {
width: 50%;
float: left;
padding: 0.5em;
background-color: #C698E2;
border: 1em solid #A020F0;
box-sizing: border-box;
}

100

Funciones
●

Gradientes

●

Transformaciones

●

Otras funciones

101

Gradientes (1/5)
●

linear-gradient(
[ [ <angle> | [left | right] || [top | bottom] ] ,]?
<color-stop>[, <color-stop>]+
)

#caja { /* para los ejemplos */
width: 200px;
height: 100px;
background: linear-gradient(parámetros);
background: -webkit-linear-gradient(parámetros);
background: -moz-linear-gradient(parámetros);
background: -o-linear-gradient(parámetros);
background: -ms-linear-gradient(parámetros);
}

http://dev.w3.org/csswg/css-images-3/#gradients
http://lea.verou.me/css3patterns/

102

Gradientes (2/5)
●

linear-gradient( )

103

Gradientes (3/5)
●

radial-gradient(
[<bg-position>,]?
[[ [<shape> || <size>] | [<length> | <percentage>]{2} ],]?
<color-stop>[, <color-stop>]+
)
–

<shape> = [ circle | ellipse ]

–

<size> = [ closest-side | closest-corner | farthest-side | farthest-corner | contain | cover ]

#caja { /* para los ejemplos */
width: 200px;
height: 100px;
background: radial-gradient(parámetros);
background: -webkit-radial-gradient(parámetros);
background: -moz-radial-gradient(parámetros);
background: -o-radial-gradient(parámetros);
background: -ms-radial-gradient(parámetros);
}

http://dev.w3.org/csswg/css-images-3/#radial-gradients/

104

Gradientes (4/5)
●

radial-gradient( )

105

Gradientes (5/5)
●

repeating-linear-gradient( mismos parámetros que linear-gradient() )

●

repeating-radial-gradient( mismos parámetros que radial-gradient() )

http://dev.w3.org/csswg/css-images-3/#repeating-gradients

107

Funciones de transformación:
●

translate(<translation-value>[, <translation-value>])

●

translateX(<translation-value>)

●

translateY(<translation-value>)

●

scale(<number>[, <number>])

●

scaleX(<number>)

●

scaleY(<number>)

●

rotate(<angle>)

●

skewX(<angle>)

●

skewY(<angle>)

●

skew(<angle> [, <angle>])

108

#caja {
width: 200px;
height: 100px;
transform: funcTrans();
-webkit-transform: funcTrans();
-moz-transform: funcTrans();
-o-transform: funcTrans();
-ms-transform: funcTrans();
}

109

Otras funciones
attr()

<a href="http://www.w3.org/">W3C</a><br />
<a href="http://www.w3c.es/">W3C España</a>

●

url()

a{

●

counter()

●

●

calc()

div {
float: left;
margin: 1em;
border: solid 1px;
width: calc(100%/3 - 2*1em - 2*1px);
}

http://www.w3.org/TR/css3-values/#calc-notation

text-decoration: none;
font-weight: bold;
color: #1FA646;
}
@media print {
a:after {
font-weight: normal;
color: #1F93A6;
content: " (" attr(href) ") ";
}
}

110

Media Queries (1/4)
Formas de llamar a estilos CSS utilizando Media Queries:
●

<link rel="stylesheet" media=“MediaQuery" href=“estilos.css" />

●

@import url(estilos.css) MediaQuery;

●

@media MediaQuery { … }

Sintaxis: [only | not]? media_type [ and expr ]* | expr [ and expr ]*
●

media_type: ‘all’, ‘screen’, ‘print’, ‘aural’, ‘braille’, ‘handheld’, ‘projection’, ‘tty’, ‘tv’

●

expr: ( [min- | max-]? feature : value )

●

features: ‘width’, ‘height’, ‘device-width’, ‘device-height’, ‘orientation’, ‘aspect-ratio’,
‘device-aspect-ratio’, ‘color’, ‘color-index’, ‘monochrome’, ‘resolution’, ‘scan’, ‘grid’

http://www.w3.org/TR/css3-mediaqueries/
http://mediaqueri.es/

111

Media Queries (2/4)
●

<link rel="stylesheet" type="text/css" href="estilos/estilos.css" />

112

Media Queries (3/4)
●

<link rel="stylesheet" type="text/css" media="only screen and (minwidth:501px) and (max-width:900px)" href="estilos/estilosM.css" />

113

Media Queries (4/4)
●

<link rel="stylesheet" type="text/css“
media="only all and (max-width:500px)" href="estilos/estilosP.css" />

114

CSS Template Layout Module
body {
display: "aaaaaaa" "bccccdd“;
}
#cabecera {
position: a;
}
#colIzq {
position: b;
}
#colCentro {
position: c;
}
#colDcha {
position: d;
}

http://www.w3.org/TR/css3-layout/

115

Soporte actual de los navegadores
Ninguno de los principales navegadores soportan al 100% HTML5 o CSS3.
En algunos casos, cuando el navegador no implementa propiedades o funciones
CSS3, es posible utilizar prefijos para utilizar la implementación propia del
motor de renderizado de cada navegador.
Prefijos por navegador:
●

-webkit-

para Chrome y Safari

●

-moz-

para Firefox

●

-o-

para Opera

●

-ms-

para Internet Explorer

La W3C no valida el código que utiliza estos prefijos.
http://caniuse.com/

116

Soporte de Internet Explorer
Soporte nulo en versiones anteriores a Internet Explorer 9.
Para que las versiones anteriores a IE9 puedan mostrar páginas realizadas con
HTML5 de forma correcta, debemos añadir el siguiente código:
En el <head>


En el fichero CSS
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display:block;
}

HTML5 y CSS3

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a HTML5 y CSS3

Similar a HTML5 y CSS3 (20)

Último

Último (20)

HTML5 y CSS3