Share
Bienvenido a la sexta lección de nuestra serie Diseño web para niños, Diseño de CSS!
Aquí es donde colocamos todos nuestros elementos exactamente donde los queremos en la pantalla. Vamos a agregar a nuestros archivos HTML y CSS para hacerlo.
Para recordarte, echa un vistazo al sitio web que estamos construyendo. Los archivos para este curso se pueden descargar aquí y no olvide hacer cualquier pregunta que tenga en la sección de comentarios al final de esta página..
Hay algunas cosas que necesitamos saber antes de saltar directamente a diseño. En esta primera sección veremos cómo estar organizados. Cubriremos algunos conceptos básicos de posicionamiento y hablaremos sobre qué tipo de CSS propiedades se utilizan para el diseño.
Mantener un documento CSS organizado es muy importante. La organización adecuada nos facilitará la búsqueda de todas las piezas dentro de nuestro archivo, lo que facilitará el cambio y la adición de elementos más adelante. En general, lo mejor es pedir nuestro CSS. declaraciones En el orden que tengan lugar en la página..
Estaremos agregando estilos en esta lección a principal, por ejemplo. Este estilo agregado en un elemento tan importante debe incluirse en nuestro documento CSS antes de Cualquier otro elemento que esté anidado dentro. principal.
Los elementos HTML son un poco como cajas rectangulares. los Modelo de caja CSS Describe el espaciado de estas cajas..
Cada caja tiene cuatro lados. Podemos aplicar un valor a los cuatro lados a la vez en nuestro CSS a través de relleno, frontera, y / o margen. Sin embargo, si queremos estilizar un lado de un elemento, también podemos hacerlo. Por ejemplo:
relleno-izquierda: 20px; borde: 4px sólido # 205D76;
Digamos que este cuadro rosa representa texto. Podemos ver que se ha añadido el relleno. solamente A la izquierda y un borde azul grueso cubre. todos cuatro lados del contenido.
CSS nos brinda un conjunto de propiedades hechas especialmente para ayudarnos con el diseño de nuestro sitio web. Así que mientras el modelo de caja ayuda a explicar la espaciado alrededor de elementos HTML, flexbox nos permitirá movimiento estos elementos en su lugar.
Cuando usamos flexbox en un elemento contenedor, este elemento se convierte en un contenedor flexible y todos los elementos dentro de ella se convierten elementos de flexión.
Cuando aplicamos flexbox a un contenedor, automáticamente colocará los elementos a lo largo de una línea recta (horizontalmente) y luego podremos entrar en más detalles con otras propiedades de flexbox..
No necesitaremos utilizar flexbox demasiado para nuestro sitio web, pero es importante pensar en flexbox ya que se considera la forma más moderna y adecuada de colocar pequeños fragmentos de contenido en un sitio web..
los h1 y la imagen de la ciudad dentro de la encabezamiento Están centrados en la página. Hay varias formas diferentes de centrar algo con CSS, pero por ahora usaremos text-align: center; sobre el encabezamiento.
Señalaremos el encabezado utilizando su nombre de clase que agregamos anteriormente:
.primary-header text-align: center;
No te olvides! Guarde los documentos y actualice el navegador para ver nuestros cambios a medida que los hacemos.!
Lo primero que querremos hacer con nuestras secciones es hacer que el contenido, la imagen y la lista, dentro de cada sección se sientan uno al lado del otro en lugar de apilarlos..
Para lograrlo utilizaremos flexbox. Flexbox se aplica a los elementos dentro de un elemento contenedor mediante el uso de pantalla: flexión; en el contenedor:
.sección de tienda display: flex; pantalla: -webkit-flex; / * Este es un prefijo de vendedor! * /
Para devolver esto a lo que hablamos antes, la imagen y div que contiene la lista de la tienda son ahora elementos de flexión, porque están dentro de esto contenedor flexible.
Si bien hay muchas opciones para especificar exactamente dónde debe ir un elemento, el comportamiento predeterminado de flexbox aquí funciona perfectamente para nosotros, y nuestra lista de tiendas ahora se encuentra a la derecha de la imagen de la tienda..
Dado que Flexbox es bastante nuevo, no todos los navegadores han tenido la oportunidad de incluirlo correctamente. Para solucionar esto podemos incluir un prefijo de proveedor a las propiedades de flexbox, agregando este soporte faltante por el momento. Aunque solo estamos enfocados en las versiones más recientes de los navegadores modernos para este proyecto, todavía necesitaremos incluir un -webkit- prefijo del proveedor para flexbox para asegurarse de que funciona en "Safari".
Podríamos usar un poco de espacio entre la imagen y el elemento que contiene todo el texto, así que en nuestro HTML, agreguemos una clase de detalles de la tienda al div conteniendo el texto.
Después de guardar esto, podemos saltar a nuestro CSS y agregar este espacio, pero solo al izquierda de la div:
.detalles de la tienda margin-left: 30px;
Hay un espacio a la izquierda de las listas desordenadas de nuestra tienda. Esto es porque hay algunos estilo predeterminado que viene junto con el uso de una lista HTML. A veces, este estilo predeterminado está bien, y otras veces puede que no produzca el efecto que estamos buscando..
Podemos deshacernos de este espaciado de lista predeterminado usando relleno: 0; en la lista desordenada, pero eso causaría que nuestros puntos de bala vayan demasiado hacia la izquierda en comparación con el encabezado de nuestra lista.
Queremos un poco de relleno aquí, pero no tanto como lo proporciona el estilo predeterminado de la lista. Configuración de un relleno izquierdo de 15px en la lista alinearemos nuestros puntos con el encabezado bastante bien, por lo que agregaremos esto además de las cosas que agregamos a la lista en la lección anterior:
.store-list padding-left: 15px; / * estilo recientemente añadido * / color: # FFC122;
Todavía tenemos el tema que mencionamos en la lección anterior con los elementos de la lista demasiado juntos. Para resolver esto vamos a agregar una clase de nombre de la tienda a todos los elementos de la lista, , en nuestro HTML. Luego agregaremos un pequeño margen a la fondo de estos articulos.
.nombre de tienda margin-bottom: 10px;
El espacio debe agregarse a las secciones, así como centrarlas en la página. Haremos esto a través del margen y anchura propiedades.
De nuevo, estaremos agregando al estilo que ya hemos escrito:
.sección de tienda display: flex; pantalla: -webkit-flex; margen: 50px auto; ancho: 450px;
los 50px valor dentro de margen Aquí está aplicando esa cantidad de espacio en el parte superior de cada sección de tienda. Siguiendo esto con auto le dice al navegador que considere el ancho del elemento (que configuramos para 450px) y centrarlo dentro de la ventana del navegador automáticamente.
Para nuestro pie de página Centraremos el texto y añadiremos una pequeña cantidad de relleno para asegurarse de que este texto no esté demasiado cerca de los bordes del pie de página.
.Primary-footer padding: 2px; text-align: center; color de fondo: # FFC122;
Nosotros hablamos acerca de estilo predeterminado un poco cuando estábamos poniendo nuestras listas en su lugar. los cuerpo El elemento viene con sus propios estilos por defecto, uno de los cuales es un margen Que rodea toda la página. Si bien a veces esto no es un problema, podemos ver que está evitando la color de fondo de nuestro pie de página de estirarse completamente a los lados de la ventana del navegador.
La solución aquí es volver al cuerpo en nuestro documento CSS y agregar lo siguiente:
cuerpo margen: 0;
En este curso tenemos todos nuestros elementos en su lugar con técnicas de diseño CSS. Si bien suele haber varias formas diferentes de lograr un diseño específico, sentirse más cómodo con el modelo de caja CSS y flexbox proporciona una comprensión muy sólida de estos diferentes enfoques..
Ya que nuestro sitio está completo (¡felicidades!) Hablaremos todo sobre diseño, tipografía, y color En las lecciones a seguir. Esto te ayudará a convertirte en un diseñador web bien informado y completo..
Te veo por la ciudad!
Accentsconagua