WEBVTT

00:00:00.360 --> 00:00:02.029
Hasta ahora hemos visto cómo

00:00:02.029 --> 00:00:03.588
podemos usar CSS para estilizar un texto,

00:00:04.088 --> 00:00:05.904
pero también podemos usar CSS para cambiar

00:00:05.904 --> 00:00:07.500
completamente el diseño de nuestra página.

00:00:07.620 --> 00:00:09.148
Esto significa que podemos mover las cosas,

00:00:09.157 --> 00:00:10.187
cambiar el tamaño,

00:00:10.187 --> 00:00:11.777
e incluso poner unas cosas arriba de otras.

00:00:12.010 --> 00:00:13.551
Pero ¿cuáles son las cosas

00:00:13.551 --> 00:00:14.401
que queremos mover?

00:00:14.498 --> 00:00:16.118
Algunas veces son elementos

00:00:16.118 --> 00:00:17.339
que hemos hecho con anterioridad,

00:00:17.339 --> 00:00:18.812
como un cierto párrafo,

00:00:18.812 --> 00:00:20.672
o un encabezado.

00:00:21.231 --> 00:00:22.455
Pero muchas veces,

00:00:22.455 --> 00:00:24.679
estas cosas son un grupo de elementos que hemos hecho,

00:00:24.679 --> 00:00:26.889
como una selección de texto,

00:00:27.055 --> 00:00:30.805
o un encabezado con algunos párrafos.

00:00:31.693 --> 00:00:34.366
Para moverlos todos juntos como una unidad,

00:00:34.366 --> 00:00:36.845
necesitamos introducir dos nuevas etiquetas HTML

00:00:36.845 --> 00:00:39.285
a las que llamamos elementos de agrupación.

00:00:39.285 --> 00:00:41.460
No hablamos de ellas antes de CSS,

00:00:41.460 --> 00:00:42.662
porque sólo se pueden usar

00:00:42.662 --> 00:00:44.210
cuando las combinamos con CSS.

00:00:44.210 --> 00:00:46.915
No tienen significado semántico para el navegador.

00:00:47.115 --> 00:00:49.616
La primera es la etiqueta "",

00:00:49.616 --> 00:00:53.236
y la usamos para agrupar una selección de texto.

00:00:53.244 --> 00:00:54.193
Digamos que queremos que esta

00:00:54.193 --> 00:00:56.503
palabra "Love" sea roja.

00:00:57.055 --> 00:00:58.692
Y sólo queremos cambiar el color de la palabra,

00:00:58.692 --> 00:00:59.952
no de todo el encabezado.

00:01:00.327 --> 00:01:02.458
Ponemos el cursor al principio de la palabra "Love",

00:01:02.458 --> 00:01:06.138
escribimos la etiqueta "".

00:01:06.499 --> 00:01:10.519
Nos pasamos al final de la palabra, y tecleamos el cierre de la etiqueta, ok.

00:01:10.678 --> 00:01:11.684
Ahora queremos estilizar

00:01:11.684 --> 00:01:13.049
esta selección ("") de caracteres.

00:01:13.049 --> 00:01:15.813
Podemos hacer una regla para colorear todas las selecciones ("s") en la página,

00:01:15.813 --> 00:01:18.558
pero probablemente no queramos que todas las selecciones sean rojas.

00:01:18.558 --> 00:01:24.890
Vamos a definir una clase para este "" digamos "lovey-dovey",

00:01:25.086 --> 00:01:29.053
y vamos a añadir una regla para los elementos que

00:01:29.053 --> 00:01:30.810
tienen la clase "lovey-dovey".

00:01:30.810 --> 00:01:34.325
Así que escribimos ".lovey-dovey", "color: red".

00:01:34.613 --> 00:01:37.623
¡Mira que dulce es el texto ahora!

00:01:37.913 --> 00:01:39.667
Entonces "" sirve para agrupar

00:01:39.667 --> 00:01:41.367
selecciones de texto.

00:01:41.367 --> 00:01:43.507
¿Cómo agrupamos varios elementos?

00:01:43.507 --> 00:01:45.467
Aquí es donde usamos la etiqueta "".

00:01:45.467 --> 00:01:46.747
Digamos que queremos agrupar

00:01:46.747 --> 00:01:48.187
esta sección de abajo.

00:01:48.195 --> 00:01:49.644
El encabezado "Official Info" y

00:01:49.644 --> 00:01:51.684
los párrafos y la fotografía que están debajo.

00:01:51.743 --> 00:01:52.714
Para hacer eso,

00:01:52.714 --> 00:01:57.339
voy a colocar el cursor antes del encabezado "h3"

00:01:57.339 --> 00:01:59.389
y escribo la etiqueta "".

