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 /* Alínea verticalmente el
15 * contenido cuando solo tiene
16 * 1 renglón, a la línea del
17 * primer renglón. */
18 align-items: baseline;
19 /* Si un elemento no cabe, se
20 * pasa al inicio del siguiente
21 * renglón. */
22 flex-wrap: wrap;
23 /* Alínea verticalmente el
24 * contenido cuando hay varios
25 * renglones, a la línea del
26 * primer renglón. */
27 align-content: baseline;
28 /* Espacio horizontal entre
29 * elementos. */
30 row-gap: 1rem;
31 /* Espacio vertical entre
32 * elementos. */
33 column-gap: 0.5rem;
34 }
35
36 nav {
37 /* flex muestra main en el orden
38 * 1, o sea al inicio. */
39 order: 1;
40 }
41
42 main {
43 /* 1: Expande horizontalmente,
44 * 1: Contrae horizontalmente,
45 * 300px: Tamaño base. */
46 flex: 1 1 300px;
47 /* flex muestra main en el orden
48 * 2, o sea después de nav. */
49 order: 2;
50 }
51
52 aside {
53 /* flex muestra main en el orden
54 * 3, o sea después de main. */
55 order: 3;
56 }
57
58 nav,
59 aside {
60 /* 1: Expande horizontalmente,
61 * 1: Contrae horizontalmente,
62 * 200px: Tamaño base. */
63 flex: 1 1 200px
64 }
65 </style>
66
67</head>
68
69<body>
70
71 <main>
72 <h1>Flex 2</h1>
73 <p>
74 Este ejemplo usa display: flex
75 para una página principal.
76 </p>
77 <p>
78 flex-wrap: wrap permite que el
79 contenido se parta.
80 </p>
81 <p>
82 Este main se puede expander,
83 contraer y su tamaño base es de
84 300px
85 </p>
86 </main>
87
88 <nav>
89 <h2>Navegación</h2>
90 <p>
91 Este nav se puede expander o
92 contraer si es necesario y su
93 tamaño base es de 200px
94 </p>
95 <p>
96 <a href="https://facebook.com"
97 target="_blank"
98 rel="noreferrer">
99 Facebook</a>
100 </p>
101 </nav>
102
103 <aside>
104 <h2>Aside</h2>
105 <p>
106 Este aside se puede expander,
107 contraer y su tamaño base es de
108 200px
109 </p>
110 </aside>
111
112</body>
113
114</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 contenido se centra
24 * horizontalmente.*/
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 flex.
35 */
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: 1fr ajusta a llenar ancho.
21 * columna 3: 20vw de amcho. */
22 grid-template-columns: 20vw 1fr 20vw;
23 /* Declara 3 renglones:
24 * remglón 1: auto ajusta al contenido.
25 * remglón 2: 1fr ajusta a llenar altura.
26 * remglón 3: auto ajusta al contenido. */
27 grid-template-rows: auto 1fr auto;
28 /* Indica como se llena el grid
29 * en 2 dimensiones usando el nombre
30 * asignado en la propiedad grid-area. */
31 grid-template-areas:
32 "head head head"
33 "nav main aside"
34 "foot foot foot";
35 }
36
37 h1 {
38 grid-area: head;
39 /* El elemento se centra
40 * horizontalmente dentro de su
41 * grupo de celdas. */
42 justify-self: center
43 }
44
45 main {
46 grid-area: main;
47 overflow: auto;
48 }
49
50 nav {
51 grid-area: nav;
52 overflow: auto;
53 }
54
55 aside {
56 grid-area: aside;
57 overflow: auto;
58 }
59
60 footer {
61 grid-area: foot;
62 justify-self: center
63 }
64 </style>
65
66</head>
67
68<body>
69
70 <h1>Grid 1</h1>
71
72 <main>
73 <p>
74 Este ejemplo usa display: grid
75 para una página principal.
76 </p>
77 <p>
78 Lorem ipsum dolor sit amet
79 consectetur adipisicing elit.
80 Omnis, eius. Quaerat alias
81 facilis recusandae, voluptate
82 cumque quod tenetur
83 necessitatibus exercitationem
84 beatae cupiditate iste
85 voluptatum, optio debitis
86 deserunt laboriosam placeat
87 odit?.
88 </p>
89 </main>
90
91 <nav>
92 <h2>Navegación</h2>
93 <p>
94 <a href="https://facebook.com"
95 target="_blank"
96 rel="noreferrer">
97 Facebook</a>
98 </p>
99 </nav>
100
101 <aside>
102 <h2>Aside</h2>
103 <p>
104 Este es un aside.
105 </p>
106 </aside>
107
108 <footer>
109 <p>
110 © 2025
111 Gilberto Pacheco Gallegos
112 </p>
113 </footer>
114
115</body>
116
117</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 /* Las columnas se generan automáticamente con columnas que al menos deben
23 * tener 15rem de ancho y juntas todas las columnas se estiran uniformemente
24 * para llenar el ancho. */
25 grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
26 }
27
28 img {
29 max-width: 100%;
30 }
31 </style>
32
33</head>
34
35<body>
36
37 <h1>Grid 2</h1>
38
39 <nav>
40 <ol>
41
42 <li>
43 <figure>
44 <img alt="Lobo"
45 src="https://images.pexels.com/photos/397857/pexels-photo-397857.jpeg">
46 <figcaption>Lobo</figcaption>
47 </figure>
48 <p>
49 <a target="_blank" rel=”noreferrer”
50 href="https://www.pexels.com/es-es/foto/lobo-blanco-y-negro-397857/">
51 Foto de Steve en Pexels.</a>
52 </p>
53 </li>
54
55 <li>
56 <figure>
57 <img alt="Buho"
58 src="https://images.pexels.com/photos/3732453/pexels-photo-3732453.jpeg">
59 <figcaption>Buho</figcaption>
60 </figure>
61 <p>
62 <a target="_blank" rel=”noreferrer”
63 href="https://www.pexels.com/es-es/foto/foto-de-buho-ural-3732453/">
64 Foto de Erik Karits en Pexels.</a>
65 </p>
66 </li>
67
68 <li>
69 <figure>
70 <img alt="Perro"
71 src="https://images.pexels.com/photos/3978352/pexels-photo-3978352.jpeg">
72 <figcaption>Perro </figcaption>
73 </figure>
74 <p>
75 <a target="_blank" rel=”noreferrer”
76 href="https://www.pexels.com/es-es/foto/perro-de-pelo-corto-marron-y-blanco-acostado-3978352/">
77 Foto de Creative Workshop en Pexels.</a>
78 </p>
79 </li>
80
81 <li>
82 <figure>
83 <img alt="Gato"
84 src="https://images.pexels.com/photos/141496/pexels-photo-141496.jpeg">
85 <figcaption>Gato</figcaption>
86 </figure>
87 <p>
88 <a target="_blank" rel=”noreferrer”
89 href="https://www.pexels.com/es-es/foto/gatito-gris-en-bolsa-de-papel-plateada-141496/">
90 Foto de Vadim B en Pexels.</a>
91 </p>
92 </li>
93
94 <li>
95 <figure>
96 <img alt="León"
97 src="https://images.pexels.com/photos/2270848/pexels-photo-2270848.jpeg">
98 <figcaption>León</figcaption>
99 </figure>
100 <p>
101 <a target="_blank" rel=”noreferrer”
102 href="https://www.pexels.com/es-es/foto/leon-marron-2270848/">
103 Foto de Ralph en Pexels.</a>
104 </p>
105 </li>
106
107 <li>
108 <figure>
109 <img alt="Oso"
110 src="https://images.pexels.com/photos/35435/pexels-photo.jpg">
111 <figcaption>Oso</figcaption>
112 </figure>
113 <p>
114 <a target="_blank" rel=”noreferrer”
115 href="https://www.pexels.com/es-es/foto/oso-cafe-35435/">
116 Foto de Rasmus Svinding en Pexels.</a>
117 </p>
118 </li>
119
120 <li>
121 <figure>
122 <img alt="Coyote"
123 src="https://images.pexels.com/photos/10226903/pexels-photo-10226903.jpeg">
124 <figcaption>Coyote</figcaption>
125 </figure>
126 <p>
127 <a target="_blank" rel=”noreferrer”
128 href="https://www.pexels.com/es-es/foto/animal-perro-mono-hierba-10226903/">
129 Foto de Esteban Arango en Pexels.</a>
130 </p>
131 </li>
132
133 </ol>
134 </nav>
135
136</body>
137
138</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 menu,
18 header {
19 grid-area: head;
20 position: sticky;
21 top: 0;
22 display: flex;
23 gap: var(--gap);
24 align-items: baseline;
25 }
26
27 @media screen and (max-width: 599px) {
28
29 menu {
30 /* Quita las viñetas. */
31 list-style-type: none;
32 padding: 0;
33 margin: 0;
34 }
35
36 #hamburguesa {
37 anchor-name: --hamburguesa;
38 }
39
40 #navGeneral {
41 position: absolute;
42 /* Posiciona con respecto a otro elemento.*/
43 position-anchor: --hamburguesa;
44 /* Extremo superior cuando no se soporta position-anchor, */
45 top: 3.5rem;
46 /* El extremo superior va debajo de la hamburgjesa, */
47 top: anchor(bottom);
48 /* Extremo izquierdo cuando no se soporta position-anchor, */
49 left: 0.5rem;
50 /* El extremo izquierdo se alinea con la izquierda de la hamburgjesa, */
51 left: anchor(left);
52 /* Evita que se centre el contenido, */
53 margin: unset;
54 }
55
56 header {
57 display: none;
58 }
59
60 main {
61 flex-grow: 1;
62 align-self: stretch
63 }
64
65 }
66
67 @media screen and (min-width: 600px) {
68 body {
69 display: grid;
70 column-gap: var(--gap);
71 align-items: baseline;
72 grid-template-columns: 1fr 20vw;
73 grid-template-rows: auto 1fr auto;
74 grid-template-areas:
75 "head head"
76 "main aside"
77 "foot foot";
78 }
79
80 menu {
81 display: none;
82 }
83
84 header nav ul {
85 display: inline-flex;
86 list-style-type: none;
87 padding: 0;
88 margin: 0;
89 gap: var(--gap);
90 justify-content: center;
91 }
92
93 header nav ul p {
94 margin: 0;
95 }
96
97 main {
98 grid-area: main;
99 min-height: 50vh;
100 overflow: auto;
101 }
102
103 aside {
104 grid-area: aside;
105 }
106
107 footer {
108 grid-area: foot;
109 display: flow-root;
110 text-align: center;
111 }
112
113 }
114 </style>
115
116</head>
117
118<body>
119
120 <menu>
121 <li>
122 <button id="hamburguesa" type="button" popovertarget="navGeneral">≡</button>
123 </li>
124 <li>
125 <h1>@media</h1>
126 </li>
127 </menu>
128
129 <nav id="navGeneral" popover="auto">
130 <h2>Enlaces externos</h2>
131 <ul>
132 <li>
133 <p>
134 <a target="_blank" rel="noreferrer" href="https://savethecat.com/">
135 Salvar al gato.
136 </a>
137 </p>
138 </li>
139 <li>
140 <p>
141 <a target="_blank" rel="noreferrer" href="https://www.showrunner.xyz/">
142 Showrunner
143 </a>
144 </p>
145 </li>
146 <li>
147 <p>
148 <a target="_blank" rel="noreferrer" href="https://google.com/">
149 Google
150 </a>
151 </p>
152 </li>
153 </ul>
154 </nav>
155
156 <header>
157 <h1>@media</h1>
158 <nav>
159 <ul>
160 <li>
161 <p>
162 <a target="_blank" rel="noreferrer" href="https://savethecat.com/">
163 Salvar al gato.
164 </a>
165 </p>
166 </li>
167 <li>
168 <p>
169 <a target="_blank" rel="noreferrer" href="https://www.showrunner.xyz/">
170 Showrunner
171 </a>
172 </p>
173 </li>
174 <li>
175 <p>
176 <a target="_blank" rel="noreferrer" href="https://google.com/">
177 Google
178 </a>
179 </p>
180 </li>
181 </ul>
182 </nav>
183 </header>
184
185 <main>
186 <p>
187 Este ejemplo usa @media para
188 seleccionar el display
189 de la página principal.
190 </p>
191 <p>
192 Lorem ipsum dolor sit amet
193 consectetur adipisicing elit.
194 Omnis, eius. Quaerat alias
195 facilis recusandae, voluptate
196 cumque quod tenetur
197 necessitatibus exercitationem
198 beatae cupiditate iste
199 voluptatum, optio debitis
200 deserunt laboriosam placeat
201 odit?.
202 </p>
203
204 </main>
205
206 <aside>
207 <h2>Aside</h2>
208 <p>
209 Este aside cambia su despliegue.
210 </p>
211 </aside>
212
213 <footer>
214 <p>
215 © 2025
216 Gilberto Pacheco Gallegos
217 </p>
218 </footer>
219
220</body>
221
222</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 /* El elemento html responden a cambos en la
24 * posición de las barras de desplazamiento.
25 */
26 container-type: scroll-state;
27 /* El nombre para @container es scroller.*/
28 container-name: scroller;
29 }
30
31 main {
32 /* Los elementos main responden a cambos de
33 * tamaño. */
34 container-type: inline-size;
35 /* El nombre para @container es main.*/
36 container-name: main;
37 }
38
39 /* Reglas cuando al ancho mínimo de main es 500px.
40 */
41 @container main (min-width: 300px) {
42
43 p::first-letter {
44 font-size: 3em;
45 float: inline-start;
46 }
47
48 p {
49 clear: both;
50 }
51
52 }
53
54 /* Reglas cuando la barra de desplazamiento
55 * vertical de scroller puede moverse hacia arriba.
56 */
57 @container scroller scroll-state(scrollable: top) {
58 h1 {
59 border: solid;
60 }
61 }
62 </style>
63
64</head>
65
66<body>
67
68 <h1>@container</h1>
69
70 <main>
71
72 <p>
73 Este ejemplo usa @container.
74 </p>
75 <p>
76 Lorem ipsum dolor sit amet
77 consectetur adipisicing elit.
78 Iure, assumenda reiciendis.
79 Reprehenderit non sunt enim
80 sequi vel consequatur nostrum
81 suscipit, numquam, ipsam commodi
82 placeat quibusdam porro
83 excepturi aliquid officia
84 labore!
85 </p>
86 <p>
87 Lorem ipsum dolor sit amet
88 consectetur adipisicing elit.
89 Iure, assumenda reiciendis.
90 Reprehenderit non sunt enim
91 sequi vel consequatur nostrum
92 suscipit, numquam, ipsam commodi
93 placeat quibusdam porro
94 excepturi aliquid officia
95 labore!
96 </p>
97
98 </main>
99
100</body>
101
102</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 /* Indica que esta página soporta los
13 * temas claro y oscuro */
14 html {
15 color-scheme: light dark;
16 }
17
18 /* Reglas solo para el tema claro. El
19 * color del fondo debe ser
20 * preferentemente claro y el color de
21 * texto dene ser oscuro. */
22 @media (prefers-color-scheme: light) {
23 html {
24 --backgroundColor: yellow;
25 --color: blue;
26 }
27 }
28
29 /* Reglas solo para el tema oscuro. El
30 * color del fondo debe ser
31 * preferentemente oscuro y el color de
32 * texto dene ser claro. */
33 @media (prefers-color-scheme: dark) {
34 html {
35 --backgroundColor: blue;
36 --color: yellow;
37 }
38 }
39
40 h1 {
41 color: var(--color);
42 background-color:
43 var(--backgroundColor)
44 }
45 </style>
46
47</head>
48
49<body>
50
51 <h1>color-scheme</h1>
52
53 <p>
54 Este ejemplo usa color-scheme.
55 </p>
56
57</body>
58
59</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 /* Indica que esta página soporta los
13 * temas claro y oscuro */
14 html {
15 color-scheme: light dark;
16 }
17
18 /* Reglas solo para el tema claro. El
19 * color del fondo debe ser
20 * preferentemente claro y el color de
21 * texto dene ser oscuro. */
22 @media (prefers-color-scheme: light) {
23 html {
24 --backgroundColor: yellow;
25 --color: blue;
26 }
27 }
28
29 /* Reglas solo para el tema oscuro. El
30 * color del fondo debe ser
31 * preferentemente oscuro y el color de
32 * texto dene ser claro. */
33 @media (prefers-color-scheme: dark) {
34 html {
35 --backgroundColor: blue;
36 --color: yellow;
37 }
38 }
39
40 h1 {
41 color: var(--color);
42 background-color:
43 var(--backgroundColor)
44 }
45 </style>
46
47</head>
48
49<body>
50
51 <h1>color-scheme</h1>
52
53 <p>
54 Este ejemplo usa color-scheme.
55 </p>
56
57</body>
58
59</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 <!-- Estos 3 links los genera
12 https://https://fonts.google.com/
13 después de seleccionar varias familias y hacer que el
14 asistente te indique como descargarlas a tu sitio.
15 -->
16 <link rel="preconnect" href="https://fonts.googleapis.com">
17 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
18 <link
19 href="https://fonts.googleapis.com/css2?family=Forum&family=Winky+Rough:ital,wght@0,300..900;1,300..900&display=swap"
20 rel="stylesheet">
21
22 <style>
23 h1 {
24 /* Carga el font "Winky Rough" descargado- */
25 font-family: "Winky Rough", sans-serif;
26 }
27
28 p {
29 /* Carga el font "Forum" descargado- */
30 font-family: "Forum", serif;
31 }
32 </style>
33
34</head>
35
36<body>
37
38 <h1>Web fonts</h1>
39
40 <p>
41 Este ejemplo usa Web fonts.
42 </p>
43
44</body>
45
46</html>

Solo para los más rudos

O. Resumen