CSS: Diseño con grid

Name: CSS: Diseño con grid
Author: Cliff Brozo

En este curso, examinará el diseño y la disposición de la cuadrícula, tomará código complicado y lo convertirá en algo que tenga sentido visualmente, para…

Preview the first lesson free — get full access to all 4 lessons.

Solicitar una demo Iniciar sesión

Curso: bajo demanda

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

Intermedio Proveedor : Cliff Brozo 4 lecciones · 23m en Árabe, Alemán, Inglés, Español, Francés, Portugués, Chinese

Descripción del curso

En este curso, examinará el diseño y la disposición de la cuadrícula, tomará código complicado y lo convertirá en algo que tenga sentido visualmente, para comprender mejor lo que está haciendo. Tendrá la oportunidad de manipular el diseño de la cuadrícula, aprender a usar contenedores y determinar qué elementos colocar en qué área de la cuadrícula que ha creado. El diseño de cuadrícula es una parte importante de CSS y una herramienta esencial para dar vida a sus sitios web.

Lo que aprenderás

Diseñar un diseño de grid en CSS
Explorar las herramientas disponibles para el diseño de grid
Usar contenedores para estructurar diseños de grid
Determinar qué elementos colocar en cada área del grid
Crear menús atractivos con CSS Grid
Estilizar artículos y asides dentro de un grid

Puntos clave

El curso convierte código grid complicado en algo que tenga sentido visual para que los estudiantes entiendan mejor lo que están haciendo.
Los estudiantes practican manipular el diseño de grid y usar contenedores para organizar contenido.
El diseño de grid se presenta como una parte importante de CSS y una herramienta esencial para dar vida a sitios web.
El curso cubre colocar elementos en áreas específicas de un grid y estilizar elementos tales como menús, artículos y asides.

Preguntas frecuentes

¿Qué aprenderé en este curso?

Examinarás el diseño y diseño de grid, manipularás el diseño de grid, aprenderás cómo usar contenedores y determinarás qué elementos poner en qué área del grid. Los objetivos incluyen diseñar un grid en CSS, explorar herramientas para el diseño de grid, crear menús atractivos y estilizar artículos y asides.

¿Cómo está estructurado el curso?

El curso está organizado en cuatro lecciones: Grid Design Part 1, Grid Design Part 2, Grid Design Part 3 y Grid Design Part 4.

¿Qué habilidades cubre este curso?

Cubre Códigos CSS, Marcos CSS, CSS Grid, Sistema de Grid, Diseño de Grid y CSS Orientado a Objetos.

¿Por qué es importante aprender el diseño de grid?

El diseño de grid es una parte importante de CSS y una herramienta esencial para dar vida a tus sitios web.