-
¿Ya sabes cómo hicimos algo que
-
se ve como un cuadro o caja, en nuestra pasada guía paso a paso,
-
usando y luego
-
poniendo un color de fondo?
-
Bueno, en realidad, cada elemento en tu
-
página web es considerada una caja por el navegador,
-
sea que a ti te parezca o no que se ve como una caja.
-
Este encabezado es una caja,
-
este párrafo es un caja, incluso este
-
que pusimos aquí es una caja. Algunas de las cajas
-
son grandes, algunas son pequeñas, algunas son una línea
-
como este , algunas son bloques, como .
-
Pero todas son consideradas cajas.
-
¿Por qué es importante? Porque hay algo
-
llamado "Modelo de caja", el cual puedes
-
ver en el diagrama que acabo de pegar.
-
Cada caja tiene cuarto partes:
-
el contenido real, el relleno,
-
el borde y el margen. Podemos usar CSS
-
para modificar el relleno, el borde y el margen.
-
Así que pronto entenderás qué es
-
todo esto en realidad. Empecemos con el margen.
-
Es el área transparente al rededor de la caja
-
que separa la caja de otros elementos.
-
Especificaremos el margen usando nuestra
-
unidad favorita: pixeles. Para agregar 15 pixeles
-
al margen en cada lado de la caja de
-
Información Oficial, sólo escribimos: "margin: 15px;".
-
¿Vieron el cambio?
-
¿Qué pasa si queremos una cantidad diferente
-
de margen en cada uno de los lados? ¿Algo más grande
-
arriba y abajo que en los lados? Podemos
-
escribir esas cantidades en el orden de las manecillas de reloj,
-
empezando por la parte de arriba. Entonces arriba 15px, derecha 0px,
-
abajo 10px, izquierda 6px.
-
O podemos usar propiedades específicas para cada lado,
-
pero sólo queremos especificar pocos lados.
-
Sólo queremos poner espacio alrededor de la fotografía del gato,
-
del lado derecho, y luego,
-
también ponemos algo de espacio en la parte de abajo...
-
y está bien si dejamos el margen por defecto en los
-
lados restantes. También hay un valor
-
especial para el margen que nos va a ayudar a hacer
-
cosas extraordinarias en nuestras páginas. Para mostrar eso,
-
voy a poner un "" alrededor de toda la página.
-
y le voy a asignar el ID "container."
-
Voy a poner esta etiqueta aquí abajo para que contenga todo.
-
Ahora, voy a añadir una regla a este ""
-
para que tenga una anchura de 400 pixeles
-
y lo voy a centrar en la página.
-
Voy a especificar un margen izquierdo de "margin-left: 100px;",
-
porque así yo lo veo centrado,
-
pero tal vez tú no lo veas centrado, porque
-
tu navegador puede ser más grande o más pequeño.
-
Lo que queremos es poder decir, "dale el margen
-
que sea necesario para que los dos lados
-
queden del mismo tamaño."
-
Esto es exactamente lo que hace "margin: auto;".
-
Y es una manera genial de centrar "´s" en una página.
-
Ahora que hemos centrado ese "",
-
probablemente queremos modificar esto
-
añadiendo un borde alrededor de la orilla
-
usando las propiedades de bordes de CSS.
-
Vamos a añadir un borde rojo a este "".
-
Tecleamos "border:" y luego tenemos que
-
especificar tres aspectos del borde:
-
grosor, estilo y color. Para un borde
-
delgado, sólo debo teclear "1px,", para una
-
línea sólida nada extraordinaria, teclearemos
-
"solid", y... para que sea roja
-
voy a hacer que aparezca el selector de color RGB y
-
seleccionar un bonito, rojo fuego. Ok. Igual que con
-
el margen, podemos especificar el borde
-
para sólo uno de los lados. Si queremos un
-
borde morado y grueso en la parte superior,
-
añadiremos otra propiedad: "border-top: 10px solid purple;"
-
¡Genial! Ahora vamos a añadir
-
un marco a la imagen, y vamos a jugar con
-
los estilos de bordes. Así que vamos arriba
-
a nuestro "cute-cat", y vamos a ver... "border: 6px,"
-
vamos a probar con "groove red". Ok.
-
No, no me gusta "groove", vamos a probar con "double",
-
vamos a probar con "ridge". ¡Ajá! Ahora eso se ve como
-
un marco. Ahora, ¿qué pasa con el borde que tenemos al rededor de
-
nuestra Información Oficial? Vamos a ver, "border:",
-
no lo vamos a hacer muy grande, "2px",
-
vamos a probar "dotted" y luego, déjenme seleccionar...
-
un gris delicado, déjenme probar
-
con "dashed". Ok, esto es lo que quiero.
-
Ahora con todos estos bordes,
-
hay algo que me molesta un poco.
-
En realidad, hay algo que me molesta mucho.
-
¿Ven cómo el texto se está encimando en el borde de "container"?
-
Y también ¿ven cómo se encima el texto de la Información Oficial?
-
Eso se ve grotesco,
-
y el texto se vuelve difícil de leer.
-
Ahí es donde usamos el relleno (padding). Siempre que
-
tus elementos tengan colores de fondo o
-
bordes, querrás añadir relleno
-
para poner un espacio entre
-
el contenido y las orillas. Vamos a añadir
-
relleno ("padding") en "container", vamos a poner
-
15 pixeles alrededor de "container".
-
Mucho mejor. Vamos a poner relleno
-
en "official-info", veamos:
-
"padding: 6px,", oh, hermoso.
-
Ahora, no necesitamos añadir relleno a la imagen,
-
porque las imágenes en realidad se ven bien
-
dentro de marcos como éste.
-
Y aquí lo tienen: el Modelo de Caja.
-
Margen, borde y relleno. Usé valores grandes y
-
colores brillantes para que lo pudieran apreciar,
-
pero mi página se ve un poco cursi.
-
Si quieres que tu página luzca pulcra y sofisticada
-
prueba usando blancos y grises más sutiles.
-
Y hagas lo que hagas,
-
asegúrate de usar esas propiedades, porque
-
eso tendrá grandes efectos en tu página, cómo
-
se ve y se siente.
