[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.10,0:00:02.34,Default,,0000,0000,0000,,En esta página web estamos usando CSS
Dialogue: 0,0:00:02.34,0:00:04.60,Default,,0000,0000,0000,,para estilizar nuestros encabezados ""
Dialogue: 0,0:00:04.60,0:00:09.47,Default,,0000,0000,0000,,y para que todos los "" sean verdes y todos los párrafos sean morados.
Dialogue: 0,0:00:09.54,0:00:13.46,Default,,0000,0000,0000,,Pero ¿qué pasa si sólo quieres seleccionar el primer "",
Dialogue: 0,0:00:13.46,0:00:16.46,Default,,0000,0000,0000,,o estilizar sólo el segundo párrafo?
Dialogue: 0,0:00:16.72,0:00:19.87,Default,,0000,0000,0000,,Necesitamos tener una manera de decirle al navegador exactamente cuál
Dialogue: 0,0:00:19.87,0:00:21.51,Default,,0000,0000,0000,,de los elementos estamos seleccionando
Dialogue: 0,0:00:21.51,0:00:25.35,Default,,0000,0000,0000,,para que no aplique el estilo a todos, como lo está haciendo ahora.
Dialogue: 0,0:00:25.35,0:00:28.28,Default,,0000,0000,0000,,Una manera de hacerlo es seleccionado por "Id".
Dialogue: 0,0:00:28.28,0:00:30.52,Default,,0000,0000,0000,,Podemos darle a una etiqueta en nuestra página un "Id" único,
Dialogue: 0,0:00:30.52,0:00:32.18,Default,,0000,0000,0000,,y luego podemos decirle a CSS,\N
Dialogue: 0,0:00:32.18,0:00:36.30,Default,,0000,0000,0000,,"Escucha: Sólo quiero aplicar estos estilos al elemento con este 'Id',
Dialogue: 0,0:00:36.30,0:00:38.46,Default,,0000,0000,0000,,a ningún otro elemento".
Dialogue: 0,0:00:38.46,0:00:41.28,Default,,0000,0000,0000,,Para hacer eso, el primer paso es, en realidad, modificar el HTML
Dialogue: 0,0:00:41.28,0:00:45.74,Default,,0000,0000,0000,,para añadir atributos "Id" a las etiquetas que queremos seleccionar específicamente.
Dialogue: 0,0:00:45.74,0:00:48.51,Default,,0000,0000,0000,,Vamos a iniciar aquí con el segundo párrafo.
Dialogue: 0,0:00:48.53,0:00:50.90,Default,,0000,0000,0000,,Para añadir un atributo "Id", ponemos nuestro cursor
Dialogue: 0,0:00:50.90,0:00:53.42,Default,,0000,0000,0000,,al inicio de la etiqueta "", justo después de la "p",
Dialogue: 0,0:00:53.42,0:00:58.36,Default,,0000,0000,0000,,añadimos un espacio, y luego tecleamos 'id = "'
Dialogue: 0,0:00:58.98,0:01:02.67,Default,,0000,0000,0000,,Ahora necesitamos llenar este atributo "Id" con un valor.
Dialogue: 0,0:01:02.81,0:01:04.18,Default,,0000,0000,0000,,¿Qué "Id" debería darle?
Dialogue: 0,0:01:04.18,0:01:06.53,Default,,0000,0000,0000,,Bueno, debería ser uno descriptivo y único.
Dialogue: 0,0:01:06.53,0:01:09.51,Default,,0000,0000,0000,,Ninguna otra cosa en esta página debería tener el mismo "Id".
Dialogue: 0,0:01:09.51,0:01:15.08,Default,,0000,0000,0000,,Bueno, como ésta es una canción sobre conejos, la llamaré "rabbits-song" (Canción de conejos).
Dialogue: 0,0:01:15.42,0:01:19.84,Default,,0000,0000,0000,,No podemos tener espacios en los "Id´s", así que si tienen muchas palabras como en este caso
Dialogue: 0,0:01:19.84,0:01:22.61,Default,,0000,0000,0000,,siempre deberían usar guiones o guiones bajos.
Dialogue: 0,0:01:22.61,0:01:25.60,Default,,0000,0000,0000,,En realidad a mí me gustan los guiones.
Dialogue: 0,0:01:25.65,0:01:28.94,Default,,0000,0000,0000,,Ahora tenemos una manera de identificar este párrafo de manera única.
Dialogue: 0,0:01:29.02,0:01:31.65,Default,,0000,0000,0000,,Ahora podemos añadir una regla CSS a esto.
Dialogue: 0,0:01:31.75,0:01:35.48,Default,,0000,0000,0000,,Vamos nuevamente a nuestra etiqueta "" para el segundo paso.
Dialogue: 0,0:01:35.60,0:01:39.44,Default,,0000,0000,0000,,Vamos a añadir una nueva línea, después de la última regla.
Dialogue: 0,0:01:39.48,0:01:43.26,Default,,0000,0000,0000,,Ahora recuerden, la primera parte de una regla CSS es el selector:
Dialogue: 0,0:01:43.26,0:01:45.84,Default,,0000,0000,0000,,la parte que le dice al navegador qué seleccionar.
Dialogue: 0,0:01:46.10,0:01:51.13,Default,,0000,0000,0000,,En nuestras reglas anteriores, usamos selectores como "" y ""
Dialogue: 0,0:01:51.13,0:01:54.03,Default,,0000,0000,0000,,para seleccionar todos los "" y los "´s" en la página.
Dialogue: 0,0:01:54.55,0:01:57.20,Default,,0000,0000,0000,,Ahora para hacer un selector que sólo seleccione elementos
Dialogue: 0,0:01:57.20,0:01:58.67,Default,,0000,0000,0000,,con un "Id" particular,
Dialogue: 0,0:01:58.67,0:02:00.86,Default,,0000,0000,0000,,debemos iniciar el selector con un signo #.
Dialogue: 0,0:02:01.29,0:02:04.55,Default,,0000,0000,0000,,Esto le dice al navegador que lo que sigue es un "Id".
Dialogue: 0,0:02:05.15,0:02:09.60,Default,,0000,0000,0000,,Ahora escribimos nuestro "Id" : "rabbits-song".
Dialogue: 0,0:02:09.60,0:02:11.88,Default,,0000,0000,0000,,El resto de la regla es igual que las anteriores.
Dialogue: 0,0:02:11.93,0:02:13.72,Default,,0000,0000,0000,,Cuando abrimos y cerramos nuestras llaves,
Dialogue: 0,0:02:13.72,0:02:17.84,Default,,0000,0000,0000,,añadimos una propiedad, como el color de fondo,
Dialogue: 0,0:02:18.36,0:02:20.57,Default,,0000,0000,0000,,y ¡tan tan! ¡Funciona!
Dialogue: 0,0:02:20.87,0:02:23.93,Default,,0000,0000,0000,,Sólo el párrafo de la canción tiene un color de fondo amarillo,
Dialogue: 0,0:02:23.93,0:02:26.62,Default,,0000,0000,0000,,y el estilo del primer párrafo es el mismo.
Dialogue: 0,0:02:26.62,0:02:30.76,Default,,0000,0000,0000,,Vamos a hacerlo de nuevo, para seleccionar este primer "".
Dialogue: 0,0:02:31.13,0:02:32.87,Default,,0000,0000,0000,,¿Puedes recordar el primer paso?
Dialogue: 0,0:02:33.52,0:02:36.59,Default,,0000,0000,0000,,Está bien. En realidad necesitamos modificar este HTML
Dialogue: 0,0:02:36.59,0:02:38.14,Default,,0000,0000,0000,,para añadir el atributo "Id".
Dialogue: 0,0:02:38.30,0:02:40.69,Default,,0000,0000,0000,,Así que ponemos nuestro cursor en el inicio de la etiqueta,
Dialogue: 0,0:02:40.69,0:02:43.52,Default,,0000,0000,0000,,añadimos un espacio, tecleamos "id = "
Dialogue: 0,0:02:43.58,0:02:46.69,Default,,0000,0000,0000,,y luego tecleamos un "Id" único y muy descriptivo.
Dialogue: 0,0:02:46.79,0:02:49.94,Default,,0000,0000,0000,,Entonces, "rabbits-info-heading".
Dialogue: 0,0:02:50.69,0:02:54.04,Default,,0000,0000,0000,,Ok, el segundo paso. Regresamos a nuestra etiqueta de estilo
Dialogue: 0,0:02:54.04,0:02:57.43,Default,,0000,0000,0000,,añadimos una nueva línea, escribimos el signo #,
Dialogue: 0,0:02:57.43,0:03:01.84,Default,,0000,0000,0000,,luego nuestro "Id", "rabbits-info-Heading"
Dialogue: 0,0:03:01.84,0:03:04.95,Default,,0000,0000,0000,,y luego ponemos nuestras propiedades dentro de llaves "{
Dialogue: 0,0:03:04.95,0:03:08.62,Default,,0000,0000,0000,,background-color: purple;\N}"
Dialogue: 0,0:03:08.94,0:03:13.26,Default,,0000,0000,0000,,¡Oh oh! Ok, no funcionó.\NMmm, ¿ves algo que esté mal?
Dialogue: 0,0:03:13.42,0:03:15.28,Default,,0000,0000,0000,,¿Escribí de la misma forma?
Dialogue: 0,0:03:15.36,0:03:18.30,Default,,0000,0000,0000,,"rabbits-info-Heading,\Nrabbits-info-heading"
Dialogue: 0,0:03:18.48,0:03:21.05,Default,,0000,0000,0000,,Mmm, parace que es lo mismo.
Dialogue: 0,0:03:21.16,0:03:23.37,Default,,0000,0000,0000,,Ahora puedo compararlos letra por letra,
Dialogue: 0,0:03:23.37,0:03:25.08,Default,,0000,0000,0000,,para averiguar qué es lo que está mal,
Dialogue: 0,0:03:25.08,0:03:29.63,Default,,0000,0000,0000,,pero lo que me gusta hacer es ir abajo, y seleccionar el "Id" en el HTML,
Dialogue: 0,0:03:29.68,0:03:33.81,Default,,0000,0000,0000,,copiarlo y luego pegarlo aquí para estar segura de que es exactamente lo mismo.
Dialogue: 0,0:03:33.89,0:03:35.48,Default,,0000,0000,0000,,Y ¡funcionó!
Dialogue: 0,0:03:35.56,0:03:39.82,Default,,0000,0000,0000,,Mi "" tiene un color de fondo.\N¿Y te diste cuenta qué cambio?
Dialogue: 0,0:03:40.08,0:03:44.47,Default,,0000,0000,0000,,Tal vez lo hiciste. Aquí había una "h".\NLa "h" era una "H" mayúscula,
Dialogue: 0,0:03:44.47,0:03:47.00,Default,,0000,0000,0000,,que el navegador no considera igual.
Dialogue: 0,0:03:47.10,0:03:50.23,Default,,0000,0000,0000,,Tiene que ser la misma "h" minúscula para coincidir en el HTML.
Dialogue: 0,0:03:50.32,0:03:52.85,Default,,0000,0000,0000,,Esto es porque los "Id´s" distinguen mayúsculas de minúsculas.
Dialogue: 0,0:03:52.93,0:03:57.14,Default,,0000,0000,0000,,Así que tienes que escribirlas de la misma manera en todos lados.
Dialogue: 0,0:03:57.51,0:04:01.75,Default,,0000,0000,0000,,Me parece que lo mejor es simplemente usar minúsculas en cada letra de mis "Id´s".
Dialogue: 0,0:04:01.75,0:04:04.64,Default,,0000,0000,0000,,Y así no tengo que pensar si usé mayúsculas o minúsculas.
Dialogue: 0,0:04:05.16,0:04:08.40,Default,,0000,0000,0000,,Ok, déjame darte una última advertencia:
Dialogue: 0,0:04:08.40,0:04:10.53,Default,,0000,0000,0000,,¡Los "Id´s" tienen que ser únicos!
Dialogue: 0,0:04:10.65,0:04:13.44,Default,,0000,0000,0000,,Si tienes dos etiquetas en tu página con exactamente el mismo "Id",
Dialogue: 0,0:04:13.44,0:04:17.84,Default,,0000,0000,0000,,el navegador tal vez estilice los dos, pero puede que sólo estilice uno de ellos.
Dialogue: 0,0:04:17.96,0:04:20.34,Default,,0000,0000,0000,,Y no quieres dejarlo a la suerte.
Dialogue: 0,0:04:20.45,0:04:23.10,Default,,0000,0000,0000,,"Id´s" lindos, únicos y descriptivos.