Cuando usamos "´s", con frecuencia es porque queremos dividir nuestra página
en varios cuadros, cambiar el tamaño de esos cuadros y moverlos.
Se necesita un buen ojo para decidir cómo diseñar una página exactamente,
para que se vea bien.
Pero ahora, vamos a ignorar el objetivo de que una página se vea bien
y sólo vamos a mostrar cómo cambiar las cosas.
Vamos a cambiar el tamaño del bloque "official-info".
Por defecto, un etiqueta "" ocupa el 100 por ciento del espacio disponible a lo ancho.
Es por eso que vemos que el cuadro gris se extiende a lo ancho de toda la pantalla.
Pero tal vez sólo quiero que ocupe 300 pixeles.
Bueno, voy a agregar otra propiedad a la regla CSS que está aquí arriba:
"width: 300px;".
Eso funciona, pero vamos a hacer algo más interesante.
Vamos a usar un porcentaje de anchura,
y digamos que el bloque definido con "" siempre va a ocupar el 70 por ciento de la anchura disponible.
Ahora el texto está limitado a este cuadro más pequeño,
y lo que está en "" se hizo más alto.
Si queremos, en realidad también podemos limitar la altura del cuadro,
con la propiedad "height",
"height: 180px;".
Mmm, ok. Sucedió algo curioso.
El cuadro gris cambió su tamaño a 180 pixeles,
pero el texto se desborda fuera del cuadro gris.
¿Por qué pasa eso?
Es por una propiedad que llamamos "overflow".
El valor predeterminado para "overflow" es "visible",
lo que significa que el elemento cambia de tamaño pero el contenido se desborda por fuera,
lo que se ve un poco raro.
¿Qué otras opciones tenemos para la propiedad "overflow"?
Bueno, podemos probar con "hidden".
Esto reduce el contenido desbordado, lo recorta en el borde.
Eso no es lo que queremos, porque sino los
usuarios no podrán leer la asombrosa información oficial.
Podríamos probar con "auto",
que le dice al navegador que agregue barras de desplazamiento, si el contenido se desborda.
Ahora puedo desplazarme dentro del cuadro para ver todo el texto.
Si queremos podemos ser aún más específicos:
podemos especificar diferentes propiedades de desbordamiento para cada dirección.
Por ejemplo, si queremos
un desbordamiento con barras de desplazamiento en la dirección "y", hacia arriba y hacia abajo,
sólo escribimos: "overflow-y: auto;",
pero luego si queremos recortar el contenido en la dirección "x",
podemos decir: "overflow-x: hidden;".
Sean cuidadosos cuando usen "overflow",
porque las barras de desplazamiento pueden se molestas para los usuarios.
Especialmente las barras de desplazamiento sin barras de desplazamiento...
evítenlas si pueden.
Ahora, regresando al "width/height" (ancho y alto), en realidad podemos usar "width" y "height"
para todo tipo de elementos, como nuestras imágenes.
Ahora que ya conoces CSS, puedes usar las propiedades "width" y "height" de CSS,
en lugar de los atributos "width" y "height".
Déjenme hacer esta imagen del gato un poco más grande, definiendo un id: "cute-cat",
borrando el atributo,
y arriba en la regla de estilo, escribo: "#cute-cat {"
"width: 120px;"
Igual que antes con los atributos,
es mejor sólo especificar el ancho o el alto,
y dejar que el navegador ajuste la otra dimensión con el valor más adecuado.
De lo contrario, ¡vamos a tener un gatito aplastado!
Bueno, ok, eso suena asombroso, vamos a tratar de hacerlo por un momento:
"height: 40px;"
Ajá, ¡gatito aplastado, yay!
Ok, ok. No me pude resistir.
Seré una desarrolladora responsable y voy a borrar eso ahora.
Entre más conocimiento se tiene,
es necesario asumir mayor responsabilidad.
No sólo porque puedas poner barras de desplazamiento en todos lados,
y aplastar gatitos, significa que debas hacerlo.
Debido a que generalmente hacemos páginas web para que otras personas las usen,
lo que pienses que es divertido podría ser muy difícil de usar para otros.
Pero si haces algunas cosas divertidas aquí en Khan Academy, entonces no importa.