1
00:00:00,266 --> 00:00:03,858
Cuando usamos "´s", con frecuencia es porque queremos dividir nuestra página

2
00:00:03,858 --> 00:00:07,577
en varios cuadros, cambiar el tamaño de esos cuadros y moverlos.

3
00:00:07,737 --> 00:00:11,565
Se necesita un buen ojo para decidir cómo diseñar una página exactamente,

4
00:00:11,565 --> 00:00:12,719
para que se vea bien.

5
00:00:12,767 --> 00:00:16,484
Pero ahora, vamos a ignorar el objetivo de que una página se vea bien

6
00:00:16,484 --> 00:00:18,701
y sólo vamos a mostrar cómo cambiar las cosas.

7
00:00:18,841 --> 00:00:21,882
Vamos a cambiar el tamaño del bloque "official-info".

8
00:00:21,948 --> 00:00:25,539
Por defecto, un etiqueta "" ocupa el 100 por ciento del espacio disponible a lo ancho.

9
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.

10
00:00:29,244 --> 00:00:32,475
Pero tal vez sólo quiero que ocupe 300 pixeles.

11
00:00:32,715 --> 00:00:36,700
Bueno, voy a agregar otra propiedad a la regla CSS que está aquí arriba:

12
00:00:36,700 --> 00:00:39,373
"width: 300px;".

13
00:00:40,179 --> 00:00:43,374
Eso funciona, pero vamos a hacer algo más interesante.

14
00:00:43,380 --> 00:00:44,967
Vamos a usar un porcentaje de anchura,

15
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.

16
00:00:50,287 --> 00:00:53,326
Ahora el texto está limitado a este cuadro más pequeño,

17
00:00:53,326 --> 00:00:55,233
y lo que está en "" se hizo más alto.

18
00:00:55,429 --> 00:00:59,136
Si queremos, en realidad también podemos limitar la altura del cuadro,

19
00:00:59,136 --> 00:01:00,864
con la propiedad "height",

20
00:01:00,948 --> 00:01:03,231
"height: 180px;".

21
00:01:03,778 --> 00:01:06,582
Mmm, ok. Sucedió algo curioso.

22
00:01:06,807 --> 00:01:09,642
El cuadro gris cambió su tamaño a 180 pixeles,

23
00:01:09,642 --> 00:01:13,425
pero el texto se desborda fuera del cuadro gris.

24
00:01:13,671 --> 00:01:15,507
¿Por qué pasa eso?

25
00:01:15,794 --> 00:01:20,338
Es por una propiedad que llamamos "overflow".

26
00:01:20,338 --> 00:01:23,893
El valor predeterminado para "overflow" es "visible",

27
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,

28
00:01:28,309 --> 00:01:30,118
lo que se ve un poco raro.

29
00:01:30,455 --> 00:01:32,955
¿Qué otras opciones tenemos para la propiedad "overflow"?

30
00:01:33,491 --> 00:01:36,489
Bueno, podemos probar con "hidden".

31
00:01:36,854 --> 00:01:40,244
Esto reduce el contenido desbordado, lo recorta en el borde.

32
00:01:40,244 --> 00:01:42,095
Eso no es lo que queremos, porque sino los

33
00:01:42,095 --> 00:01:45,824
usuarios no podrán leer la asombrosa información oficial.

34
00:01:46,287 --> 00:01:48,981
Podríamos probar con "auto",

35
00:01:49,107 --> 00:01:53,066
que le dice al navegador que agregue barras de desplazamiento, si el contenido se desborda.

36
00:01:53,078 --> 00:01:56,692
Ahora puedo desplazarme dentro del cuadro para ver todo el texto.

37
00:01:57,070 --> 00:01:59,475
Si queremos podemos ser aún más específicos:

38
00:01:59,475 --> 00:02:02,712
podemos especificar diferentes propiedades de desbordamiento para cada dirección.

39
00:02:02,787 --> 00:02:04,177
Por ejemplo, si queremos

40
00:02:04,177 --> 00:02:07,643
un desbordamiento con barras de desplazamiento en la dirección "y", hacia arriba y hacia abajo,

41
00:02:07,643 --> 00:02:10,509
sólo escribimos:
"overflow-y: auto;",

42
00:02:10,832 --> 00:02:14,207
pero luego si queremos recortar el contenido en la dirección "x",

43
00:02:14,207 --> 00:02:17,325
podemos decir: "overflow-x: hidden;".

44
00:02:18,450 --> 00:02:21,419
Sean cuidadosos cuando usen "overflow",

45
00:02:21,419 --> 00:02:24,644
porque las barras de desplazamiento pueden se molestas para los usuarios.

46
00:02:24,644 --> 00:02:27,215
Especialmente las barras de desplazamiento sin barras de desplazamiento...

47
00:02:27,215 --> 00:02:29,149
evítenlas si pueden.

48
00:02:29,939 --> 00:02:33,974
Ahora, regresando al "width/height" (ancho y alto), en realidad podemos usar "width" y "height"

49
00:02:33,974 --> 00:02:37,402
para todo tipo de elementos, como nuestras imágenes.

50
00:02:37,702 --> 00:02:42,168
Ahora que ya conoces CSS, puedes usar las propiedades "width" y "height" de CSS,

51
00:02:42,168 --> 00:02:44,649
en lugar de los atributos "width" y "height".

52
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",

53
00:02:52,542 --> 00:02:55,415
borrando el atributo,

54
00:02:55,415 --> 00:03:00,396
y arriba en la regla de estilo, escribo: "#cute-cat {"

55
00:03:00,396 --> 00:03:03,128
"width: 120px;"

56
00:03:03,585 --> 00:03:06,328
Igual que antes con los atributos,

57
00:03:06,328 --> 00:03:09,027
es mejor sólo especificar el ancho o el alto,

58
00:03:09,027 --> 00:03:12,548
y dejar que el navegador ajuste la otra dimensión con el valor más adecuado.

59
00:03:12,618 --> 00:03:14,679
De lo contrario, ¡vamos a tener un gatito aplastado!

60
00:03:14,743 --> 00:03:18,547
Bueno, ok, eso suena asombroso, vamos a tratar de hacerlo por un momento:

61
00:03:18,547 --> 00:03:19,781
"height: 40px;"

62
00:03:19,781 --> 00:03:21,726
Ajá, ¡gatito aplastado, yay!

63
00:03:22,059 --> 00:03:25,003
Ok, ok. No me pude resistir.

64
00:03:25,077 --> 00:03:28,793
Seré una desarrolladora responsable y voy a borrar eso ahora.

65
00:03:29,009 --> 00:03:30,689
Entre más conocimiento se tiene,

66
00:03:30,689 --> 00:03:33,077
es necesario asumir mayor responsabilidad.

67
00:03:33,238 --> 00:03:36,070
No sólo porque puedas poner barras de desplazamiento en todos lados,

68
00:03:36,070 --> 00:03:39,400
y aplastar gatitos, significa que debas hacerlo.

69
00:03:39,497 --> 00:03:42,578
Debido a que generalmente hacemos páginas web para que otras personas las usen,

70
00:03:42,578 --> 00:03:47,338
lo que pienses que es divertido podría ser muy difícil de usar para otros.

71
00:03:47,583 --> 00:03:52,853
Pero si haces algunas cosas divertidas aquí en Khan Academy, entonces no importa.