[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.36,0:00:02.03,Default,,0000,0000,0000,,Hasta ahora hemos visto cómo
Dialogue: 0,0:00:02.03,0:00:03.59,Default,,0000,0000,0000,,podemos usar CSS para estilizar un texto,
Dialogue: 0,0:00:04.09,0:00:05.90,Default,,0000,0000,0000,,pero también podemos usar CSS para cambiar
Dialogue: 0,0:00:05.90,0:00:07.50,Default,,0000,0000,0000,,completamente el diseño de nuestra página.
Dialogue: 0,0:00:07.62,0:00:09.15,Default,,0000,0000,0000,,Esto significa que podemos mover las cosas,
Dialogue: 0,0:00:09.16,0:00:10.19,Default,,0000,0000,0000,,cambiar el tamaño,
Dialogue: 0,0:00:10.19,0:00:11.78,Default,,0000,0000,0000,,e incluso poner unas cosas arriba de otras.
Dialogue: 0,0:00:12.01,0:00:13.55,Default,,0000,0000,0000,,Pero ¿cuáles son las cosas
Dialogue: 0,0:00:13.55,0:00:14.40,Default,,0000,0000,0000,,que queremos mover?
Dialogue: 0,0:00:14.50,0:00:16.12,Default,,0000,0000,0000,,Algunas veces son elementos
Dialogue: 0,0:00:16.12,0:00:17.34,Default,,0000,0000,0000,,que hemos hecho con anterioridad,
Dialogue: 0,0:00:17.34,0:00:18.81,Default,,0000,0000,0000,,como un cierto párrafo,
Dialogue: 0,0:00:18.81,0:00:20.67,Default,,0000,0000,0000,,o un encabezado.
Dialogue: 0,0:00:21.23,0:00:22.46,Default,,0000,0000,0000,,Pero muchas veces,
Dialogue: 0,0:00:22.46,0:00:24.68,Default,,0000,0000,0000,,estas cosas son un grupo de elementos que hemos hecho,
Dialogue: 0,0:00:24.68,0:00:26.89,Default,,0000,0000,0000,,como una selección de texto,
Dialogue: 0,0:00:27.06,0:00:30.80,Default,,0000,0000,0000,,o un encabezado con algunos párrafos.
Dialogue: 0,0:00:31.69,0:00:34.37,Default,,0000,0000,0000,,Para moverlos todos juntos como una unidad,
Dialogue: 0,0:00:34.37,0:00:36.84,Default,,0000,0000,0000,,necesitamos introducir dos nuevas etiquetas HTML
Dialogue: 0,0:00:36.84,0:00:39.28,Default,,0000,0000,0000,,a las que llamamos elementos de agrupación.
Dialogue: 0,0:00:39.28,0:00:41.46,Default,,0000,0000,0000,,No hablamos de ellas antes de CSS,
Dialogue: 0,0:00:41.46,0:00:42.66,Default,,0000,0000,0000,,porque sólo se pueden usar
Dialogue: 0,0:00:42.66,0:00:44.21,Default,,0000,0000,0000,,cuando las combinamos con CSS.
Dialogue: 0,0:00:44.21,0:00:46.92,Default,,0000,0000,0000,,No tienen significado semántico para el navegador.
Dialogue: 0,0:00:47.12,0:00:49.62,Default,,0000,0000,0000,,La primera es la etiqueta "",
Dialogue: 0,0:00:49.62,0:00:53.24,Default,,0000,0000,0000,,y la usamos para agrupar una selección de texto.
Dialogue: 0,0:00:53.24,0:00:54.19,Default,,0000,0000,0000,,Digamos que queremos que esta
Dialogue: 0,0:00:54.19,0:00:56.50,Default,,0000,0000,0000,,palabra "Love" sea roja.
Dialogue: 0,0:00:57.06,0:00:58.69,Default,,0000,0000,0000,,Y sólo queremos cambiar el color de la palabra,
Dialogue: 0,0:00:58.69,0:00:59.95,Default,,0000,0000,0000,,no de todo el encabezado.
Dialogue: 0,0:01:00.33,0:01:02.46,Default,,0000,0000,0000,,Ponemos el cursor al principio de la palabra "Love",
Dialogue: 0,0:01:02.46,0:01:06.14,Default,,0000,0000,0000,,escribimos la etiqueta "".
Dialogue: 0,0:01:06.50,0:01:10.52,Default,,0000,0000,0000,,Nos pasamos al final de la palabra, y tecleamos el cierre de la etiqueta, ok.
Dialogue: 0,0:01:10.68,0:01:11.68,Default,,0000,0000,0000,,Ahora queremos estilizar
Dialogue: 0,0:01:11.68,0:01:13.05,Default,,0000,0000,0000,,esta selección ("") de caracteres.
Dialogue: 0,0:01:13.05,0:01:15.81,Default,,0000,0000,0000,,Podemos hacer una regla para colorear todas las selecciones ("s") en la página,
Dialogue: 0,0:01:15.81,0:01:18.56,Default,,0000,0000,0000,,pero probablemente no queramos que todas las selecciones sean rojas.
Dialogue: 0,0:01:18.56,0:01:24.89,Default,,0000,0000,0000,,Vamos a definir una clase para este "" digamos "lovey-dovey",
Dialogue: 0,0:01:25.09,0:01:29.05,Default,,0000,0000,0000,,y vamos a añadir una regla para los elementos que
Dialogue: 0,0:01:29.05,0:01:30.81,Default,,0000,0000,0000,,tienen la clase "lovey-dovey".
Dialogue: 0,0:01:30.81,0:01:34.32,Default,,0000,0000,0000,,Así que escribimos ".lovey-dovey", "color: red".
Dialogue: 0,0:01:34.61,0:01:37.62,Default,,0000,0000,0000,,¡Mira que dulce es el texto ahora!
Dialogue: 0,0:01:37.91,0:01:39.67,Default,,0000,0000,0000,,Entonces "" sirve para agrupar
Dialogue: 0,0:01:39.67,0:01:41.37,Default,,0000,0000,0000,,selecciones de texto.
Dialogue: 0,0:01:41.37,0:01:43.51,Default,,0000,0000,0000,,¿Cómo agrupamos varios elementos?
Dialogue: 0,0:01:43.51,0:01:45.47,Default,,0000,0000,0000,,Aquí es donde usamos la etiqueta "".
Dialogue: 0,0:01:45.47,0:01:46.75,Default,,0000,0000,0000,,Digamos que queremos agrupar
Dialogue: 0,0:01:46.75,0:01:48.19,Default,,0000,0000,0000,,esta sección de abajo.
Dialogue: 0,0:01:48.20,0:01:49.64,Default,,0000,0000,0000,,El encabezado "Official Info" y
Dialogue: 0,0:01:49.64,0:01:51.68,Default,,0000,0000,0000,,los párrafos y la fotografía que están debajo.
Dialogue: 0,0:01:51.74,0:01:52.71,Default,,0000,0000,0000,,Para hacer eso,
Dialogue: 0,0:01:52.71,0:01:57.34,Default,,0000,0000,0000,,voy a colocar el cursor antes del encabezado "h3"
Dialogue: 0,0:01:57.34,0:01:59.39,Default,,0000,0000,0000,,y escribo la etiqueta "".
Dialogue: 0,0:01:59.86,0:02:02.26,Default,,0000,0000,0000,,Y luego me voy al final del último párrafo,
Dialogue: 0,0:02:02.69,0:02:04.62,Default,,0000,0000,0000,,y escribo la etiqueta de cierre de "".
Dialogue: 0,0:02:05.47,0:02:07.85,Default,,0000,0000,0000,,Ya tenemos definido "", ahora necesitamos estilizarlo.
Dialogue: 0,0:02:08.29,0:02:09.57,Default,,0000,0000,0000,,Para estilizar "",
Dialogue: 0,0:02:09.57,0:02:14.12,Default,,0000,0000,0000,,voy a definir un id: "official info".
Dialogue: 0,0:02:14.46,0:02:17.76,Default,,0000,0000,0000,,Y luego voy a añadir una regla aquí arriba.
Dialogue: 0,0:02:17.76,0:02:21.88,Default,,0000,0000,0000,,Entonces escribo: "#official-info", "background",
Dialogue: 0,0:02:21.88,0:02:23.88,Default,,0000,0000,0000,,y vamos a definir un gris bonito.
Dialogue: 0,0:02:23.88,0:02:26.93,Default,,0000,0000,0000,,Lo seleccionamos, éste está bien.
Dialogue: 0,0:02:26.93,0:02:28.65,Default,,0000,0000,0000,,Ahora vemos que "" se volvió un cuadro gris
Dialogue: 0,0:02:28.65,0:02:31.75,Default,,0000,0000,0000,,que contiene todos los elementos dentro.
Dialogue: 0,0:02:31.77,0:02:34.27,Default,,0000,0000,0000,,Y es diferente que si hubieramos
Dialogue: 0,0:02:34.27,0:02:35.95,Default,,0000,0000,0000,,definido un fondo gris para cada elemento.
Dialogue: 0,0:02:35.100,0:02:38.23,Default,,0000,0000,0000,,Si hubiéramos hecho eso, entre cada elemento
Dialogue: 0,0:02:38.23,0:02:39.54,Default,,0000,0000,0000,,tendríamos un espacio que no sería gris.
Dialogue: 0,0:02:39.54,0:02:41.12,Default,,0000,0000,0000,,Tenemos que usar "",
Dialogue: 0,0:02:41.13,0:02:44.14,Default,,0000,0000,0000,,si queremos un cuadro alrededor de todo lo que seleccionemos.
Dialogue: 0,0:02:44.56,0:02:46.18,Default,,0000,0000,0000,,Podemos pensar en ""
Dialogue: 0,0:02:46.18,0:02:48.20,Default,,0000,0000,0000,,para agrupar texto.
Dialogue: 0,0:02:48.30,0:02:50.76,Default,,0000,0000,0000,,Y pensamos en "",
Dialogue: 0,0:02:50.76,0:02:52.50,Default,,0000,0000,0000,,para agrupar elementos.
Dialogue: 0,0:02:52.50,0:02:55.23,Default,,0000,0000,0000,,Pero hay otra manera para distinguirlos.
Dialogue: 0,0:02:55.45,0:02:56.85,Default,,0000,0000,0000,,Verás, hay dos tipos de
Dialogue: 0,0:02:56.85,0:02:58.10,Default,,0000,0000,0000,,elementos en el mundo de CSS.
Dialogue: 0,0:02:58.41,0:03:00.23,Default,,0000,0000,0000,,En línea y en bloque.
Dialogue: 0,0:03:00.50,0:03:03.41,Default,,0000,0000,0000,,Un elemento en línea no tiene una nueva línea después de él.
Dialogue: 0,0:03:03.57,0:03:06.73,Default,,0000,0000,0000,,Si hiciéramos muchos de ellos todos estarían en la misma línea.
Dialogue: 0,0:03:06.73,0:03:08.75,Default,,0000,0000,0000,,Hemos hablado de algunos de ellos,
Dialogue: 0,0:03:08.75,0:03:11.65,Default,,0000,0000,0000,,como una imagen.
Dialogue: 0,0:03:11.83,0:03:13.43,Default,,0000,0000,0000,,Y lo puedes ver con esta imagen,
Dialogue: 0,0:03:13.45,0:03:16.43,Default,,0000,0000,0000,,la forma en que el texto continúa después de ella.
Dialogue: 0,0:03:16.62,0:03:18.33,Default,,0000,0000,0000,,No hay una línea después de ella.
Dialogue: 0,0:03:18.66,0:03:21.89,Default,,0000,0000,0000,,Un elemento de bloque, sí tiene una línea después,
Dialogue: 0,0:03:21.91,0:03:24.60,Default,,0000,0000,0000,,así es como se crean las etiquetas en HTML.
Dialogue: 0,0:03:24.82,0:03:26.98,Default,,0000,0000,0000,,Mira los ejemplos en esta página.
Dialogue: 0,0:03:27.04,0:03:30.28,Default,,0000,0000,0000,,Los encabezados, los párrafos, las listas.
Dialogue: 0,0:03:30.64,0:03:33.74,Default,,0000,0000,0000,,El navegador pone líneas nuevas después de cada uno de ellos,
Dialogue: 0,0:03:33.74,0:03:36.53,Default,,0000,0000,0000,,sin que tú tengas que escribir una etiqueta "\N".
Dialogue: 0,0:03:36.77,0:03:39.87,Default,,0000,0000,0000,,¿Qué tiene que ver eso con "" y con ""?
Dialogue: 0,0:03:39.87,0:03:43.20,Default,,0000,0000,0000,,Bueno, la etiqueta "" crea elementos en línea,
Dialogue: 0,0:03:43.20,0:03:47.12,Default,,0000,0000,0000,,y "" crea elementos de bloque.
Dialogue: 0,0:03:47.25,0:03:49.49,Default,,0000,0000,0000,,Eso significa que si agregas una etiqueta "",
Dialogue: 0,0:03:49.49,0:03:53.98,Default,,0000,0000,0000,,y no agregas algún otro estilo,
Dialogue: 0,0:03:53.98,0:03:56.70,Default,,0000,0000,0000,,el navegador va a considerar como un solo bloque
Dialogue: 0,0:03:56.70,0:03:58.14,Default,,0000,0000,0000,,esa parte de la página.
Dialogue: 0,0:03:58.14,0:04:00.53,Default,,0000,0000,0000,,Como esta pequeña parte de texto que encerré en una etiqueta "",
Dialogue: 0,0:04:00.53,0:04:03.43,Default,,0000,0000,0000,,ahora tiene nuevas líneas antes y después.
Dialogue: 0,0:04:03.43,0:04:05.50,Default,,0000,0000,0000,,Y tal vez eso es lo que quieres,
Dialogue: 0,0:04:05.50,0:04:07.52,Default,,0000,0000,0000,,así que recuerda estas diferencias.
Dialogue: 0,0:04:07.55,0:04:09.38,Default,,0000,0000,0000,,Y sigue adelante porque hay mucho más
Dialogue: 0,0:04:09.40,0:04:11.14,Default,,0000,0000,0000,,que podemos hacer con esas etiquetas.
Dialogue: 0,0:04:11.14,0:04:13.48,Default,,0000,0000,0000,,Especialmente con esta poderosa etiqueta "".