CSS: Diseño de página

(música animada) Bienvenido al curso de KnowledgeCity en hojas de estilo en cascada intermedias. Mi nombre es Cliff Brozo. Soy tu profesor y hoy vamos a explorar el diseño de páginas con hojas de estilo en cascada. Veremos cómo hacer algunos títulos pegajosos. Descubriremos cómo crear una barra de navegación. Hablaremos de diferentes áreas de la página, la ventana de contenido, los apartes, la ventana principal, los pies de página, los encabezados. Pon todas esas cosas en la página juntas. Hablaremos de artículos y veremos cómo formatear toda la página para que luzca lo mejor posible. Empecemos. Lo primero que debemos señalar es que vamos a utilizar un software llamado Atom, ATOM, y puedes encontrarlo y descárguelo en atom.io. La razón por la que usamos Atom es que realmente no importa si tienes una máquina con Windows o una máquina Apple, Atom funciona tanto en y nos va a permitir para ver el código y los resultados al mismo tiempo porque tiene una función de vista previa en vivo. Entonces, ¿qué estás mirando? es una página web que hemos creado para ilustrar las lecciones que vamos a aprender en esta sesión. Primero, hablaremos de los encabezados fijos. Y por encabezados pegajosos, nos referimos a un encabezado que no se mueve cuando se desplaza. Entonces, si me desplazo hacia abajo, el contenido de la pantalla cambiará pero el encabezado permanecerá donde se supone que debe estar. Lo que esto nos permite hacer es darle al usuario una navegación que se queda en la pagina no importa dónde estén mirando en la página. La otra cosa que acabamos de mirar es la barra de navegación y hay un montón de formas diferentes de hacer navegación. En este caso, todo lo que hicimos fue intercambiar algunos colores cuando el usuario pasa el puntero del mouse sobre ese artículo en particular. Echemos un vistazo al código. que logra esta página. El código HTML es bastante sencillo. Tengo un enlace a mi hoja de estilo que está en una carpeta CSS. Entonces empiezo con mi cuerpo y creo una sección de encabezado que contiene una división que gobierna como la cabecera pegajosa va a mirar y creo una clase llamada stick_top. Y también gobierna la sección de navegación. Entonces stick_top es algo que declaramos dentro de nuestro programa CSS y lo veremos en un segundo. Pero es por eso que cuando escribimos el código Sticky Headers, vemos el texto azul aquí. Podemos ver que hay algo de subrayado. Tenemos un fondo naranja. Todo eso se maneja en el archivo CSS. A medida que avanzamos en la página, llegamos a nuestra sección PRINCIPAL y la sección MAIN contiene todos del contenido que vamos a poner en la pagina. Y una vez más, declaro una clase en CSS llamado main_content que está formateando esta área en particular. Empiezo con un H1. Eso solo pone un título en la página, seguido de un párrafo de texto que con suerte sea algo interesante de leer. Luego creo algo llamado aparte y si nunca has usado los apartes antes, son una forma agradable para llamar su atención sobre un área de la pantalla. Ahora, he formateado esto a un lado para incluir una bonita barra verde que tiene un desvanecimiento. He puesto el texto en cursiva y he configurado el ancho, y de nuevo, veremos cómo se hace en el código CSS. Luego sigo con mi tema y hablar de otro párrafo y luego llego a algo llamado artículo donde se muestra el texto en un área con formato especial. En este caso, estoy mirando las puntuaciones de béisbol. La información que se encuentra al final de este artículo es solo una serie de H1 y H2 y lo que ves aquí es el Unicode para imprimir un poco de béisbol. Seguimos bajando la pagina y llegamos a la sección de pie de página. En la sección de pie de página, he enviado un correo a la información. que se cierne de la misma manera que hacen las barras de navegación y en este caso particular, He usado Unicode una vez más. La primera vez para conseguir un sobre poco rápido. Y sé que los sobres no son la moda del correo electrónico pero la idea es que estemos enviando algún tipo de correo. Y luego pongo otro enlace para un teléfono y sí, he usado el & phone, que tiene una función Unicode nombrada que me da un telefono negro que una vez más cambiará a blanco. Finalmente, he incluido un aviso de derechos de autor con el © y llevaré la pequeña c allí. Y cierro mis etiquetas HTML en el mismo orden en que estaban abiertos. Así que echemos un vistazo al CSS que acompaña a esta página en particular. Lo que he hecho por ti es que he puesto comentarios en casi todas las líneas de CSS para que sepa lo que hace la línea. Primero que nada, estoy configurando la codificación y el formato de tres etiquetas HTML básicas, la etiqueta del cuerpo, que comienza en la línea uno, la navegación, que comienza en la línea seis y la regla horizontal, que comienza en la línea 12. Para el cuerpo, estoy poniendo todo el cuerpo a una fuente algo caprichosa y si por alguna razón Comic Sans MS no está disponible en la PC del usuario, Tomaré cualquier fuente sans serif y de nuevo, aprendimos sobre las serifas hace mucho en la lección para principiantes. Estoy usando MidnightBlue como color y me gusta usar colores con nombre siempre que puedo. Si es un número hexadecimal, la gente entonces tiene que buscar el color. Lo que también notarás es que me tomé el tiempo para alinear mi código y alineé todos mis dos puntos donde pudiera hacerlos lucir bonitos y limpios. En el cuerpo, todo lo que necesitaba hacer alinear estos es espacio para que mis dos puntos estén alineados y luego espaciar un poco más para que mis puntos y comas estén alineados. El punto de hacer esto es que cuando el código no funciona, y puede haber ocasiones en las que haya cometido un error en alguna parte en el camino y tu código no corre de la manera que esperas, es mucho más fácil solucionar el problema cuando estás viendo un código bien formateado. Y si puedes mantener todos tus dos puntos alineados y puede mantener alineados todos los puntos y comas, serás una persona mucho más feliz.