-
Cajas CSS Tutorial
-
Si el diseño de un sitio web que incorpora CSS en el código, lo que necesita saber sobre el modelo de caja que utiliza CSS. Cada elemento de una página web se considera una caja de un tipo u otro, y CSS le permite modificar la apariencia y configuración de las cajas de manera que HTML plano no puede igualar. El uso de CSS para editar las cajas de su sitio, puede alterar por completo la apariencia e incluso el diseño del sitio cambiando sólo unas pocas partes pequeñas del propio código.
Instrucciones
1 Crear un nuevo documento, HTML en blanco en un programa de procesamiento de textos como Bloc de notas.
2 Introduzca las etiquetas estándares necesarios para un documento HTML en el documento. Estas son las etiquetas HTML cabeza y el cuerpo, y en el orden correcto que debe ser similar al siguiente: <html> <head> </ head> <body> </ body> </ html>.
3 Añadir un número de líneas en blanco entre las etiquetas del cuerpo. Aquí es donde se va a poner el código de la caja de la prueba.
4 Crear un cuadro con el texto en él, añadiendo el siguiente código:
<Div> texto de prueba </ div>
Puede reemplazar "texto de prueba" con cualquier cosa que desee. Si abre el documento HTML en un navegador ahora, podrás ver el texto en el cuadro, pero la caja sí mismo va a ser invisible.
5 Agregue el código siguiente:
style = ""
en la etiqueta div de apertura, entre el div y el corchete de cierre. Debe tener un aspecto como este:
<Div style = ""> texto de prueba </ div>
Este atributo de estilo le permite insertar código CSS dentro de la etiqueta div HTML para afectar a la caja. Todo el resto del código que se añaden deben ir entre comillas.
6 Agregue el código siguiente:
background-color: amarillo
para el atributo de estilo. Esto cambia el color de fondo de la caja, por lo que si se abre el documento ahora, se verá su texto de prueba en una caja amarilla.
7 Añadir un punto y coma después de su código de color y añadir el código
frontera: sólido
al estilo. Esto añade un borde negro continuo alrededor de la caja, por lo que es un poco más grande. bordes del cuadro CSS siempre van en el exterior de sus cajas. También puede añadir un espacio después de la palabra "sólida" y debe incluir una medida de ancho, como 5px, o un nombre de color, o ambos, para alterar la apariencia de la frontera.
8 Añadir un punto y coma después de su código de fronteras y agregue el código
padding: 5px
al estilo. el relleno de una caja es invisible en el espacio entre los bordes de la caja y el contenido real dentro de la caja. Haciendo que el tamaño más grande de relleno hará que la propia caja más grande, ya que tiene que acomodar más espacio vacío dentro de ella en todo el texto.
9 Añadir un punto y coma después de su código de relleno y añadir el código de
margen: 20px
al estilo. El margen es similar al relleno, pero mientras que el relleno es el espacio vacío dentro de la caja, el margen es el espacio vacío alrededor de la caja. Cuanto mayor sea el margen, cuanto más lejos de todo a su alrededor la caja obtendrá.
10 Experimenta con diferentes números de sus códigos de frontera, relleno y los márgenes para ver cómo afectan a la apariencia general de la caja. Cada caja se edita automáticamente con CSS tiene estos tres componentes, así como el contenido en sí, pero si no se define su aparición en el código, que tienen un tamaño de cero y será invisible.
