[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.27,0:00:03.86,Default,,0000,0000,0000,,Cuando usamos "´s", con frecuencia es porque queremos dividir nuestra página
Dialogue: 0,0:00:03.86,0:00:07.58,Default,,0000,0000,0000,,en varios cuadros, cambiar el tamaño de esos cuadros y moverlos.
Dialogue: 0,0:00:07.74,0:00:11.56,Default,,0000,0000,0000,,Se necesita un buen ojo para decidir cómo diseñar una página exactamente,
Dialogue: 0,0:00:11.56,0:00:12.72,Default,,0000,0000,0000,,para que se vea bien.
Dialogue: 0,0:00:12.77,0:00:16.48,Default,,0000,0000,0000,,Pero ahora, vamos a ignorar el objetivo de que una página se vea bien
Dialogue: 0,0:00:16.48,0:00:18.70,Default,,0000,0000,0000,,y sólo vamos a mostrar cómo cambiar las cosas.
Dialogue: 0,0:00:18.84,0:00:21.88,Default,,0000,0000,0000,,Vamos a cambiar el tamaño del bloque "official-info".
Dialogue: 0,0:00:21.95,0:00:25.54,Default,,0000,0000,0000,,Por defecto, un etiqueta "" ocupa el 100 por ciento del espacio disponible a lo ancho.
Dialogue: 0,0:00:25.77,0:00:29.24,Default,,0000,0000,0000,,Es por eso que vemos que el cuadro gris se extiende a lo ancho de toda la pantalla.
Dialogue: 0,0:00:29.24,0:00:32.48,Default,,0000,0000,0000,,Pero tal vez sólo quiero que ocupe 300 pixeles.
Dialogue: 0,0:00:32.72,0:00:36.70,Default,,0000,0000,0000,,Bueno, voy a agregar otra propiedad a la regla CSS que está aquí arriba:
Dialogue: 0,0:00:36.70,0:00:39.37,Default,,0000,0000,0000,,"width: 300px;".
Dialogue: 0,0:00:40.18,0:00:43.37,Default,,0000,0000,0000,,Eso funciona, pero vamos a hacer algo más interesante.
Dialogue: 0,0:00:43.38,0:00:44.97,Default,,0000,0000,0000,,Vamos a usar un porcentaje de anchura,
Dialogue: 0,0:00:44.97,0:00:50.11,Default,,0000,0000,0000,,y digamos que el bloque definido con "" siempre va a ocupar el 70 por ciento de la anchura disponible.
Dialogue: 0,0:00:50.29,0:00:53.33,Default,,0000,0000,0000,,Ahora el texto está limitado a este cuadro más pequeño,
Dialogue: 0,0:00:53.33,0:00:55.23,Default,,0000,0000,0000,,y lo que está en "" se hizo más alto.
Dialogue: 0,0:00:55.43,0:00:59.14,Default,,0000,0000,0000,,Si queremos, en realidad también podemos limitar la altura del cuadro,
Dialogue: 0,0:00:59.14,0:01:00.86,Default,,0000,0000,0000,,con la propiedad "height",
Dialogue: 0,0:01:00.95,0:01:03.23,Default,,0000,0000,0000,,"height: 180px;".
Dialogue: 0,0:01:03.78,0:01:06.58,Default,,0000,0000,0000,,Mmm, ok. Sucedió algo curioso.
Dialogue: 0,0:01:06.81,0:01:09.64,Default,,0000,0000,0000,,El cuadro gris cambió su tamaño a 180 pixeles,
Dialogue: 0,0:01:09.64,0:01:13.42,Default,,0000,0000,0000,,pero el texto se desborda fuera del cuadro gris.
Dialogue: 0,0:01:13.67,0:01:15.51,Default,,0000,0000,0000,,¿Por qué pasa eso?
Dialogue: 0,0:01:15.79,0:01:20.34,Default,,0000,0000,0000,,Es por una propiedad que llamamos "overflow".
Dialogue: 0,0:01:20.34,0:01:23.89,Default,,0000,0000,0000,,El valor predeterminado para "overflow" es "visible",
Dialogue: 0,0:01:23.89,0:01:28.31,Default,,0000,0000,0000,,lo que significa que el elemento cambia de tamaño pero el contenido se desborda por fuera,
Dialogue: 0,0:01:28.31,0:01:30.12,Default,,0000,0000,0000,,lo que se ve un poco raro.
Dialogue: 0,0:01:30.46,0:01:32.96,Default,,0000,0000,0000,,¿Qué otras opciones tenemos para la propiedad "overflow"?
Dialogue: 0,0:01:33.49,0:01:36.49,Default,,0000,0000,0000,,Bueno, podemos probar con "hidden".
Dialogue: 0,0:01:36.85,0:01:40.24,Default,,0000,0000,0000,,Esto reduce el contenido desbordado, lo recorta en el borde.
Dialogue: 0,0:01:40.24,0:01:42.10,Default,,0000,0000,0000,,Eso no es lo que queremos, porque sino los
Dialogue: 0,0:01:42.10,0:01:45.82,Default,,0000,0000,0000,,usuarios no podrán leer la asombrosa información oficial.
Dialogue: 0,0:01:46.29,0:01:48.98,Default,,0000,0000,0000,,Podríamos probar con "auto",
Dialogue: 0,0:01:49.11,0:01:53.07,Default,,0000,0000,0000,,que le dice al navegador que agregue barras de desplazamiento, si el contenido se desborda.
Dialogue: 0,0:01:53.08,0:01:56.69,Default,,0000,0000,0000,,Ahora puedo desplazarme dentro del cuadro para ver todo el texto.
Dialogue: 0,0:01:57.07,0:01:59.48,Default,,0000,0000,0000,,Si queremos podemos ser aún más específicos:
Dialogue: 0,0:01:59.48,0:02:02.71,Default,,0000,0000,0000,,podemos especificar diferentes propiedades de desbordamiento para cada dirección.
Dialogue: 0,0:02:02.79,0:02:04.18,Default,,0000,0000,0000,,Por ejemplo, si queremos
Dialogue: 0,0:02:04.18,0:02:07.64,Default,,0000,0000,0000,,un desbordamiento con barras de desplazamiento en la dirección "y", hacia arriba y hacia abajo,
Dialogue: 0,0:02:07.64,0:02:10.51,Default,,0000,0000,0000,,sólo escribimos:\N"overflow-y: auto;",
Dialogue: 0,0:02:10.83,0:02:14.21,Default,,0000,0000,0000,,pero luego si queremos recortar el contenido en la dirección "x",
Dialogue: 0,0:02:14.21,0:02:17.32,Default,,0000,0000,0000,,podemos decir: "overflow-x: hidden;".
Dialogue: 0,0:02:18.45,0:02:21.42,Default,,0000,0000,0000,,Sean cuidadosos cuando usen "overflow",
Dialogue: 0,0:02:21.42,0:02:24.64,Default,,0000,0000,0000,,porque las barras de desplazamiento pueden se molestas para los usuarios.
Dialogue: 0,0:02:24.64,0:02:27.22,Default,,0000,0000,0000,,Especialmente las barras de desplazamiento sin barras de desplazamiento...
Dialogue: 0,0:02:27.22,0:02:29.15,Default,,0000,0000,0000,,evítenlas si pueden.
Dialogue: 0,0:02:29.94,0:02:33.97,Default,,0000,0000,0000,,Ahora, regresando al "width/height" (ancho y alto), en realidad podemos usar "width" y "height"
Dialogue: 0,0:02:33.97,0:02:37.40,Default,,0000,0000,0000,,para todo tipo de elementos, como nuestras imágenes.
Dialogue: 0,0:02:37.70,0:02:42.17,Default,,0000,0000,0000,,Ahora que ya conoces CSS, puedes usar las propiedades "width" y "height" de CSS,
Dialogue: 0,0:02:42.17,0:02:44.65,Default,,0000,0000,0000,,en lugar de los atributos "width" y "height".
Dialogue: 0,0:02:44.95,0:02:52.54,Default,,0000,0000,0000,,Déjenme hacer esta imagen del gato un poco más grande, definiendo un id: "cute-cat",
Dialogue: 0,0:02:52.54,0:02:55.42,Default,,0000,0000,0000,,borrando el atributo,
Dialogue: 0,0:02:55.42,0:03:00.40,Default,,0000,0000,0000,,y arriba en la regla de estilo, escribo: "#cute-cat {"
Dialogue: 0,0:03:00.40,0:03:03.13,Default,,0000,0000,0000,,"width: 120px;"
Dialogue: 0,0:03:03.58,0:03:06.33,Default,,0000,0000,0000,,Igual que antes con los atributos,
Dialogue: 0,0:03:06.33,0:03:09.03,Default,,0000,0000,0000,,es mejor sólo especificar el ancho o el alto,
Dialogue: 0,0:03:09.03,0:03:12.55,Default,,0000,0000,0000,,y dejar que el navegador ajuste la otra dimensión con el valor más adecuado.
Dialogue: 0,0:03:12.62,0:03:14.68,Default,,0000,0000,0000,,De lo contrario, ¡vamos a tener un gatito aplastado!
Dialogue: 0,0:03:14.74,0:03:18.55,Default,,0000,0000,0000,,Bueno, ok, eso suena asombroso, vamos a tratar de hacerlo por un momento:
Dialogue: 0,0:03:18.55,0:03:19.78,Default,,0000,0000,0000,,"height: 40px;"
Dialogue: 0,0:03:19.78,0:03:21.73,Default,,0000,0000,0000,,Ajá, ¡gatito aplastado, yay!
Dialogue: 0,0:03:22.06,0:03:25.00,Default,,0000,0000,0000,,Ok, ok. No me pude resistir.
Dialogue: 0,0:03:25.08,0:03:28.79,Default,,0000,0000,0000,,Seré una desarrolladora responsable y voy a borrar eso ahora.
Dialogue: 0,0:03:29.01,0:03:30.69,Default,,0000,0000,0000,,Entre más conocimiento se tiene,
Dialogue: 0,0:03:30.69,0:03:33.08,Default,,0000,0000,0000,,es necesario asumir mayor responsabilidad.
Dialogue: 0,0:03:33.24,0:03:36.07,Default,,0000,0000,0000,,No sólo porque puedas poner barras de desplazamiento en todos lados,
Dialogue: 0,0:03:36.07,0:03:39.40,Default,,0000,0000,0000,,y aplastar gatitos, significa que debas hacerlo.
Dialogue: 0,0:03:39.50,0:03:42.58,Default,,0000,0000,0000,,Debido a que generalmente hacemos páginas web para que otras personas las usen,
Dialogue: 0,0:03:42.58,0:03:47.34,Default,,0000,0000,0000,,lo que pienses que es divertido podría ser muy difícil de usar para otros.
Dialogue: 0,0:03:47.58,0:03:52.85,Default,,0000,0000,0000,,Pero si haces algunas cosas divertidas aquí en Khan Academy, entonces no importa.