Hola a todos. En la revisión de código de hoy, vamos a hablar de hacer un calendario. Porque lo que realmente me gusta de los calendarios es que hay todas estas pequeñas, pequeñas cosas en las que debes pensar para hacer que tu página se vea profesional. Así que lo que tengo aquí en la pantalla es un calendario muy, muy sencillo, donde puedes ver, tengo todos los días del mes. También tengo, en algunos días, pequeñas citas. Así que voy a almorzar con mamá, o me reuniré con el decano, o seré ayudante de la biblioteca. Y, el 31, es Halloween, ¡así que boo! ¿ Qué podemos hacer para tomar esta información, este contenido de nuestro HTML5, y convertirla en algo realmente agradable? Bueno, echemos un vistazo a lo que he hecho con él. Aquí, he usado CSS para crear un calendario que tiene muchas cosas diferentes en él. Primero, he seguido adelante y lo he arreglado muy bien. He incluido cosas como el radio de la frontera, resaltado estos días justo aquí. Me doy cuenta de que es muy difícil de ver en la pantalla en este momento, pero en realidad tengo una imagen de fondo para que parezca un poco diferente. La otra cosa que he añadido es que en los días que tienen estos pequeños asteriscos, si hago clic en ellos, aparece la cita real. Como pueden ver, voy a tratar con muchos elementos CSS diferentes. Y voy a ir lentamente a través del código sólo para darte una idea de lo que está pasando. Ahora sería imposible para ti seguir conmigo con este código y saber exactamente lo que estoy haciendo. En cambio, te lo estoy dando como un recurso para elegir y entender las diferentes partes a medida que necesites y como quieras incorporarlas a tu página. Así que echemos un vistazo al CSS. Puedes ver que esta es una página muy, muy ocupada. Así que siéntate y puedes oírme hablar de las diferentes cosas en lugar de intentar leer el código. He entrado y quería hacer mi calendario con un radio de frontera muy bonito para tener algo en la parte superior. La cosa es que la mesa en sí es realmente sólo esta parte. No es la leyenda. Así que lo que he hecho es que he entrado y he dicho, no te preocupes por las dos esquinas superiores, aquí y aquí. Sólo curva las dos esquinas inferiores, está bien. ¿ Cómo puedo obtener esta idea genial de alternar entre una especie de gris claro y este color y ir y venir? Bueno, con esto, puedes seguir adelante y usar algunos de los diferentes pseudo elementos. Así que en este caso he entrado. Y no soy yo. Es el navegador diciendo, hey, voy a ver todas las diferentes filas de la tabla. Y cada vez que vea a un niño que es extraño, voy a hacerlo de un color, cada vez que vea a un niño que está parejo, voy a hacerlo de otro color. Esto es mucho más agradable que tener que entrar en su mesa y poner clase es igual a par, clase es igual a impar, clase igual a par, especialmente si más tarde decide agregar más información y arroja sus filas. Esto es algo realmente poderoso que deberías tratar de aprovechar. ¿ Qué pasa cuando intentas hacer que tu página se vea realmente profesional, los elementos que se superponen? Así que aquí mismo, en realidad estoy mirando una tabla, y una fila de tabla, y un elemento de tabla. Tuve que pasar y pensar en cada uno de estos y pensar en cosas como, hm, bueno, en mi última fila de la tabla, el último elemento de la tabla, que tiene una curva diferente a la del primer hijo. Así que adelante, descarga este código y echa un vistazo a eso y juega con él. ¿ Qué pasa si lo comentas? ¿ Qué va a pasar? Muy bien, tengo un código bastante simple para el título, seguí adelante y acabo de agregar algunos radios de borde y colores. Lo que realmente quiero mostrarte es toda esta idea de cuándo quieres esconder cosas. Volvamos al HTML. He puesto todos mis elementos dentro de una etiqueta span. Así que aquí, tengo un ayudante de biblioteca de span. Espero que estés pensando ahora mismo y diciendo, ¿por qué no aparecen cuando miro por primera vez el calendario? ¿ Por qué no está ahí? Bueno, la razón sería porque por defecto, voy a seguir adelante y ocultar todas las diferentes citas. Voy a seguir adelante y decir, visibilidad oculta. Ahora esto es diferente a mostrar ninguno. Si no tuviera ninguna exhibición, toda esta plaza se habría ido, no estaría allí. La visibilidad oculta dice, quiero dejar todo ese espacio, pero no quiero mostrar lo que hay ahí. Es una cosa muy poco matizada, y es exactamente por eso que hice este ejemplo, para que pudieras ver la diferencia. Muy bien, así que ahora está oculto. Pero tan pronto como lo hago activo, y activo significa tan pronto como haces clic en él, cambio la visibilidad de oculta a visible. Así que vamos a hacer clic en él. Y puedes ver que el almuerzo con mamá aparece. Ayudante de la biblioteca, y también aquí, en Halloween, tengo un pequeño mensaje allí. Así que había muchas cosas sucediendo con este CSS. Y no quiero ir por todas las líneas, y tú tampoco quieres que haga eso. Sería muy aburrido. Así que espero, sin embargo, que te haya mostrado algunas de las formas en que estas pseudo-clases, pseudo-elementos, los diferentes estados, están todos juntos para crear una página que puede verse mucho mejor que simplemente HTML simple por sí mismo. Así que espero que use este código y cree algo genial para usted. Buena suerte.