[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 dar estilo a nuestros '' y a los párrafos
Dialogue: 0,0:00:08.67,0:00:08.92,Default,,0000,0000,0000,,de modo que todos los '' sean verdes y todos los párrafos sean púrpuras.
Dialogue: 0,0:00:09.54,0:00:13.16,Default,,0000,0000,0000,,Pero, ¿qué pasa si nosotros queremos seleccionar solo el primer '' ?
Dialogue: 0,0:00:13.46,0:00:16.46,Default,,0000,0000,0000,,o dar estilo solo al segundo párrafo?
Dialogue: 0,0:00:16.72,0:00:19.87,Default,,0000,0000,0000,,Nosotros necesitariamos encontrar una forma de decirle al navegador exáctamente cuales
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:24.93,Default,,0000,0000,0000,,de modo que este no aplique los estilos a todos ellos, como está ahora.
Dialogue: 0,0:00:25.33,0:00:27.94,Default,,0000,0000,0000,,Una forma de hacerlo es seleccionar por ID.
Dialogue: 0,0:00:28.26,0:00:30.52,Default,,0000,0000,0000,,Podemos dar a una etiqueta de nuestra página un ID único
Dialogue: 0,0:00:30.52,0:00:32.45,Default,,0000,0000,0000,,y luego podemos decirle a CSS,
Dialogue: 0,0:00:34.37,0:00:36.30,Default,,0000,0000,0000,,"Escucha: Yo solo quiero aplicar estos estilos al elemento con este ID,
Dialogue: 0,0:00:36.30,0:00:38.21,Default,,0000,0000,0000,,no a ninguno de los otros elementos."
Dialogue: 0,0:00:38.46,0:00:41.28,Default,,0000,0000,0000,,Para hacer esto, el primer paso es de hecho modificar el HTML
Dialogue: 0,0:00:41.28,0:00:45.13,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.37,Default,,0000,0000,0000,,Comencemos con el segundo párrafo de aquí.
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,,en el comienzo de la etiqueta '' justo después de p,
Dialogue: 0,0:00:53.42,0:00:58.36,Default,,0000,0000,0000,,luego añade un espacio, y luego teclea 'id = " '
Dialogue: 0,0:00:58.98,0:01:02.67,Default,,0000,0000,0000,,Ahora necesitamos rellenar 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.45,Default,,0000,0000,0000,,Bueno, este debería ser descriptivo y único.
Dialogue: 0,0:01:06.51,0:01:09.23,Default,,0000,0000,0000,,Nada más en esta página debería tener el mismo ID.
Dialogue: 0,0:01:09.48,0:01:15.08,Default,,0000,0000,0000,,Bueno, dado que esto es una canción sobre conejos, la llamaré rabbits-song.
Dialogue: 0,0:01:15.42,0:01:19.84,Default,,0000,0000,0000,,No podemos tener espacios en IDs, asi que si tienen múltiples palabras como esta
Dialogue: 0,0:01:19.84,0:01:22.24,Default,,0000,0000,0000,,siempre debes utilizar guiones o guiones bajos.
Dialogue: 0,0:01:22.60,0:01:24.72,Default,,0000,0000,0000,,Personalmente, me encantan los guiones.
Dialogue: 0,0:01:25.65,0:01:28.94,Default,,0000,0000,0000,,Ahora tenemos una forma de identificar este párrafo únicamente.
Dialogue: 0,0:01:29.02,0:01:31.65,Default,,0000,0000,0000,,Entonces podemos añadir una regla CSS enfocandolo.
Dialogue: 0,0:01:31.75,0:01:35.48,Default,,0000,0000,0000,,Volvamos a nuestra etiqueta ''\Npara el segundo paso.
Dialogue: 0,0:01:35.60,0:01:38.43,Default,,0000,0000,0000,,Añadiremos una nueva línea, después de la última regla.
Dialogue: 0,0:01:39.48,0:01:43.26,Default,,0000,0000,0000,,Recuerda, la primera parte de una regla del CSS es el selector:
Dialogue: 0,0:01:43.26,0:01:45.84,Default,,0000,0000,0000,,la parte que le dice al buscador 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 '' en la página.
Dialogue: 0,0:01:54.55,0:01:57.20,Default,,0000,0000,0000,,Ahora para hacer un selector\Nque solo seleccione elementos
Dialogue: 0,0:01:57.20,0:01:58.67,Default,,0000,0000,0000,,con un ID partícular,
Dialogue: 0,0:01:58.67,0:02:00.86,Default,,0000,0000,0000,,debemos empezar el selector con un signo #.
Dialogue: 0,0:02:01.29,0:02:04.55,Default,,0000,0000,0000,,Eso le dice al navegador que\Nlo que viene a continuación es un ID.
Dialogue: 0,0:02:05.15,0:02:08.80,Default,,0000,0000,0000,,Ahora escribimos nuestra identificación:\Nrabbits-song.
Dialogue: 0,0:02:09.60,0:02:11.88,Default,,0000,0000,0000,,El resto de la regla\Nes lo mismo que antes.
Dialogue: 0,0:02:11.93,0:02:13.72,Default,,0000,0000,0000,,Abrimos y cerramos nuestras llaves,
Dialogue: 0,0:02:13.72,0:02:17.84,Default,,0000,0000,0000,,añadimos una propiedad,\Ncomo background-color...
Dialogue: 0,0:02:18.36,0:02:20.57,Default,,0000,0000,0000,,... y listo! Funcionó!
Dialogue: 0,0:02:20.87,0:02:23.93,Default,,0000,0000,0000,,Solo el párrafo de la canción tiene\Nel color de fondo amarillo,
Dialogue: 0,0:02:23.93,0:02:26.09,Default,,0000,0000,0000,,y el primer párrafo\Npermanece igual.
Dialogue: 0,0:02:26.57,0:02:30.76,Default,,0000,0000,0000,,Vamos a hacer esto de nuevo,\Npara seleccionar el 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,,Eso es. Necesitamos incluso 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 mantenemos nuestro cursor\Nen la etiqueta inicial,
Dialogue: 0,0:02:40.69,0:02:43.52,Default,,0000,0000,0000,,añadimos un espacio, tipo 'id = '
Dialogue: 0,0:02:43.58,0:02:46.69,Default,,0000,0000,0000,,a continuación, escribimos un ID muy singular\Ny descriptiva.
Dialogue: 0,0:02:46.79,0:02:49.94,Default,,0000,0000,0000,,Así, "rabbits-info-heading".
Dialogue: 0,0:02:50.69,0:02:54.04,Default,,0000,0000,0000,,Bien, el segundo paso.\NRetrocedemos 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,\Nescribe 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 nuestra propiedad 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! Bien, no funcionó. Umm... ¿Ves lo que estuvo mal?
Dialogue: 0,0:03:13.42,0:03:15.28,Default,,0000,0000,0000,,Yo... deletreé de igual 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,,Hmm... se ven casi iguales.
Dialogue: 0,0:03:21.16,0:03:23.37,Default,,0000,0000,0000,,Ahora los podemos comparar letra-por-letra
Dialogue: 0,0:03:23.37,0:03:25.08,Default,,0000,0000,0000,,para averiguar 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\Ny 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 asegurarme que está exactamente igual.
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 fondo.\N¿Y te has dado cuenta de lo que cambió?
Dialogue: 0,0:03:40.08,0:03:44.47,Default,,0000,0000,0000,,Tal vez lo hiciste. Fue la h.\NLa h usada era una H mayúscula,
Dialogue: 0,0:03:44.47,0:03:47.00,Default,,0000,0000,0000,,que el navegador\Nno la considera como igual.
Dialogue: 0,0:03:47.10,0:03:50.23,Default,,0000,0000,0000,,Tiene que ser h minúscula para coincidir en el HTML.
Dialogue: 0,0:03:50.32,0:03:52.85,Default,,0000,0000,0000,,Eso es porque los id distinguen mayúsculas de minúsculas.
Dialogue: 0,0:03:52.93,0:03:57.14,Default,,0000,0000,0000,,Entonces tienes que deletrearlos de la misma forma en todas partes.
Dialogue: 0,0:03:57.51,0:04:01.75,Default,,0000,0000,0000,,Me parece que lo mejor es simplemente usar siempre\Nminúsculas para cada letra en mis IDs
Dialogue: 0,0:04:01.75,0:04:04.64,Default,,0000,0000,0000,,de manera que yo no tengo que pensar en si usé minúsculas o mayúsculas.
Dialogue: 0,0:04:05.16,0:04:08.40,Default,,0000,0000,0000,,Bien, ahora permiteme dejarte con una última advertencia:
Dialogue: 0,0:04:08.40,0:04:10.53,Default,,0000,0000,0000,,Los IDs deben ser únicos!
Dialogue: 0,0:04:10.65,0:04:13.44,Default,,0000,0000,0000,,Si tu tienes dos etiquetas en tu página con el mismo ID,
Dialogue: 0,0:04:13.44,0:04:17.84,Default,,0000,0000,0000,,el navegador podría poner estilo en ambas,\Npero también podría poner estilo en solo una de ellas.
Dialogue: 0,0:04:17.96,0:04:20.34,Default,,0000,0000,0000,,Y tu no quieres dejarlo a la suerte.
Dialogue: 0,0:04:20.45,0:04:23.10,Default,,0000,0000,0000,,Lindos, únicos y descriptivos IDs.