Hola a todos. Bienvenida de nuevo. Es hora de que empecemos nuestro proyecto final. Realmente espero que para cuando termines con esto, vas a tener algo de lo que te sientes orgulloso y que querrás compartir. De nuevo, nuestro objetivo es que vamos a escribir una hoja de estilo y estilo tres archivos HTML diferentes. Ahora, cuando empieces, voy a asumir que tienes la segunda asignación de pares hecha. Puedes sentirte libre de alterar eso tanto como quieras, pero necesito saber que esos cambios se han completado. Muy bien, así que déjame mostrarte nuestro antes y nuestro después para adónde vamos con este proyecto final. Así que veamos lo que hemos hecho hasta ahora en este curso. Tuvimos nuestra primera vista HTML. Nuestro próximo, lo dejamos muy claro. Nuestra tercera, donde añadimos con un estilo diferente. Y finalmente, en nuestra cuarta, puede que no se vea muy diferente en esta primera página, pero donde realmente voy a hacer que se concentren es en la página de Equipos, y en esta mesa. Usted será capaz de ver que realmente he salido y poner un montón de estilo en esta mesa. Y la razón por la que elegí tablas es porque esta será una oportunidad para entrar y usar esas pseudo clases. Usa esos pseudo elementos, usa algunos gradientes, todas esas pequeñas cosas que pueden ser un poco difíciles de lograr, pero una vez que lo hayas hecho, se ve muy bien. Así que hablemos de cada una de estas pequeñas partes. Así que una vez más, solo un pequeño recordatorio, haga una sola hoja de estilo. No quiero una hoja de estilo diferente para cada página, quieres una que cubra a todos. Y vamos a usar pseudo-elementos y pseudo-clases. Así que si parece un poco confundido con eso, no lo olvide, tenemos diapositivas que cubren esto, así como algunos de nuestros ejemplos de código juntos. Así que empecemos con la tabla porque esa es la mayor parte de la página. Como mínimo, quiero que sigas adelante y peines el estilo de la fuente, el ancho y el margen. Ahora, cuando se aplica estilo a la fuente, hay muchas opciones diferentes que se pueden ver. Puede tener diferentes familias de fuentes. Puede cambiar el tamaño, el peso y la altura de la línea. Una de las razones por las que recomiendo la altura de línea, es que cuando lo hace, es mucho más fácil centrar el texto dentro de las filas si ha hecho que la altura de la línea sea la misma que el tamaño del texto. Por su ancho, no quiero que su tabla ocupe toda la página. Quiero que ocupe en algún lugar probablemente entre el 75 y el 90%. Y una de las razones por las que quiero que hagas eso, es porque quiero que centres la mesa. Quiero que juegues con esa propiedad de margen. Y averigüe cómo puede ocupar la cantidad justa de espacio y ponerlo justo donde lo desee. A continuación vamos a ver el encabezado de la tabla. Entonces, el encabezado de la tabla se ve un poco diferente de las otras filas, y realmente tiene ese significado semántico importante. Así que al usar las etiquetas de encabezado de la tabla, vamos a ser capaces de duplicar la idea de que lo estamos diseñando de manera diferente y significa algo diferente. Así que primero, cambie el color de fondo. Una vez que lo hagas funcionar, quiero que intentes poner un color de fondo degradado. Ahora no olvides que para usar gradiente, vas a necesitar poner algunos prefijos del navegador. A continuación, agregue un borde, pero solo quiero que redondee las dos esquinas superiores, no todo, y luego también haga que el borde inferior sea más grueso. Finalmente, cuando termines con esto, sigue adelante y agrega al menos otra propiedad, algo que crees que se vería genial. Una vez que haya hecho el encabezado de la tabla, sigamos adelante y pongamos un poco de estilo para las filas de la tabla. Lo primero que quiero que hagas, y hay una razón para esto, es que quiero que establezcas la opacidad de las filas de la tabla en algún valor de aproximadamente 0.8. En algún lugar por ahí. Donde todavía se puede leer el texto, pero está un poco desvanecido. A continuación, quiero que se asegure de que la primera columna de cada fila de tabla esté alineada a la izquierda y que las otras dos estén centradas. Ahora, puede hacer este estilo dentro de los elementos de fila de la tabla, o puede estar haciéndolo dentro de los elementos de la tabla, esos TD. Realmente depende de cómo saltes y tratas de darle estilo a esto. Finalmente, quiero que sigas adelante y pongas otra pseudo-clase. Donde cuando alguien pasa el cursor sobre cualquiera de las filas, va a cambiar de una especie de desvanecimiento a un color más oscuro. Y voy a mostrarte un ejemplo de eso antes de continuar. Así que si nota en esta tabla, el texto está un poco desvanecido de ser un color de fuente negro sólido. Así que ahí es donde entra la opacidad. Ahora, cuando pase el cursor sobre cada nombre de equipo, verá que la fuente se vuelve un poco más oscura. No cambié el color de la fuente aquí, no cambié la familia de fuentes, ni el tipo, ni nada por el estilo. En cambio, lo que cambié es la opacidad para establecerlo en 1. Así que ahora cuando mi flotador se apaga, vuelve a ese tipo original de valor desvanecido. Cada uno de los elementos de la tabla puede tomar cualquier cantidad de estilo que desee darle. Pero lo que sí quiero verte hacer es que quiero verte con estilo el relleno, el color de la fuente y el color de fondo. Y quiero que establezcas el radio del borde en dos píxeles. Nunca serías capaz de ver ese tipo de diferencia indistinguible o sutil sobre la mesa. Así que quiero que lo pongas, sólo para que cuando te diga que lo hagas, te des cuenta de que hay un cambio real allí. Finalmente, esta sería una gran oportunidad para que hicieras algo que no me he cubierto. Parte de ser diseñador web es aprender a salir y buscar diferentes propiedades con las que puedas jugar. Así que te animaría a salir y mirar a la sombra de texto. Es algo que uso en mi ejemplo. Así que si realmente quieres intentar replicarlo, sigue adelante e intenta usarlo tú mismo. Una vez más, usaremos la calificación de pares para esta tarea. Y las calificaciones se basarán tanto en el nivel de finalización como en algún nivel de estética. Los estándares de codificación adecuados siempre se aplicarán, pero puede especificar su tamaño de pantalla preferido. Así que si alguien decide tomar su CSS y aplicarlo al HTML, puede hacerle saber que esto realmente se ve mejor en una pantalla grande o un dispositivo móvil pequeño. Ahora, en realidad hay muchas, muchas maneras de cambiar esta hoja de estilo alrededor. Así que no quiero que te preocupes por conseguir todos los estándares. Pero si usted decide algo un poco loco, un poco diferente, y algo que otras personas podrían no entender. Realmente recomiendo que lo pongas cerca de la parte inferior de tu hoja de estilo. Para que las personas que miran su código realmente puedan enfocarse en los requisitos reales y luego sorprenderse de sus innovaciones realmente geniales. Así que espero que esto sea algo que realmente ayude a solidificar su comprensión de CSS. Si te encuentras con problemas, deberías sentirte libre de usar los paneles de discusión y preguntarle a la gente cualquier cosa sobre la que no estés seguro. O simplemente comparte algo genial que tienes que trabajar. Buena suerte.