Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

CSS - Enlaces - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 22 de febrero de 2021 por Fernando M.

125 visualizaciones

Más información Transcripción

Descargar la transcripción

Bueno, ahora lo que vamos a ver es cómo hacer enlaces o cómo modificar el estilo de los enlaces, ¿vale? 00:00:00
Para dejar unos diseños más profesionales o más cuidados y aparte también vamos a ser capaces de, a partir de un enlace, convertir un enlace, mejor dicho, en un botón, pero sin la necesidad de añadir un botón como tal, ¿vale? 00:00:06
Entonces me voy a abrir... ¿Dónde está? Aquí. Vale. Entonces, yo ya tengo abierto brackets, ¿vale? Esto es el archivo anterior con el que estábamos trabajando y ahora simplemente lo que voy a hacer es, pues, como siempre, vamos a guardar este fichero, ¿vale? Vamos a darle a guardar como y lo vamos a guardar como enlaces.html, ¿vale? 00:00:26
Y yo ahora pues voy a borrar todo esto y voy a borrar todos estos estilos, eso, ¿vale? Y ahora aquí pues lo voy a titular con un nombre de estilos en enlaces con CSS y eso mismo lo voy a poner en mi cabecera H1, ¿vale? 00:00:55
Y ahora lo que vamos a hacer es crearnos tres enlaces, ¿vale? Nos vamos a crear tres enlaces. Para eso simplemente hacemos A por 3, ¿vale? Y directamente en el href de todos los campos vamos a poner una almohadilla, ¿vale? 00:01:24
Y ahora aquí vamos a poner enlace con estilos por defecto, ¿vale? Para que veamos cómo se comporta. Este de aquí va a ser un enlace con estilos personalizados, ¿vale? De hecho vamos a poner un id que va a poner enlace estilos, ¿vale? 00:01:44
Y al último lo vamos a convertir en un botón, y va a ser enlace tipo botón, ¿vale? Y en este caso le vamos a poner el atributo type, ¿vale? Y le vamos a poner button. 00:02:03
Pero fijaros que yo, aun poniendo esto, lo que me salen son tres enlaces, además unos continuados del otro, porque recuerdo que las etiquetas de enlace, las etiquetas A, son de tipo línea, ¿vale? Es decir, que van siempre unas continuadas de las otras. 00:02:17
Entonces, vamos a empezar a editar esto, ¿vale? Vamos a poner aquí un comentario, aplicar estilos a los enlaces, ¿vale? Y lo primero que vamos a hacer es aplicar un estilo a todos los enlaces en general, ¿vale? 00:02:33
Lo primero que vamos a hacer es que los vamos a convertir en elementos de bloque, es decir, elementos que ocupen toda la página, ¿vale? Todo el ancho de la página. Para eso poníamos display, ponemos display block, ¿vale? Fijaros que nada más poner esto, ahora me sale cada enlace uno debajo del otro, ¿vale? 00:02:50
¿Qué más? Vamos a aumentar el tamaño de la fuente, vamos a poner font-size, por ejemplo, 1.5 rem, ¿vale? Y vamos a poner un margen inferior de 20 píxeles, ¿vale? Ya solo con esto veis que el tamaño de la fuente ha aumentado, que está uno en cada línea y que hay una separación mayor, ¿vale? 00:03:07
Ahora vamos a modificar primero nuestro botón, el que hemos puesto, nuestro segundo enlace, que hemos dicho que es un enlace con estilos personalizados, ¿vale? Para eso vamos a poner el selector de ID, ¿vale? Y ponemos enlace estilos, ¿vale? 00:03:29
Lo primero que vamos a hacer es cambiarle el color, le vamos a poner un color verde, ¿vale? Luego vamos a poner una fuente en negrita, con bold, ¿vale? Y le vamos a quitar con la propiedad text decoration, poniendo la non, le vamos a quitar el subrayado, ¿vale? De tal forma que se queda tal y como estáis viendo, ¿ok? 00:03:47
Luego vamos a meter algunas pseudo clases que ya hemos visto antes, ¿vale? Por ejemplo, cuando el enlace se visita, ¿vale? Poníamos visit, ¿vale? Dos puntos visit y aquí pues le vamos a cambiar el color y le vamos a poner 0088FF, ¿vale? Otro color. 00:04:07
Le vamos a poner también la pseudo clase que ya hemos visto más veces, hover, que es para cuando pasamos el ratón por encima. En este caso le vamos a poner que subraye la línea cuando pasamos por encima. 00:04:29
Y por último, le vamos a poner una para cuando hagamos clic sobre ella. Enlace, estilos, active. Y le vamos a poner un color a la fuente que sea FF00, tal que así. En rojo. 00:04:45
Entonces, fijaros, yo ahora mismo tengo mi destén verde, cuando me pongo por encima se subraya, ¿vale? 00:05:06
Si hago clic sin soltar se pone en rojo y si suelto, que sería como si yo hubiera accedido al enlace, me aparece en azul, ¿vale? 00:05:13
Que es el color este que yo he puesto aquí, 0088FF, ¿vale? 00:05:21
Si yo quiero volver a ver esto, tengo que borrar las cookies, ¿vale? 00:05:26
Eso se hace desde los tres puntos, ¿vale? 00:05:30
Luego de eso le damos a más herramientas, en más herramientas, no sé si esto, creo que esto no se está viendo, ¿vale? Pero es que no lo puedo dejar que se vea. Más herramientas, luego le damos a borrar datos de navegación, ¿vale? Y ahí nada más darle borramos los datos de la última hora, ¿vale? Entonces fijaros que ahora yo cuando entro vuelve como estaba, ¿vale? 00:05:32
Ok, ahora vamos a ver los enlaces de tipo botón, ¿vale? O bueno, enlaces de tipo botón, ¿no? Cómo convertir un enlace en un botón, mejor dicho, ¿vale? Convertidos en botones, ¿vale? Y para eso vamos a utilizar un tipo de selector que ya vimos, ¿vale? Hace ya, cuando empezamos con CSS, que es el selector de atributos, ¿vale? 00:05:54
¿Cómo era eso? Pues poniendo corchetes, ¿vale? Entonces le decimos todos los enlaces cuyo atributo type sea un botón, ¿vale? Entonces solo me va a coger ese elemento, ¿vale? 00:06:20
Y en este caso, pues fijaros, le vamos a poner un color de fondo de verde, le vamos a poner que se vea en tipo bloque, ¿vale? Es decir, que se vea que ocupe toda la línea. 00:06:33
Le vamos a poner un color de fuente de letra blanco, ¿vale? Vamos a poner a que el texto esté centrado. Vamos a quitar el subrayado, ¿vale? Vamos a poner un tipo de fuente en negrita. 00:06:50
Vamos a ponerle un borde de 3 píxeles y en el estilo del borde que sea Outset 00:07:09
Que recuerdo que era como una especie de efecto 3D 00:07:19
Le vamos a poner un relleno de 10 píxeles para arriba y para abajo 00:07:21
Y de 25 píxeles para la izquierda y la derecha 00:07:25
Y le vamos a poner un borde circular o redondeado más que circular de 5 píxeles 00:07:28
Que esto en principio no se va a notar en exceso 00:07:35
Y un ancho de 250 píxeles 00:07:39
Entonces fijaros que ahora yo tendría este botón 00:07:41
Le podría poner un poquito más de redondeado, ¿vale? 00:07:45
Ahí, por ejemplo 00:07:48
Ese sería nuestro botón, ¿vale? 00:07:49
Y yo ahora, para que parezca aún más un botón, ¿vale? 00:07:52
El efecto de un botón, es decir, ese efecto que ocurre cuando se pulsa 00:07:58
Bueno, pues yo le voy a poner primero aquí 00:08:04
Que cambie el color de fondo 00:08:05
Cuando nos pasamos por encima, ¿vale? 00:08:08
Con el hover, simplemente lo que hago aquí es que le cambio el color, ¿vale? 00:08:11
En este caso, pues le voy a poner un color de 0000FF, ¿vale? 00:08:16
Un azul, y le voy a reducir el tamaño de la letra, ¿vale? 00:08:24
Le voy a poner 100 de grosor de la letra. 00:08:29
Y ahora, cuando hagamos clic sobre él, ¿vale? 00:08:33
Que es la opción active, ¿vale? 00:08:38
Lo que voy a hacer es cambiar el color de fondo, le voy a poner 012E12 y le voy a poner un borde de las mismas dimensiones, 3 píxeles, pero en vez de ser Outset le voy a poner Insert, ¿vale? Y fijaros el efecto. 00:08:41
Cuando paso el ratón por encima, se pone en azul y pasa la letra de ser negrita a ser 100 00:08:58
Pero fijaros lo que ocurre cuando pulso 00:09:06
Ocurre ese efecto de pulsado, ¿vale? 00:09:08
¿Por qué? Porque he cambiado el borde de tipo ins-outset a inset, ¿vale? 00:09:11
Entonces fijaros como yo he convertido un enlace en un botón, ¿vale? 00:09:17
Pues con esto es simplemente ir combinando todas las opciones que ya hemos visto 00:09:21
y se pueden hacer cosas muy, muy, muy espectaculares, ¿vale? 00:09:25
Bueno, esto en cuanto a los enlaces, ¿vale? 00:09:31
Vamos a continuar con las listas. 00:09:35
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
125
Fecha:
22 de febrero de 2021 - 21:35
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
09′ 40″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
27.30 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid