11. Responsividad

Versión para imprimir.

En esta lección se muestran ejemplos típicos de HTML.

A. float 1

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3
4<head>
5
6 <meta charset="UTF-8">
7 <title>Float</title>
8 <meta name="viewport"
9 content="width=device-width">
10
11 <style>
12 nav {
13 float: inline-start;
14 border: solid;
15 }
16
17 aside {
18 float: inline-end;
19 border: solid;
20 }
21
22 footer {
23 clear: both;
24 }
25 </style>
26
27</head>
28
29<body>
30
31 <h1>Float</h1>
32
33 <nav>
34 <p>
35 Flota al inicio.
36 </p>
37 <p>
38 <a href="https://facebook.com"
39 target="_blank"
40 rel="noreferrer">
41 Facebook</a>
42 </p>
43 </nav>
44
45 <aside>
46 <p>
47 Flota al final.
48 </p>
49 </aside>
50
51 <p>Este ejemplo usa float.</p>
52 <p>
53 El párrafo que sigue te muestra
54 como flota el texto.
55 </p>
56
57 <footer>
58 <p>
59 El flotado se detiene con
60 clear: both.
61 </p>
62 <p>
63 © 2025
64 Gilberto Pacheco Gallegos
65 </p>
66 </footer>
67
68</body>
69
70</html>

Solo para los más rudos

B. float 2

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3
4<head>
5
6 <meta charset="UTF-8">
7 <title>Float 2</title>
8 <meta name="viewport"
9 content="width=device-width">
10
11 <style>
12 main {
13 display: flow-root;
14 }
15
16 aside {
17 border: solid;
18 }
19
20 .floatLeft {
21 float: left
22 }
23
24 .floatRight {
25 float: right
26 }
27 </style>
28
29</head>
30
31<body>
32
33 <h1>Float 2</h1>
34
35 <main>
36
37 <aside class="floatLeft">
38 <p>Flota a la izquierda.</p>
39 </aside>
40
41 <aside class="floatRight">
42 <p>Flota a la derecha.</p>
43 </aside>
44
45 <p>
46 Este es otro ejemplo de float.
47 </p>
48 <p>
49 La propiedad display: flow-root
50 evita el flotado fuera del
51 elemento.
52 </p>
53 <p>
54 Puedes poner varios float hacia
55 donde quieras; inclusive hacia
56 el mismo lado.
57 </p>
58
59 <aside class="floatRight">
60 <p>Flota a la derecha.</p>
61 </aside>
62
63 </main>
64
65 <footer>
66 <p>
67 © 2025
68 Gilberto Pacheco Gallegos
69 </p>
70 </footer>
71
72</body>
73
74</html>

Solo para los más rudos

C. float 3

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3
4<head>
5
6 <meta charset="UTF-8">
7 <title>Float 3</title>
8 <meta name="viewport"
9 content="width=device-width">
10
11 <style>
12 p {
13 clear: both;
14 }
15
16 p::first-letter {
17 font-weight: bold;
18 font-size: 3rem;
19 float: inline-start;
20 }
21 </style>
22
23</head>
24
25<body>
26
27 <h1>Float 3</h1>
28
29 <p>
30 Este es otro ejemplo de float.
31 </p>
32
33 <p>
34 Iambién puedes obtener un efecto
35 como libro de cuentos usando
36 float: inline-start
37 dentro de p::first-letter.
38 </p>
39
40 <p>
41 Lorem ipsum dolor sit amet
42 consectetur adipisicing elit.
43 Iure, assumenda reiciendis.
44 Reprehenderit non sunt enim sequi
45 vel consequatur nostrum suscipit,
46 numquam, ipsam commodi placeat
47 quibusdam porro excepturi
48 aliquid officia labore!
49 </p>
50
51 <footer>
52 <p>
53 © 2025
54 Gilberto Pacheco Gallegos
55 </p>
56 </footer>
57
58</body>
59
60</html>

Solo para los más rudos

D. Columnas

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3
4<head>
5
6 <meta charset="UTF-8">
7 <title>Columnas</title>
8 <meta name="viewport"
9 content="width=device-width">
10
11 <style>
12 main {
13 /* Intenta usar 3 columnas. */
14 column-count: 3;
15 /* Cada columna debe tener al
16 * menos 200px de ancho */
17 column-width: 200px;
18 /* 1 renglón de reparación entre
19 * columnas. */
20 column-gap: 1rem;
21 /* Pone una línea sólida entre
22 * columnas. */
23 column-rule: solid;
24
25 }
26 </style>
27
28</head>
29
30<body>
31
32 <h1>Columnas</h1>
33 <main>
34 <p>
35 Lorem ipsum dolor sit amet
36 consectetur adipisicing elit.
37 Iure, assumenda reiciendis.
38 </p>
39 <p>
40 Lorem ipsum dolor sit amet
41 consectetur adipisicing elit.
42 Iure, assumenda reiciendis.
43 </p>
44 <p>
45 Lorem ipsum dolor sit amet
46 consectetur adipisicing elit.
47 Iure, assumenda reiciendis.
48 </p>
49 </main>
50</body>
51
52</html>

Solo para los más rudos

E. flex 1

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3
4<head>
5
6 <meta charset="UTF-8">
7 <title>Flex 1</title>
8 <meta name="viewport"
9 content="width=device-width">
10
11 <style>
12 menu {
13 --gap: 0.5rem;
14 display: flex;
15 /* Quita las viñetas. */
16 list-style-type: none;
17 margin: 0;
18 padding: var(--gap);
19 /* Espacio entre elementos. */
20 gap: var(--gap);
21 border: solid;
22 /* Centra verticalmente el
23 * contenido. */
24 align-items: center;
25 }
26
27 #enLinea {
28 display: inline-flex;
29 }
30
31 .creceMargenFinal {
32 margin-inline-end: auto
33 }
34 </style>
35
36</head>
37
38<body>
39
40 <h1>Flex 1</h1>
41
42 <menu>
43 <li><button>≡</button></li>
44 <li class="creceMargenFinal">
45 Ejemplo de flex
46 </li>
47 <li><button>💾</button></li>
48 <li><button>🗑</button></li>
49 </menu>
50
51 Inicio
52 <menu id="enLinea">
53 <li><button>≡</button></li>
54 <li class="creceMargenFinal">
55 Ejemplo de flex
56 </li>
57 <li><button>💾</button></li>
58 <li><button>🗑</button></li>
59 </menu>
60 Fin
61
62</body>
63
64</html>

Solo para los más rudos

F. flex 2

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3
4<head>
5
6 <meta charset="UTF-8">
7 <title>Flex 2</title>
8 <meta name="viewport"
9 content="width=device-width">
10
11 <style>
12 body {
13 display: flex;
14 flex-wrap: wrap;
15 /* Espacio horizontal entre
16 * elementos. */
17 row-gap: 1rem;
18 /* Espacio vertical entre
19 * elementos. */
20 column-gap: 0.5rem;
21 }
22
23 nav {
24 /* flex muestra main en el orden
25 * 1, o sea al inicio. */
26 order: 1;
27 }
28
29 main {
30 /* 1: Expande horizontalmente,
31 * 1: Contrae horizontalmente,
32 * 300px: Tamaño base. */
33 flex: 1 1 300px;
34 /* flex muestra main en el orden
35 * 2, o sea después de nav. */
36 order: 2;
37 }
38
39 aside {
40 /* flex muestra main en el orden
41 * 3, o sea después de main. */
42 order: 3;
43 }
44
45 nav,
46 aside {
47 /* 1: Expande horizontalmente,
48 * 1: Contrae horizontalmente,
49 * 200px: Tamaño base. */
50 flex: 1 1 200px
51 }
52 </style>
53
54</head>
55
56<body>
57
58 <main>
59 <h1>Flex 2</h1>
60 <p>
61 Este ejemplo usa display: flex
62 para una página principal.
63 </p>
64 <p>
65 flex-wrap: wrap permite que el
66 contenido se parta.
67 </p>
68 <p>
69 Este main se puede expander,
70 contraer y su tamaño base es de
71 300px
72 </p>
73 </main>
74
75 <nav>
76 <h2>Navegación</h2>
77 <p>
78 Este nav se puede expander o
79 contraer si es necesario y su
80 tamaño base es de 200px
81 </p>
82 <p>
83 <a href="https://facebook.com"
84 target="_blank"
85 rel="noreferrer">
86 Facebook</a>
87 </p>
88 </nav>
89
90 <aside>
91 <h2>Aside</h2>
92 <p>
93 Este aside se puede expander,
94 contraer y su tamaño base es de
95 200px
96 </p>
97 </aside>
98
99</body>
100
101</html>

G. flex 3

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3
4<head>
5
6 <meta charset="UTF-8">
7 <title>Flex 3</title>
8 <meta name="viewport"
9 content="width=device-width">
10
11 <style>
12 body {
13 /* body ocupa toda la altura de
14 * visualización y se ajusta a
15 * los distintos modos del
16 * móvil. */
17 height: 100dvh;
18 margin: 0 0.5rem;
19 display: flex;
20 /* El despliegue se hace
21 * verticalmente.*/
22 flex-direction: column;
23 /* El despliegue se hace
24 * verticalmente.*/
25 align-items: center;
26 }
27
28 main {
29 /* El elemento crece si es
30 * necesario para llenar el
31 * flex. */
32 flex-grow: 1;
33 /* El elemento se estira para
34 * ajustarse al ancho del
35 * flex.*/
36 align-self: stretch;
37 /* Si el elemento no cabe
38 * completamente en el espacio
39 * asignado, se ponen barras de
40 * desplazamiento.*/
41 overflow: auto;
42 }
43
44 aside {
45 /* Evita que margin y float se
46 * salgan del elemento. */
47 display: flow-root;
48 }
49 </style>
50
51</head>
52
53<body>
54
55 <h1>Flex 3</h1>
56
57 <main>
58 <p>
59 Este ejemplo usa display: flex
60 con orientación vertical.
61 </p>
62 <p>
63 Lorem ipsum dolor sit amet
64 consectetur adipisicing elit.
65 Omnis, eius. Quaerat alias
66 facilis recusandae, voluptate
67 cumque quod tenetur
68 necessitatibus exercitationem
69 beatae cupiditate iste
70 voluptatum, optio debitis
71 deserunt laboriosam placeat
72 odit?.
73 </p>
74 </main>
75
76 <aside>
77 <p>Se feliz 😁.</p>
78 </aside>
79
80</body>
81
82</html>

H. grid 1

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3
4<head>
5
6 <meta charset="UTF-8">
7 <title>Grid 1</title>
8 <meta name="viewport"
9 content="width=device-width">
10
11 <style>
12 body {
13 display: grid;
14 margin: 0 0.5rem;
15 height: 100dvh;
16 column-gap: 0.5rem;
17 row-gap: 1rem;
18 /* Declara 3 columnas:
19 * columna 1 20vw de amcho
20 * columna 2: se ajusta ancho
21 * columna 3: 20vw de amcho */
22 grid-template-columns: 20vw 1fr 20vw;
23 /* Declara 3 renglones:
24 * remglón 1 4rem de alto
25 * remglón 2: se ajusta altura
26 * remglón 3: 4rem de alto */
27 grid-template-rows: 4rem 1fr 4rem;
28 grid-template-areas:
29 "head head head"
30 "nav main aside"
31 "foot foot foot";
32 }
33
34 h1 {
35 margin: 0;
36 grid-area: head;
37 align-self: center;
38 justify-self: center
39 }
40
41 main {
42 grid-area: main;
43 overflow: auto;
44 }
45
46 nav {
47 grid-area: nav;
48 overflow: auto;
49 }
50
51 aside {
52 grid-area: aside;
53 overflow: auto;
54 }
55
56 footer {
57 display: flow-root;
58 grid-area: foot;
59 align-self: center;
60 justify-self: center
61 }
62 </style>
63
64</head>
65
66<body>
67
68 <h1>Grid 1</h1>
69
70 <main>
71 <p>
72 Este ejemplo usa display: grid
73 para una página principal.
74 </p>
75 <p>
76 Lorem ipsum dolor sit amet
77 consectetur adipisicing elit.
78 Omnis, eius. Quaerat alias
79 facilis recusandae, voluptate
80 cumque quod tenetur
81 necessitatibus exercitationem
82 beatae cupiditate iste
83 voluptatum, optio debitis
84 deserunt laboriosam placeat
85 odit?.
86 </p>
87 </main>
88
89 <nav>
90 <h2>Navegación</h2>
91 <p>
92 <a href="https://facebook.com"
93 target="_blank"
94 rel="noreferrer">
95 Facebook</a>
96 </p>
97 </nav>
98
99 <aside>
100 <h2>Aside</h2>
101 <p>
102 Este es un aside.
103 </p>
104 </aside>
105
106 <footer>
107 <p>
108 © 2025
109 Gilberto Pacheco Gallegos
110 </p>
111 </footer>
112
113</body>
114
115</html>

Solo para los más rudos

I. grid 2

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3
4<head>
5
6 <meta charset="UTF-8">
7 <title>Grid 2</title>
8 <meta name="viewport"
9 content="width=device-width">
10
11 <style>
12 body {
13 font-family: sans-serif;
14 }
15
16 ol {
17 list-style-type: none;
18 margin: 0;
19 padding: 0.5rem;
20 display: grid;
21 gap: 0.5rem;
22 grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
23 }
24
25 img {
26 max-width: 100%;
27 }
28 </style>
29
30</head>
31
32<body>
33
34 <h1>Grid 2</h1>
35
36 <nav>
37 <ol>
38
39 <li>
40 <figure>
41 <img alt="Lobo"
42 src="https://images.pexels.com/photos/397857/pexels-photo-397857.jpeg">
43 <figcaption>Lobo</figcaption>
44 </figure>
45 <p>
46 <a target="_blank" rel=”noreferrer”
47 href="https://www.pexels.com/es-es/foto/lobo-blanco-y-negro-397857/">
48 Foto de Steve en Pexels.</a>
49 </p>
50 </li>
51
52 <li>
53 <figure>
54 <img alt="Buho"
55 src="https://images.pexels.com/photos/3732453/pexels-photo-3732453.jpeg">
56 <figcaption>Buho</figcaption>
57 </figure>
58 <p>
59 <a target="_blank" rel=”noreferrer”
60 href="https://www.pexels.com/es-es/foto/foto-de-buho-ural-3732453/">
61 Foto de Erik Karits en Pexels.</a>
62 </p>
63 </li>
64
65 <li>
66 <figure>
67 <img alt="Perro"
68 src="https://images.pexels.com/photos/3978352/pexels-photo-3978352.jpeg">
69 <figcaption>Perro </figcaption>
70 </figure>
71 <p>
72 <a target="_blank" rel=”noreferrer”
73 href="https://www.pexels.com/es-es/foto/perro-de-pelo-corto-marron-y-blanco-acostado-3978352/">
74 Foto de Creative Workshop en Pexels.</a>
75 </p>
76 </li>
77
78 <li>
79 <figure>
80 <img alt="Gato"
81 src="https://images.pexels.com/photos/141496/pexels-photo-141496.jpeg">
82 <figcaption>Gato</figcaption>
83 </figure>
84 <p>
85 <a target="_blank" rel=”noreferrer”
86 href="https://www.pexels.com/es-es/foto/gatito-gris-en-bolsa-de-papel-plateada-141496/">
87 Foto de Vadim B en Pexels.</a>
88 </p>
89 </li>
90
91 <li>
92 <figure>
93 <img alt="León"
94 src="https://images.pexels.com/photos/2270848/pexels-photo-2270848.jpeg">
95 <figcaption>León</figcaption>
96 </figure>
97 <p>
98 <a target="_blank" rel=”noreferrer”
99 href="https://www.pexels.com/es-es/foto/leon-marron-2270848/">
100 Foto de Ralph en Pexels.</a>
101 </p>
102 </li>
103
104 <li>
105 <figure>
106 <img alt="Oso"
107 src="https://images.pexels.com/photos/35435/pexels-photo.jpg">
108 <figcaption>Oso</figcaption>
109 </figure>
110 <p>
111 <a target="_blank" rel=”noreferrer”
112 href="https://www.pexels.com/es-es/foto/oso-cafe-35435/">
113 Foto de Rasmus Svinding en Pexels.</a>
114 </p>
115 </li>
116
117 <li>
118 <figure>
119 <img alt="Coyote"
120 src="https://images.pexels.com/photos/10226903/pexels-photo-10226903.jpeg">
121 <figcaption>Coyote</figcaption>
122 </figure>
123 <p>
124 <a target="_blank" rel=”noreferrer”
125 href="https://www.pexels.com/es-es/foto/animal-perro-mono-hierba-10226903/">
126 Foto de Esteban Arango en Pexels.</a>
127 </p>
128 </li>
129
130 </ol>
131 </nav>
132
133</body>
134
135</html>

J. @media

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3
4<head>
5
6 <meta charset="UTF-8">
7 <title>@media</title>
8 <meta name="viewport"
9 content="width=device-width">
10
11 <style>
12 body {
13 --gap: 0.5rem;
14 margin-top: 0;
15 }
16
17 h1 {
18 margin: 0;
19 }
20
21 menu,
22 header {
23 grid-area: head;
24 position: sticky;
25 top: 0;
26 display: flex;
27 gap: var(--gap);
28 align-items: center;
29 }
30
31 @media screen and (max-width: 599px) {
32
33 menu {
34 /* Quita las viñetas. */
35 list-style-type: none;
36 padding: 0;
37 margin: 0;
38 }
39
40 header {
41 display: none;
42 }
43
44 main {
45 flex-grow: 1;
46 align-self: stretch
47 }
48
49 }
50
51 @media screen and (min-width: 600px) {
52 body {
53 display: grid;
54 column-gap: var(--gap);
55 row-gap: 1rem;
56 grid-template-columns: 1fr 20vw;
57 grid-template-rows: auto 1fr auto;
58 grid-template-areas:
59 "head head"
60 "main aside"
61 "foot foot";
62 }
63
64 menu {
65 display: none;
66 }
67
68 header nav ul {
69 display: inline-flex;
70 list-style-type: none;
71 padding: 0;
72 margin: 0;
73 gap: var(--gap);
74 justify-content: center;
75 }
76
77 header nav ul p {
78 margin: 0;
79 }
80
81 main {
82 grid-area: main;
83 min-height: 50vh;
84 overflow: auto;
85 }
86
87 aside {
88 grid-area: aside;
89 }
90
91 footer {
92 grid-area: foot;
93 display: flow-root;
94 text-align: center;
95 }
96
97 }
98 </style>
99
100</head>
101
102<body>
103
104 <menu>
105 <li>
106 <button type="button" popovertarget="navGeneral">≡</button>
107 </li>
108 <li>
109 <h1>@media</h1>
110 </li>
111 </menu>
112
113 <nav id="navGeneral" popover="auto">
114 <h2>Enlaces externos</h2>
115 <ul>
116 <li>
117 <p>
118 <a target="_blank" rel="noreferrer" href="https://savethecat.com/">
119 Salvar al gato.
120 </a>
121 </p>
122 </li>
123 <li>
124 <p>
125 <a target="_blank" rel="noreferrer" href="https://www.showrunner.xyz/">
126 Showrunner
127 </a>
128 </p>
129 </li>
130 <li>
131 <p>
132 <a target="_blank" rel="noreferrer" href="https://google.com/">
133 Google
134 </a>
135 </p>
136 </li>
137 </ul>
138 </nav>
139
140 <header>
141 <h1>@media</h1>
142 <nav>
143 <ul>
144 <li>
145 <p>
146 <a target="_blank" rel="noreferrer" href="https://savethecat.com/">
147 Salvar al gato.
148 </a>
149 </p>
150 </li>
151 <li>
152 <p>
153 <a target="_blank" rel="noreferrer" href="https://www.showrunner.xyz/">
154 Showrunner
155 </a>
156 </p>
157 </li>
158 <li>
159 <p>
160 <a target="_blank" rel="noreferrer" href="https://google.com/">
161 Google
162 </a>
163 </p>
164 </li>
165 </ul>
166 </nav>
167 </header>
168
169 <main>
170 <p>
171 Este ejemplo usa @media para
172 seleccionar el display
173 de la página principal.
174 </p>
175 <p>
176 Lorem ipsum dolor sit amet
177 consectetur adipisicing elit.
178 Omnis, eius. Quaerat alias
179 facilis recusandae, voluptate
180 cumque quod tenetur
181 necessitatibus exercitationem
182 beatae cupiditate iste
183 voluptatum, optio debitis
184 deserunt laboriosam placeat
185 odit?.
186 </p>
187
188 </main>
189
190 <aside>
191 <h2>Aside</h2>
192 <p>
193 Este aside cambia su despliegue.
194 </p>
195 </aside>
196
197 <footer>
198 <p>
199 © 2025
200 Gilberto Pacheco Gallegos
201 </p>
202 </footer>
203
204</body>
205
206</html>

Solo para los más rudos

K. @container

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3
4<head>
5
6 <meta charset="UTF-8">
7 <title>@container</title>
8 <meta name="viewport"
9 content="width=device-width">
10
11 <style>
12 body {
13 margin-top: 0;
14 }
15
16 h1 {
17 position: sticky;
18 top: 0;
19 margin: 0;
20 }
21
22 html {
23 container-type: scroll-state;
24 container-name: scroller;
25 }
26
27 main {
28 container-type: inline-size;
29 container-name: main;
30 }
31
32 @container main (min-width: 500px) {
33
34 p::first-letter {
35 font-size: 3em;
36 float: inline-start;
37 }
38
39 p {
40 clear: both;
41 }
42
43 }
44
45 @container scroller scroll-state(scrollable: top) {
46 h1 {
47 border: solid;
48 }
49 }
50 </style>
51
52</head>
53
54<body>
55
56 <h1>@container</h1>
57
58 <main>
59
60 <p>
61 Este ejemplo usa @container.
62 </p>
63 <p>
64 Lorem ipsum dolor sit amet
65 consectetur adipisicing elit.
66 Iure, assumenda reiciendis.
67 Reprehenderit non sunt enim
68 sequi vel consequatur nostrum
69 suscipit, numquam, ipsam commodi
70 placeat quibusdam porro
71 excepturi aliquid officia
72 labore!
73 </p>
74 <p>
75 Lorem ipsum dolor sit amet
76 consectetur adipisicing elit.
77 Iure, assumenda reiciendis.
78 Reprehenderit non sunt enim
79 sequi vel consequatur nostrum
80 suscipit, numquam, ipsam commodi
81 placeat quibusdam porro
82 excepturi aliquid officia
83 labore!
84 </p>
85
86 </main>
87
88</body>
89
90</html>

Solo para los más rudos

L. color-scheme

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3
4<head>
5
6 <meta charset="UTF-8">
7 <title>color-scheme</title>
8 <meta name="viewport"
9 content="width=device-width">
10
11 <style>
12 html {
13 color-scheme: light dark;
14 }
15
16 @media (prefers-color-scheme: light) {
17 html {
18 --color: yellow;
19 --backgroundColor: blue;
20 }
21 }
22
23 @media (prefers-color-scheme: dark) {
24 html {
25 --color: blue;
26 --backgroundColor: yellow;
27 }
28 }
29
30 h1 {
31 color: var(--color);
32 background-color: var(--backgroundColor);
33 }
34 </style>
35
36</head>
37
38<body>
39
40 <h1>color-scheme</h1>
41
42 <p>
43 Este ejemplo usa color-scheme.
44 </p>
45
46</body>
47
48</html>

Solo para los más rudos

M. color-scheme

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3
4<head>
5
6 <meta charset="UTF-8">
7 <title>color-scheme</title>
8 <meta name="viewport"
9 content="width=device-width">
10
11 <style>
12 html {
13 color-scheme: light dark;
14 }
15
16 @media (prefers-color-scheme: light) {
17 html {
18 --color: yellow;
19 --backgroundColor: blue;
20 }
21 }
22
23 @media (prefers-color-scheme: dark) {
24 html {
25 --color: blue;
26 --backgroundColor: yellow;
27 }
28 }
29
30 h1 {
31 color: var(--color);
32 background-color: var(--backgroundColor);
33 }
34 </style>
35
36</head>
37
38<body>
39
40 <h1>color-scheme</h1>
41
42 <p>
43 Este ejemplo usa color-scheme.
44 </p>
45
46</body>
47
48</html>

Solo para los más rudos

N. Web fonts

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1 <!DOCTYPE html>
2 <html lang="es">
3
4 <head>
5
6 <meta charset="UTF-8">
7 <title>Web fonts</title>
8 <meta name="viewport"
9 content="width=device-width">
10
11 <link rel="preconnect" href="https://fonts.googleapis.com">
12 <link rel="preconnect" href="https://fonts.gstatic.com"
13 crossorigin>
14 <link
15 href="https://fonts.googleapis.com/css2?family=Forum&family=Winky+Rough:ital,wght@0,300..900;1,300..900&display=swap"
16 rel="stylesheet">
17
18 <style>
19 h1 {
20 font-family: "Winky Rough", sans-serif;
21 }
22
23 p {
24 font-family: "Forum", serif;
25 }
26 </style>
27
28 </head>
29
30 <body>
31
32 <h1>Web fonts</h1>
33
34 <p>
35 Este ejemplo usa Web fonts.
36 </p>
37
38 </body>
39
40 </html>

Solo para los más rudos

O. Resumen