WEBVTT

00:00:00.266 --> 00:00:03.858
Cuando usamos "´s", con frecuencia es porque queremos dividir nuestra página

00:00:03.858 --> 00:00:07.577
en varios cuadros, cambiar el tamaño de esos cuadros y moverlos.

00:00:07.737 --> 00:00:11.565
Se necesita un buen ojo para decidir cómo diseñar una página exactamente,

00:00:11.565 --> 00:00:12.719
para que se vea bien.

00:00:12.767 --> 00:00:16.484
Pero ahora, vamos a ignorar el objetivo de que una página se vea bien

00:00:16.484 --> 00:00:18.701
y sólo vamos a mostrar cómo cambiar las cosas.

00:00:18.841 --> 00:00:21.882
Vamos a cambiar el tamaño del bloque "official-info".

00:00:21.948 --> 00:00:25.539
Por defecto, un etiqueta "" ocupa el 100 por ciento del espacio disponible a lo ancho.

00:00:25.768 --> 00:00:29.244
Es por eso que vemos que el cuadro gris se extiende a lo ancho de toda la pantalla.

00:00:29.244 --> 00:00:32.475
Pero tal vez sólo quiero que ocupe 300 pixeles.

00:00:32.715 --> 00:00:36.700
Bueno, voy a agregar otra propiedad a la regla CSS que está aquí arriba:

00:00:36.700 --> 00:00:39.373
"width: 300px;".

00:00:40.179 --> 00:00:43.374
Eso funciona, pero vamos a hacer algo más interesante.

00:00:43.380 --> 00:00:44.967
Vamos a usar un porcentaje de anchura,

00:00:44.967 --> 00:00:50.110
y digamos que el bloque definido con "" siempre va a ocupar el 70 por ciento de la anchura disponible.

00:00:50.287 --> 00:00:53.326
Ahora el texto está limitado a este cuadro más pequeño,

00:00:53.326 --> 00:00:55.233
y lo que está en "" se hizo más alto.

00:00:55.429 --> 00:00:59.136
Si queremos, en realidad también podemos limitar la altura del cuadro,

00:00:59.136 --> 00:01:00.864
con la propiedad "height",

00:01:00.948 --> 00:01:03.231
"height: 180px;".

00:01:03.778 --> 00:01:06.582
Mmm, ok. Sucedió algo curioso.

00:01:06.807 --> 00:01:09.642
El cuadro gris cambió su tamaño a 180 pixeles,

00:01:09.642 --> 00:01:13.425
pero el texto se desborda fuera del cuadro gris.

00:01:13.671 --> 00:01:15.507
¿Por qué pasa eso?

00:01:15.794 --> 00:01:20.338
Es por una propiedad que llamamos "overflow".

00:01:20.338 --> 00:01:23.893
El valor predeterminado para "overflow" es "visible",

00:01:23.893 --> 00:01:28.309
lo que significa que el elemento cambia de tamaño pero el contenido se desborda por fuera,

00:01:28.309 --> 00:01:30.118
lo que se ve un poco raro.

00:01:30.455 --> 00:01:32.955
¿Qué otras opciones tenemos para la propiedad "overflow"?

00:01:33.491 --> 00:01:36.489
Bueno, podemos probar con "hidden".

00:01:36.854 --> 00:01:40.244
Esto reduce el contenido desbordado, lo recorta en el borde.

00:01:40.244 --> 00:01:42.095
Eso no es lo que queremos, porque sino los

00:01:42.095 --> 00:01:45.824
usuarios no podrán leer la asombrosa información oficial.

00:01:46.287 --> 00:01:48.981
Podríamos probar con "auto",

00:01:49.107 --> 00:01:53.066
que le dice al navegador que agregue barras de desplazamiento, si el contenido se desborda.

00:01:53.078 --> 00:01:56.692
Ahora puedo desplazarme dentro del cuadro para ver todo el texto.

00:01:57.070 --> 00:01:59.475
Si queremos podemos ser aún más específicos:

00:01:59.475 --> 00:02:02.712
podemos especificar diferentes propiedades de desbordamiento para cada dirección.

00:02:02.787 --> 00:02:04.177
Por ejemplo, si queremos

00:02:04.177 --> 00:02:07.643
un desbordamiento con barras de desplazamiento en la dirección "y", hacia arriba y hacia abajo,

00:02:07.643 --> 00:02:10.509
sólo escribimos:
"overflow-y: auto;",

00:02:10.832 --> 00:02:14.207
pero luego si queremos recortar el contenido en la dirección "x",

00:02:14.207 --> 00:02:17.325
podemos decir: "overflow-x: hidden;".

00:02:18.450 --> 00:02:21.419
Sean cuidadosos cuando usen "overflow",

00:02:21.419 --> 00:02:24.644
porque las barras de desplazamiento pueden se molestas para los usuarios.

00:02:24.644 --> 00:02:27.215
Especialmente las barras de desplazamiento sin barras de desplazamiento...

00:02:27.215 --> 00:02:29.149
evítenlas si pueden.

00:02:29.939 --> 00:02:33.974
Ahora, regresando al "width/height" (ancho y alto), en realidad podemos usar "width" y "height"

00:02:33.974 --> 00:02:37.402
para todo tipo de elementos, como nuestras imágenes.

00:02:37.702 --> 00:02:42.168
Ahora que ya conoces CSS, puedes usar las propiedades "width" y "height" de CSS,

00:02:42.168 --> 00:02:44.649
en lugar de los atributos "width" y "height".

00:02:44.946 --> 00:02:52.542
Déjenme hacer esta imagen del gato un poco más grande, definiendo un id: "cute-cat",

00:02:52.542 --> 00:02:55.415
borrando el atributo,

00:02:55.415 --> 00:03:00.396
y arriba en la regla de estilo, escribo: "#cute-cat {"

00:03:00.396 --> 00:03:03.128
"width: 120px;"

00:03:03.585 --> 00:03:06.328
Igual que antes con los atributos,

00:03:06.328 --> 00:03:09.027
es mejor sólo especificar el ancho o el alto,

00:03:09.027 --> 00:03:12.548
y dejar que el navegador ajuste la otra dimensión con el valor más adecuado.

00:03:12.618 --> 00:03:14.679
De lo contrario, ¡vamos a tener un gatito aplastado!

00:03:14.743 --> 00:03:18.547
Bueno, ok, eso suena asombroso, vamos a tratar de hacerlo por un momento:

00:03:18.547 --> 00:03:19.781
"height: 40px;"

00:03:19.781 --> 00:03:21.726
Ajá, ¡gatito aplastado, yay!

00:03:22.059 --> 00:03:25.003
Ok, ok. No me pude resistir.

00:03:25.077 --> 00:03:28.793
Seré una desarrolladora responsable y voy a borrar eso ahora.

00:03:29.009 --> 00:03:30.689
Entre más conocimiento se tiene,

00:03:30.689 --> 00:03:33.077
es necesario asumir mayor responsabilidad.

00:03:33.238 --> 00:03:36.070
No sólo porque puedas poner barras de desplazamiento en todos lados,

00:03:36.070 --> 00:03:39.400
y aplastar gatitos, significa que debas hacerlo.

00:03:39.497 --> 00:03:42.578
Debido a que generalmente hacemos páginas web para que otras personas las usen,

00:03:42.578 --> 00:03:47.338
lo que pienses que es divertido podría ser muy difícil de usar para otros.

00:03:47.583 --> 00:03:52.853
Pero si haces algunas cosas divertidas aquí en Khan Academy, entonces no importa.