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