CSS: Diseño con grid

(música optimista) Bienvenido de nuevo al curso de Ciudad del Conocimiento en hojas de estilo en cascada. Soy Cliff Brozo, soy tu instructor. Y hoy vamos a hablar de diseñar utilizando una grilla. Descubriremos cómo usar contenedores, jugaremos con el diseño y averiguaremos qué elementos para poner en qué área de la cuadrícula que creamos. También vamos a echar un vistazo a algunos formatos para crear páginas que tengan varias columnas. Jugaremos con un menú elegante y crearemos artículos y anexos y les aplicaremos estilo. Echemos un vistazo a cómo se verá. Crearemos una página que tiene tres columnas desiguales. Algunas de las columnas serán más pequeñas, otras más grandes pero los haremos todos diferentes. Usaremos un contenedor y dentro del contenedor, pondremos un poco de texto y algunas imágenes. Variaremos el tamaño de los contenedores y crear artículos en los apartados y haz un diseño de tres columnas. Usaremos un contenedor de cuadrícula y poner muchas imágenes en nuestra cuadrícula. ¿Estás listo? Yo soy. Vamonos. Una vez más, estamos usando Adam como nuestro software de diseño. Y aquí, vamos a mirar nuestra primera página, tratar con un contenedor. Esta línea azul que ve es el contenedor real. Y cualquier cosa que ponga aquí dentro se puede estilizar de manera diferente que el exterior del contenedor. Ahora puedes elegir poner esa línea azul o cualquier color o no tener una línea en absoluto. De modo que nadie sabe que está operando dentro del contenedor. Todo lo que realmente necesitas es configurar un área de contenido en CSS y luego invocalo en tu HTML. Entonces, en esta imagen, en el lado derecho de la pantalla, Tengo un área llamada "contenido" y el ancho del contenido es del 80% y los márgenes izquierdo y derecho se configuran automáticamente. Entonces, mi contenedor es el 80% de la página. con un 10% a la izquierda y un 10% a la derecha. Yo uso ese contenedor llamándolo en una división, digamos clase de igual contenido. Puedo cambiar el tamaño de esto y aún mantener mi ventana de contenido del 80%. Y si se vuelve grande o pequeño, el texto cambia automáticamente de tamaño correctamente. Echemos un vistazo al CSS que nos permite hacer eso. En mi contenedor CSS, mi etiqueta corporal tiene el fondo de gasa limón, algunos márgenes, el tamaño de la fuente y elegí una fuente llamada MV Boli. Mi clase de contenido establece el ancho al 80%, y lo que estas viendo aqui es lo mismo que ves en la foto que se incluye en la página web. El borde es esta línea azul de los Dodgers. Y lo que estoy haciendo para hacer es sacar esto para que pueda ver exactamente cómo se ve el contenedor con el borde que es donde está ahora y sin la frontera. Así que borraré esa línea, guardaré el CSS y tengo la página de nuevo sin el borde. Ahora, no hay una respuesta correcta o incorrecta en cuanto a si debe o no mostrar un borde. Algunas personas lo aman algunas personas no, volvamos a ponerlo y tenemos una línea azul alrededor de nuestro contenedor. He usado un radio de borde de 25 píxeles. para darme una esquina curva y puse un poco de panorámica solo para alejar el texto desde el borde de la esquina. Hemos desarrollado un sitio web que se ocupa de los contenedores. Le mostraremos cómo crear tres columnas. Echaremos un vistazo a una ciudad de New Hampshire, y otra ciudad en New Hampshire, la carretera de automóviles en New Hampshire, y luego discutiremos algunos comentarios CSS. Pasaremos a nuestro diseño de tres columnas. Y antes de hacer clic en este botón, Me gustaría señalar que los botones están estilizados. con un código CSS elegante. Echemos un vistazo a ese código. En la parte inferior de nuestra página es la sección de navegación de CSS. He creado un color de fondo para mi barra de navegación de Dodger blue. Ese es el azul que ves aquí. He ocultado los desbordamientos para evitar superposiciones en las imágenes. y he redondeado las esquinas una vez más. Mis enlaces están flotando a la izquierda. Están en el color de la gasa limón. que coincide con el fondo y ese es un buen truco para hacer. Sea cual sea el color que hagas de tu caja para la navegación, usa el color de contraste. Esa es la página de fondo. Estoy alineando el texto en el centro. Mi decoración de texto de none elimina el subrayado. Y recuerde, este es un enlace de hipertexto. Entonces quita el subrayado, y puse algo de acolchado a la izquierda y el derecho de cada palabra. Aquí está la parte elegante. Cuando coloco el cursor sobre el enlace, Estoy cambiando el color y el color de fondo cambiando de azul Dodger a gasa limón. Donde tenía el azul de los Dodgers como fondo, ahora el azul de los Dodgers es el color. La gasa de limón era el color ahora gasa de limón es el fondo y hacer el botón parece que también tiene esquinas redondeadas, Pondré un radio de borde. Cuando coloco el cursor sobre cada uno de los enlaces, el texto cambia al color de fondo y da la ilusión de un botón.