Hoy vamos a hablar de estilos de enlaces y listas de estilos. Cuando llega el momento de diseñar los enlaces en su página, es muy importante que recuerde que los enlaces son lo que componen un sitio web. Es esa interconectividad la que ayuda a la gente a adquirir conocimiento. Es lo que ayuda a los motores de búsqueda a vincular tu texto y contenido con el texto y contenido de otra persona. Así que, hoy vamos a hablar específicamente sobre enlaces porque quiero que pienses en cómo estás peinando. En general, cuando vas a diseñar un enlace, puedes usar todos los mismos atributos diferentes que has estado usando para todo lo demás. Tus encabezados, tus párrafos, cosas así. Sin embargo, los enlaces tienen una propiedad adicional especial llamada text-decoration. Así que en este ejemplo de aquí, lo que tengo es que en lugar de tener mis enlaces en línea, lo que significa que van uno al lado del otro , voy a decir, oye, quiero que mis enlaces estén separados, uno encima del otro. Así que, con suerte, la mayoría de este código te parece familiar. Tienes la idea de que la pantalla es un bloque, que va a ir uno debajo del otro. El peso de la fuente, quiero que sea un poco audaz. He establecido un nuevo color y un nuevo color de fondo. Ahora he establecido un ancho, y, si intenta establecer un ancho y no funciona, solo recuerde, los enlaces por defecto están en línea y no toman un ancho a menos que los cambie a bloque o bloque en línea. También voy a alinear el texto, agregar algo de relleno, y esta decoración de texto, ninguna, esto es nuevo. Esto dice, oye, quiero deshacerme de ese subrayado que normalmente aparece debajo de los enlaces. Así que he pasado de esto aquí arriba en la esquina superior a algo que un poco más de estilo aquí abajo en la parte inferior. De hecho, casi ni siquiera parece un enlace en absoluto. Así que hablemos de eso. A veces, al instalar sus enlaces, la gente realmente intenta hacer que se parezca mucho más a botones. Y queremos evitarlo porque queremos ser semánticos. Si desea un botón, utilice un elemento button en su lugar. Y puedes hacerlo de manera muy simple simplemente poniendo la etiqueta del botón en lugar de la etiqueta de anclaje. Y de nuevo, de la misma manera puedes peinarlo de muchas maneras diferentes. Pero lo que quiero que entiendas es que hay tantas cosas diferentes que puedes hacer con enlaces y tanto estilo que puedes hacer con ellos, asegúrate de que la gente entienda que es un enlace que están viendo. O bien, si están usando un lector de pantalla, es un enlace del que están escuchando. Por lo tanto, otra cosa nueva acerca de los enlaces, que no hemos visto antes, es esta idea de que los enlaces tienen estados. ¿ Alguna vez has notado que, cuando vas a una página web, a veces algunos de los enlaces son azules, y algunos de ellos son morados? Y, te das cuenta, después de un poco, los que son morados, están ahí porque los has visitado antes. Entonces, lo que tenemos, es que tenemos estos diferentes estados. Y voy a repasarlas muy rápido y más tarde, cuando hablemos de lo que se llaman pseudoclases, hablaremos de ellas aún más. Pero rápidamente, una a con este enlace de dos puntos justo aquí simplemente dice que esto es solo un enlace normal, lo has visto antes, a ; visitado dice que aquí hay un enlace y mi navegador me dice. Sabe que he hecho clic en él antes. Por defecto del navegador, será de un color diferente. También tenemos un enlace con la actividad de desplazamiento sobre él. Así que probablemente lo hayas visto cuando sostienes el ratón sobre algo, como si estuviera sosteniendo el bolígrafo por aquí. Es que va a hacer algo loco. Tal vez cambie el color o cosas diferentes como esas. Así que el cursor se activa manteniendo pulsado el ratón sobre un enlace. ¿ Qué tipo de surge una interesante pregunta de si esto funciona en pantallas táctiles? Cuando desarrolle su página, debe recordar que el cursor no funcionará necesariamente si la gente está accediendo a ella desde un teléfono o una tableta o algo así. Lo que me lleva a otro estado llamado enfoque. Así que el estado de enfoque es lo que sucede cuando alguien está tabulando a través de su página. A medida que golpean pestaña, va a saltar de elemento a elemento. Y cuando llegue a este enlace en particular, sabrá que estoy enfocado, así que si quieres hacer algo diferente, tal vez lo mismo que haces cuando la gente pasa, así es como puedes desencadenar esa actividad. Vale, y el último es el que realmente creo que es el más raro de todos, tal vez incluso lo llamaría tonto, pero no creé Internet y HTML y respeto, pero es muy raro, porque lo que dice es hey, este es el enlace tal como estoy haciendo clic en él. Y la razón por la que creo que es raro es porque para la mayoría de nosotros, cuando hacemos clic en un enlace, vamos a una nueva página, así que ni siquiera vamos a ver qué estilo pasó. ¿ Todo bien? Vamos a hablar de cómo lo hacemos. Pero antes de hacerlo, una vez más volvemos a esta idea de precedencia. Las hojas de estilo en cascada son muy grandes en esto. Si decide que desea utilizar estos diferentes estados, hay un par de reglas que debe recordar al escribir sus hojas de estilo. Uno, si va a usar un:hover, debe venir después de un:link. Y a continuación, un:visitado y a:activo deben venir después de un:hover. Así que es sólo esta jerarquía la que está pasando mientras recubre sus páginas. Así que veamos un ejemplo ahora de algún código y cómo estoy diseñando mis enlaces. En este ejemplo, lo que tengo aquí es que solo tengo tres enlaces que no he diseñado de ninguna manera. Tengo un enlace a la introducción al diseño web, un enlace a la Universidad de Michigan, y un enlace a la Universidad Estatal de Kent, que es donde hice mi licenciatura. Pero, ¿qué sucede cuando sigo adelante y agrego algo de CSS a él? Aquí arriba tengo todas las cosas típicas de las que hemos estado hablando antes, el ancho y el color. He añadido la decoración del texto, y lo que también quería agregar es esta idea de margen donde puedo centrar cada uno de mis enlaces uno encima del otro con un poco de espacio entre ellos. Muy bien, así que vamos a echar un vistazo a lo que parece y pueden ver que tengo cada enlace se ve muy diferente, de acuerdo. Y se puede ver cuando veo mi pluma, cuando pase el cursor sobre cada uno de estos, lo que sucede es que el color cambia. Cómo conseguí que eso funcionara está justo aquí. Cada vez que mi enlace pasa a un estado de desplazamiento, sabe cambiar el color de fondo y el color de la fuente. Vale, bueno, ¿qué es un enfoque, y lo que tengo aquí abajo un poco, a: activo? Lo que está pasando aquí es que he puesto en el a:focus para aquellas personas que están pasando por mi página. Así que a medida que me ves pestaña, se puede ver Introducción al diseño web entra en foco, y luego la Universidad de Michigan, y luego Kent State, y lo estoy haciendo tabulando a través de la página. La última regla, la regla activa, es algo que voy a mostrarte y luego romper de ahí. Cómo funciona el activo es que cuando realmente estás haciendo clic en una página, va a agregar un borde alrededor de ese enlace. Ahora, lo extraño es que tan pronto como termine de hacer clic vamos a ir a una nueva página. Así que se rompe, realmente no puedes ver esa frontera a menos que la sostenga muy deliberadamente, así como así. Por lo tanto, en este ejemplo traté de mostrarle las dos formas diferentes de aplicar estilos a los vínculos. Ahora sigamos y pensemos en esto con un poco más de detalle. Cuando diseñas estos enlaces, una vez más no puedo enfatizar lo suficiente la importancia de la accesibilidad, queremos asegurarnos de que tus enlaces sean enlaces y que la gente sepa que están allí. Una vez que haya terminado de jugar con enlaces, sigamos adelante y empecemos a pensar en diseñar elementos de lista. Al aplicar estilos a las listas, el tipo de propiedades predeterminadas todas tienen el mismo aspecto. Tienes el uno, dos, tres o el círculo, círculo, círculo, círculo, pero podemos cambiar todo eso, podemos cambiar cosas más allá de la fuente y el margen para mirar el estilo que están tomando tus listas. Así que algunas de las cosas que podemos ver son su list-style-type, su list-style-image. La posición del estilo de lista, y solo el estilo de lista en sí. El tipo de estilo de lista básicamente dice cómo desea que indique los diferentes elementos de la lista? Por defecto para las listas ordenadas de nuevo, tenemos el uno, dos, tres, pero puede dar diferentes valores. Puedes decir que quiero que sea un número romano inferior, un número romano superior, un número alfa inferior, puedes jugar con estos para obtener la sensación que quieras. Así que en este caso hemos pasado de 1 y 2 a A y B. Y si en lugar de eso hubiera hecho alfa inferior, habríamos tenido minúsculas a y minúsculas b. Cuando haces list-style-type para listas desordenadas, típicamente lo que tienes, y depende de tu navegador, es el pequeño círculo o el pequeño disco. Podemos cambiar eso, y podemos poner exactamente lo que quieres asegurarnos de que va a ser. Otra opción con la que puedes jugar es esta idea de deshacerse de esos marcadores predeterminados por completo, y en su lugar, usar una imagen personalizada en lugar de ese marcador tradicional. Y cuando haces esto, como que trae de nuevo a esta idea de la posición de estilo lista. Muchas veces vas a mover tu posición, dependiendo del estilo de lista que estés usando. Aquí abajo tengo un ejemplo de dónde estoy diciendo que quiero mi imagen de estilo de lista. Tengo cuadrado primero, esto dice, oye, si no puedes encontrar la foto adelante y usa cuadrado, de lo contrario quiero que uses esta foto aquí mismo. ¿ Todo bien? Así que sigamos adelante y veamos otro ejemplo. En el archivo list.html, lo que puse aquí son dos tipos diferentes de lista, una lista desordenada y una lista ordenada. Y yo los llené con información diferente. Y cuando mires esta pantalla, que voy a hacer un poco más grande para ti aquí, si puedo. Puede ver que las listas desordenadas solo usan los círculos, y las listas ordenadas usan los números predeterminados. Así que, vamos a jugar con esto ahora. Vamos a seguir adelante y poner en una hoja de estilo. En mi hoja de estilo, he entrado allí diciendo, lo que quiero hacer con mis estilos de lista es que quiero cambiarlo a romano superior y numeral y también usar un cuadrado en su lugar. Así que esto es lo que parecía antes, y así es como nos vemos después. Así que, puedes ver, sólo hay un poco más de algo en él. Además, esta es una forma muy sencilla de cambiar tu página de la forma en que otras personas suelen hacer su página. Otra opción que solo quería mostrarte, porque a todos les gusta esto, es esa idea de usar la imagen de estilo de lista. Así que, voy a bajar aquí y descomentar este código. Y si recuerdas, si has estado prestando atención a esta idea de que cuando tengas prioridad esta nueva regla aquí abajo va a sobrescribir todas las reglas encima de ella. Así que vamos a seguir adelante y asegurarnos de que he guardado mi página, y vamos a seguir adelante y recargar. Y ahora, en este caso, lo que ha pasado es que hemos quitado esos marcadores regulares y he puesto mi pequeño rayo dentro. Por lo tanto, hacer cosas como esta no es difícil, pero para ser honesto, toma un poco de tiempo, especialmente si estás usando imágenes, para asegurarte de que tienes todo escrito exactamente de la misma manera. Los errores tipográficos son realmente el asesino. No es cuestión de que sea difícil, se trata de que seas muy cuidadoso cuando haces estas cosas. Bien, entonces vamos a revisar de lo que hemos estado hablando hasta ahora. Y no sólo en esta conferencia, sino en el curso hasta ahora. Y lo que quiero enfatizar es que hasta ahora, hemos estado diseñando etiquetas, y estas etiquetas siempre pueden tomar estos pares de valores de propiedad y puedes transformar tu página en algo realmente genial. Estamos a punto de entrar en algo nuevo y un poco diferente. Vamos a hablar de pseudo-clases, identificadores y selectores. Y quiero asegurarme de que estés cómodo construyendo estas diferentes reglas por tu cuenta antes de progresar. Ahora estar cómodo no significa que seas perfecto. Eso no significa que sepas hacer todo. Lo que sí significa es que tienes la confianza suficiente para salir y empezar a usar algunas de las herramientas que están ahí fuera para mejorar tu sitio. Estoy enumerando dos de ellos justo aquí sólo porque ambos son muy conocidos en el caso del sitio de Chris Pederick, o personalmente me parecieron realmente útiles. Otra opción es simplemente recordar que usted puede salir allí y usted puede hacer una búsqueda web de herramientas de desarrollador. No eres el primero, y no vas a ser la última persona en tener problemas cuando estás diseñando tu página. Mi esperanza general sería que usted realmente vaya a los foros en el curso de Coursera o en cualquier clase en la que se encuentre y pida ayuda a sus compañeros estudiantes. Porque en realidad, la única manera de aprender es practicar, practicar, tropezar con problemas, obtener ayuda y seguir adelante. A medida que haces más y más diseño web, espero que estés ganando la confianza para ayudar a hacer algo realmente genial de lo que te vas a enorgullecer. Así que quédate ahí. Gracias.