00:01:59.859 --> 00:02:02.259
Y luego me voy al final del último párrafo,

00:02:02.690 --> 00:02:04.620
y escribo la etiqueta de cierre de "".

00:02:05.467 --> 00:02:07.847
Ya tenemos definido "", ahora necesitamos estilizarlo.

00:02:08.290 --> 00:02:09.568
Para estilizar "",

00:02:09.568 --> 00:02:14.116
voy a definir un id: "official info".

00:02:14.457 --> 00:02:17.757
Y luego voy a añadir una regla aquí arriba.

00:02:17.757 --> 00:02:21.885
Entonces escribo: "#official-info", "background",

00:02:21.885 --> 00:02:23.885
y vamos a definir un gris bonito.

00:02:23.885 --> 00:02:26.933
Lo seleccionamos, éste está bien.

00:02:26.933 --> 00:02:28.646
Ahora vemos que "" se volvió un cuadro gris

00:02:28.646 --> 00:02:31.751
que contiene todos los elementos dentro.

00:02:31.772 --> 00:02:34.267
Y es diferente que si hubieramos

00:02:34.267 --> 00:02:35.947
definido un fondo gris para cada elemento.

00:02:35.998 --> 00:02:38.228
Si hubiéramos hecho eso, entre cada elemento

00:02:38.228 --> 00:02:39.538
tendríamos un espacio que no sería gris.

00:02:39.538 --> 00:02:41.120
Tenemos que usar "",

00:02:41.129 --> 00:02:44.139
si queremos un cuadro alrededor de todo lo que seleccionemos.

00:02:44.558 --> 00:02:46.185
Podemos pensar en ""

00:02:46.185 --> 00:02:48.205
para agrupar texto.

00:02:48.303 --> 00:02:50.759
Y pensamos en "",

00:02:50.759 --> 00:02:52.499
para agrupar elementos.

00:02:52.499 --> 00:02:55.228
Pero hay otra manera para distinguirlos.

00:02:55.451 --> 00:02:56.854
Verás, hay dos tipos de

00:02:56.854 --> 00:02:58.104
elementos en el mundo de CSS.

00:02:58.412 --> 00:03:00.232
En línea y en bloque.

00:03:00.499 --> 00:03:03.409
Un elemento en línea no tiene una nueva línea después de él.

00:03:03.570 --> 00:03:06.726
Si hiciéramos muchos de ellos todos estarían en la misma línea.

00:03:06.726 --> 00:03:08.751
Hemos hablado de algunos de ellos,

00:03:08.751 --> 00:03:11.651
como una imagen.

00:03:11.832 --> 00:03:13.432
Y lo puedes ver con esta imagen,

00:03:13.451 --> 00:03:16.431
la forma en que el texto continúa después de ella.

00:03:16.616 --> 00:03:18.326
No hay una línea después de ella.

00:03:18.657 --> 00:03:21.887
Un elemento de bloque, sí tiene una línea después,

00:03:21.912 --> 00:03:24.602
así es como se crean las etiquetas en HTML.

00:03:24.818 --> 00:03:26.978
Mira los ejemplos en esta página.

00:03:27.041 --> 00:03:30.281
Los encabezados, los párrafos, las listas.

00:03:30.639 --> 00:03:33.739
El navegador pone líneas nuevas después de cada uno de ellos,

00:03:33.739 --> 00:03:36.532
sin que tú tengas que escribir una etiqueta "
".

00:03:36.767 --> 00:03:39.869
¿Qué tiene que ver eso con "" y con ""?

00:03:39.869 --> 00:03:43.203
Bueno, la etiqueta "" crea elementos en línea,

00:03:43.203 --> 00:03:47.123
y "" crea elementos de bloque.

00:03:47.252 --> 00:03:49.492
Eso significa que si agregas una etiqueta "",

00:03:49.492 --> 00:03:53.982
y no agregas algún otro estilo,

00:03:53.982 --> 00:03:56.700
el navegador va a considerar como un solo bloque

00:03:56.700 --> 00:03:58.145
esa parte de la página.

00:03:58.145 --> 00:04:00.534
Como esta pequeña parte de texto que encerré en una etiqueta "",

00:04:00.534 --> 00:04:03.434
ahora tiene nuevas líneas antes y después.

00:04:03.434 --> 00:04:05.495
Y tal vez eso es lo que quieres,

00:04:05.495 --> 00:04:07.525
así que recuerda estas diferencias.

00:04:07.553 --> 00:04:09.383
Y sigue adelante porque hay mucho más

00:04:09.395 --> 00:04:11.145
que podemos hacer con esas etiquetas.

00:04:11.145 --> 00:04:13.481
Especialmente con esta poderosa etiqueta "".