[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.70,0:00:02.16,Default,,0000,0000,0000,,Ya aprendimos cómo hacer una página web
Dialogue: 0,0:00:02.16,0:00:04.12,Default,,0000,0000,0000,,bonita y completa con todo tipo \Nde marcas
Dialogue: 0,0:00:04.12,0:00:07.95,Default,,0000,0000,0000,,textos e imágenes, pero nos falta algo, \Nestilo.
Dialogue: 0,0:00:07.95,0:00:09.40,Default,,0000,0000,0000,,Mi página web aquí se ve igual que
Dialogue: 0,0:00:09.40,0:00:10.98,Default,,0000,0000,0000,,las páginas web que has estado haciendo.
Dialogue: 0,0:00:10.98,0:00:13.69,Default,,0000,0000,0000,,Texto negro, fondo blanco, el mismo tipo\Nde letra,
Dialogue: 0,0:00:13.69,0:00:15.85,Default,,0000,0000,0000,,todo igual de arriba a abajo.
Dialogue: 0,0:00:15.85,0:00:18.02,Default,,0000,0000,0000,,Pero has navegado en la web y\Nhas visto que las páginas web se ven
Dialogue: 0,0:00:18.02,0:00:20.23,Default,,0000,0000,0000,,muy diferentes unas de otras.
Dialogue: 0,0:00:20.23,0:00:21.61,Default,,0000,0000,0000,,Mira alrededor en Khan Academy
Dialogue: 0,0:00:21.61,0:00:24.65,Default,,0000,0000,0000,,los diferentes colores y tipos y \Ntamaños de letra.
Dialogue: 0,0:00:24.65,0:00:26.82,Default,,0000,0000,0000,,De hecho, es lo que vamos a hacer \Nahora.
Dialogue: 0,0:00:26.82,0:00:29.90,Default,,0000,0000,0000,,Pausa esta guía paso a paso y revisa algunas\Npáginas web.
Dialogue: 0,0:00:29.90,0:00:31.62,Default,,0000,0000,0000,,¿Qué hay de diferente en cada \Nuna de ellas?
Dialogue: 0,0:00:31.62,0:00:35.01,Default,,0000,0000,0000,,¿Qué es lo que te gusta o te disgusta \Nde su estilo?
Dialogue: 0,0:00:35.01,0:00:37.20,Default,,0000,0000,0000,,Voy a esperar aquí.
Dialogue: 0,0:00:38.05,0:00:40.75,Default,,0000,0000,0000,,Es importante ver cómo las páginas web\Npueden ser diferentes\N
Dialogue: 0,0:00:40.75,0:00:43.23,Default,,0000,0000,0000,,porque muy pronto podrás hacer
Dialogue: 0,0:00:43.23,0:00:45.44,Default,,0000,0000,0000,,que tus propias páginas web se vean\Ndiferentes y querrás hacerlo
Dialogue: 0,0:00:45.44,0:00:48.54,Default,,0000,0000,0000,,de manera que seas feliz,\Nporque esto te representa,
Dialogue: 0,0:00:48.54,0:00:51.20,Default,,0000,0000,0000,,y esto también hace felices a otros \Nusuarios .
Dialogue: 0,0:00:51.20,0:00:53.00,Default,,0000,0000,0000,,Bueno, para montar nuestra página web\Nnecesitamos
Dialogue: 0,0:00:53.00,0:00:55.46,Default,,0000,0000,0000,,aprender un lenguaje completamente \Nnuevo, CSS.
Dialogue: 0,0:00:55.46,0:00:57.88,Default,,0000,0000,0000,,Esto significa Hojas de Estilo en Cascada
Dialogue: 0,0:00:57.88,0:00:59.76,Default,,0000,0000,0000,,y es una forma de definir los estilos \Nque vamos a aplicar
Dialogue: 0,0:00:59.76,0:01:01.74,Default,,0000,0000,0000,,a las diferentes partes de nuestra \Npágina web.
Dialogue: 0,0:01:01.74,0:01:06.31,Default,,0000,0000,0000,,Incorporamos CSS dentro de HTML\Npero realmente no es HTML.
Dialogue: 0,0:01:06.31,0:01:08.02,Default,,0000,0000,0000,,Entonces tenemos que aprender un\Nlenguaje nuevo
Dialogue: 0,0:01:08.02,0:01:11.16,Default,,0000,0000,0000,,y trata de no confundir HTML con CSS.
Dialogue: 0,0:01:11.16,0:01:13.96,Default,,0000,0000,0000,,Vamos a ver cómo podemos usar los \Nestilos de CSS en todos los aspectos
Dialogue: 0,0:01:13.96,0:01:16.70,Default,,0000,0000,0000,,de nuestra página web como los tipos\Nde letra, tamaños y diseños
Dialogue: 0,0:01:16.70,0:01:20.55,Default,,0000,0000,0000,,pero empezaremos con algo que es\Ndivertido, el color.
Dialogue: 0,0:01:20.55,0:01:22.18,Default,,0000,0000,0000,,¿Qué tal si cambiamos algunos \Nencabezados
Dialogue: 0,0:01:22.18,0:01:25.53,Default,,0000,0000,0000,,en nuestra página web a un \Nagradable verde césped?
Dialogue: 0,0:01:25.53,0:01:28.40,Default,,0000,0000,0000,,Para empezar, necesitamos añadir\Netiquetas de estilo
Dialogue: 0,0:01:28.40,0:01:31.63,Default,,0000,0000,0000,,al encabezado de nuestra página.
Dialogue: 0,0:01:31.84,0:01:34.46,Default,,0000,0000,0000,,Cuando el navegador ve esto, \Nlo considera correcto.\N
Dialogue: 0,0:01:34.46,0:01:37.39,Default,,0000,0000,0000,,Todo lo que está aquí dentro es CSS.
Dialogue: 0,0:01:37.39,0:01:40.06,Default,,0000,0000,0000,,Voy a usar mi analizador CSS para \Nentender esto
Dialogue: 0,0:01:40.06,0:01:43.10,Default,,0000,0000,0000,,en lugar del mi analizador de HTML.
Dialogue: 0,0:01:43.46,0:01:48.31,Default,,0000,0000,0000,,Aquí dentro, vamos a añadir una regla \Nde estilos de CSS.
Dialogue: 0,0:01:48.31,0:01:50.89,Default,,0000,0000,0000,,Una regla de estilos tiene un selector\Nque le dice al navegador
Dialogue: 0,0:01:50.89,0:01:54.06,Default,,0000,0000,0000,,qué parte de la página web tiene \Nestilo, y declaraciones
Dialogue: 0,0:01:54.06,0:01:56.79,Default,,0000,0000,0000,,que le dicen al navegador cómo estilizar\Nesa parte.
Dialogue: 0,0:01:56.79,0:02:00.34,Default,,0000,0000,0000,,Si queremos estilizar todos nuestros \Nencabezados h2 en nuestra página,
Dialogue: 0,0:02:00.34,0:02:03.100,Default,,0000,0000,0000,,tenemos que teclear este selector h2.
Dialogue: 0,0:02:03.100,0:02:06.01,Default,,0000,0000,0000,,Después ponemos llaves.
Dialogue: 0,0:02:06.01,0:02:08.48,Default,,0000,0000,0000,,Asegúrate de que sean llaves, \Nno corchetes.
Dialogue: 0,0:02:08.48,0:02:10.15,Default,,0000,0000,0000,,Esos no funcionarán.
Dialogue: 0,0:02:10.15,0:02:12.80,Default,,0000,0000,0000,,Dentro, pondremos nuestras \Ndeclaraciones
Dialogue: 0,0:02:12.80,0:02:14.40,Default,,0000,0000,0000,,que tienen propiedades y valores.
Dialogue: 0,0:02:14.40,0:02:19.24,Default,,0000,0000,0000,,Así que para cambiar el color del texto,\Nusamos la propiedad de color.
Dialogue: 0,0:02:19.24,0:02:22.90,Default,,0000,0000,0000,,Entonces ponemos dos puntos y \Nnecesitamos asignar un valor.
Dialogue: 0,0:02:22.90,0:02:25.78,Default,,0000,0000,0000,,Tenemos que decirle al navegador qué\Ncolor queremos.
Dialogue: 0,0:02:25.78,0:02:28.71,Default,,0000,0000,0000,,Bueno, podemos escribir green (verde).
Dialogue: 0,0:02:29.31,0:02:32.20,Default,,0000,0000,0000,,Lo va entender porque el verde \Nes un color común.
Dialogue: 0,0:02:32.20,0:02:33.83,Default,,0000,0000,0000,,Pero no es el verde que quiero.
Dialogue: 0,0:02:33.83,0:02:35.93,Default,,0000,0000,0000,,Quiero un verde césped.
Dialogue: 0,0:02:35.93,0:02:39.42,Default,,0000,0000,0000,,Si escribo grassy green (verde césped), oh.
Dialogue: 0,0:02:39.42,0:02:42.40,Default,,0000,0000,0000,,Ahora el navegador está confundido\Ny pone los encabezados
Dialogue: 0,0:02:42.40,0:02:45.66,Default,,0000,0000,0000,,negros de nuevo, porque no entiende\Ngrassy green (verde césped).
Dialogue: 0,0:02:45.66,0:02:48.45,Default,,0000,0000,0000,,Si queremos se capaces de especificar cualquier color,
Dialogue: 0,0:02:48.45,0:02:51.64,Default,,0000,0000,0000,,tenemos que usar algo que se llama \Nespectro RGB
Dialogue: 0,0:02:51.64,0:02:54.15,Default,,0000,0000,0000,,del cual tal vez escuchaste en tu clase\Nde arte.
Dialogue: 0,0:02:54.15,0:02:55.100,Default,,0000,0000,0000,,No necesitas ser experto
Dialogue: 0,0:02:55.100,0:02:58.81,Default,,0000,0000,0000,,porque aquí tenemos un selector de \Ncolor RGB para ti.
Dialogue: 0,0:02:58.81,0:03:03.81,Default,,0000,0000,0000,,Para usarlo, basta con sustituir esto \Ncon rgb y paréntesis.
Dialogue: 0,0:03:04.08,0:03:06.56,Default,,0000,0000,0000,,Aparece un selector de color\Ny puedes mover
Dialogue: 0,0:03:06.56,0:03:09.33,Default,,0000,0000,0000,,tu ratón dentro de él y seleccionar\Nun color,
Dialogue: 0,0:03:09.33,0:03:12.40,Default,,0000,0000,0000,,y puedes ver el color actualizado en \Ntiempo real.
Dialogue: 0,0:03:12.40,0:03:14.87,Default,,0000,0000,0000,,Cuando te sientas feliz, selecciona el color.
Dialogue: 0,0:03:14.87,0:03:17.02,Default,,0000,0000,0000,,Ahora, ¿sabes por qué hay tres números
Dialogue: 0,0:03:17.02,0:03:20.41,Default,,0000,0000,0000,,que no cambian en los paréntesis RGB?
Dialogue: 0,0:03:20.41,0:03:22.93,Default,,0000,0000,0000,,Son los componentes rojo, verde y azul
Dialogue: 0,0:03:22.93,0:03:26.23,Default,,0000,0000,0000,,que forman el color.
Dialogue: 0,0:03:26.46,0:03:29.93,Default,,0000,0000,0000,,Ok, lo mejor acerca del selector \Nh2 de CSS
Dialogue: 0,0:03:29.93,0:03:33.94,Default,,0000,0000,0000,,que usamos, es que pondrá iguales todos \Nlos encabezados h2 en la página.
Dialogue: 0,0:03:33.94,0:03:36.53,Default,,0000,0000,0000,,Entonces podemos cambiar múltiples\Nencabezados porque queremos
Dialogue: 0,0:03:36.53,0:03:40.36,Default,,0000,0000,0000,,que todos los encabezados h2 sean \Nverdes y esto es consistente
Dialogue: 0,0:03:40.36,0:03:43.48,Default,,0000,0000,0000,,para todos los encabezados h2 que se\Nencuentran en la página.
Dialogue: 0,0:03:43.48,0:03:45.12,Default,,0000,0000,0000,,Si continuas con CSS, puedes\Naprender
Dialogue: 0,0:03:45.12,0:03:47.48,Default,,0000,0000,0000,,sobre otras maneras de cambiar sólo\Nalgunas partes de la página,
Dialogue: 0,0:03:47.48,0:03:50.02,Default,,0000,0000,0000,,como si quisieras cambiar sólo uno \Nde los encabezados h2.\N
Dialogue: 0,0:03:50.02,0:03:54.41,Default,,0000,0000,0000,,Pero se puede ir bastante lejos con \Neste tipo de selectores.
Dialogue: 0,0:03:54.41,0:03:56.32,Default,,0000,0000,0000,,Vamos a ver otra regla de estilo de CSS.
Dialogue: 0,0:03:56.32,0:03:59.21,Default,,0000,0000,0000,,Ahora vamos a cambiar el fondo por uno\Nazul cielo.
Dialogue: 0,0:03:59.21,0:04:02.06,Default,,0000,0000,0000,,¿Cómo podemos cambiar el color del\Nfondo en una página?
Dialogue: 0,0:04:02.06,0:04:05.81,Default,,0000,0000,0000,,Bueno, ¿qué etiqueta abarca toda\Nla página?
Dialogue: 0,0:04:05.81,0:04:07.20,Default,,0000,0000,0000,,No es la etiqueta h1.
Dialogue: 0,0:04:07.20,0:04:10.57,Default,,0000,0000,0000,,No es la etiqueta P, no es la de imagen.
Dialogue: 0,0:04:10.57,0:04:13.17,Default,,0000,0000,0000,,Es la etiqueta body, recuerda, todo lo
Dialogue: 0,0:04:13.17,0:04:16.20,Default,,0000,0000,0000,,que es visible está dentro de la etiqueta body.
Dialogue: 0,0:04:16.20,0:04:18.38,Default,,0000,0000,0000,,Así que si queremos cambiar el estilo \Na toda la página,
Dialogue: 0,0:04:18.38,0:04:22.62,Default,,0000,0000,0000,,necesitamos usar un selector para \Nseleccionar esa etiqueta.
Dialogue: 0,0:04:22.62,0:04:25.41,Default,,0000,0000,0000,,Entonces escribimos body.
Dialogue: 0,0:04:26.90,0:04:31.28,Default,,0000,0000,0000,,Ahora, en lugar de color, vamos a \Nescribir background-color (color de fondo),
Dialogue: 0,0:04:31.71,0:04:36.36,Default,,0000,0000,0000,,dos puntos, y luego rgb paréntesis.
Dialogue: 0,0:04:36.36,0:04:41.05,Default,,0000,0000,0000,,Usamos nuestro selector de color, \Nhacemos que aparezca y seleccionamos \Nun azul
Dialogue: 0,0:04:41.05,0:04:45.65,Default,,0000,0000,0000,,que me hace pensar en los conejitos y \Nen nubes de algodón.
Dialogue: 0,0:04:45.65,0:04:46.66,Default,,0000,0000,0000,,¡Tan - tan!
Dialogue: 0,0:04:46.66,0:04:49.37,Default,,0000,0000,0000,,Mira el estilo de mi página.
Dialogue: 0,0:04:49.37,0:04:51.42,Default,,0000,0000,0000,,Hay cientos de propiedades más en CSS
Dialogue: 0,0:04:51.49,0:04:53.97,Default,,0000,0000,0000,,aparte de color y color de fondo
Dialogue: 0,0:04:54.12,0:04:56.59,Default,,0000,0000,0000,,pero fue divertido empezar con éstas.
Dialogue: 0,0:04:56.76,0:04:58.03,Default,,0000,0000,0000,,De hecho, cuando termine de hablar,\Njuega un poco
Dialogue: 0,0:04:58.16,0:05:01.14,Default,,0000,0000,0000,,con los colores que seleccioné y \Npersonaliza esta página
Dialogue: 0,0:05:01.53,0:05:03.87,Default,,0000,0000,0000,,para que quede más a tu estilo que al mío.
Dialogue: 0,0:05:04.04,0:05:07.08,Default,,0000,0000,0000,,¡Muy bien sigue adelante!