1
00:00:00,240 --> 00:00:05,980
Bueno, ahora lo que vamos a ver es cómo hacer enlaces o cómo modificar el estilo de los enlaces, ¿vale?

2
00:00:06,000 --> 00:00:26,019
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?

3
00:00:26,019 --> 00:00:55,920
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?

4
00:00:55,920 --> 00:01:24,659
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?

5
00:01:24,659 --> 00:01:44,760
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?

6
00:01:44,760 --> 00:02:03,579
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?

7
00:02:03,579 --> 00:02:17,120
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.

8
00:02:17,620 --> 00:02:33,099
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.

9
00:02:33,580 --> 00:02:50,250
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?

10
00:02:50,250 --> 00:03:07,789
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?

11
00:03:07,789 --> 00:03:29,289
¿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?

12
00:03:29,289 --> 00:03:47,030
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?

13
00:03:47,030 --> 00:04:07,909
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?

14
00:04:07,909 --> 00:04:29,560
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.

15
00:04:29,560 --> 00:04:45,699
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.

16
00:04:45,699 --> 00:05:06,800
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.

17
00:05:06,800 --> 00:05:13,180
Entonces, fijaros, yo ahora mismo tengo mi destén verde, cuando me pongo por encima se subraya, ¿vale?

18
00:05:13,379 --> 00:05:21,180
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?

19
00:05:21,480 --> 00:05:26,339
Que es el color este que yo he puesto aquí, 0088FF, ¿vale?

20
00:05:26,680 --> 00:05:29,879
Si yo quiero volver a ver esto, tengo que borrar las cookies, ¿vale?

21
00:05:30,000 --> 00:05:32,720
Eso se hace desde los tres puntos, ¿vale?

22
00:05:32,720 --> 00:05:54,379
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?

23
00:05:54,379 --> 00:06:20,339
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?

24
00:06:20,339 --> 00:06:33,100
¿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?

25
00:06:33,100 --> 00:06:50,660
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.

26
00:06:50,660 --> 00:07:09,500
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.

27
00:07:09,500 --> 00:07:19,279
Vamos a ponerle un borde de 3 píxeles y en el estilo del borde que sea Outset

28
00:07:19,279 --> 00:07:21,540
Que recuerdo que era como una especie de efecto 3D

29
00:07:21,540 --> 00:07:25,480
Le vamos a poner un relleno de 10 píxeles para arriba y para abajo

30
00:07:25,480 --> 00:07:28,660
Y de 25 píxeles para la izquierda y la derecha

31
00:07:28,660 --> 00:07:35,540
Y le vamos a poner un borde circular o redondeado más que circular de 5 píxeles

32
00:07:35,540 --> 00:07:39,040
Que esto en principio no se va a notar en exceso

33
00:07:39,040 --> 00:07:41,939
Y un ancho de 250 píxeles

34
00:07:41,939 --> 00:07:45,180
Entonces fijaros que ahora yo tendría este botón

35
00:07:45,180 --> 00:07:48,019
Le podría poner un poquito más de redondeado, ¿vale?

36
00:07:48,300 --> 00:07:49,040
Ahí, por ejemplo

37
00:07:49,040 --> 00:07:52,339
Ese sería nuestro botón, ¿vale?

38
00:07:52,639 --> 00:07:57,540
Y yo ahora, para que parezca aún más un botón, ¿vale?

39
00:07:58,459 --> 00:08:04,180
El efecto de un botón, es decir, ese efecto que ocurre cuando se pulsa

40
00:08:04,180 --> 00:08:05,920
Bueno, pues yo le voy a poner primero aquí

41
00:08:05,920 --> 00:08:08,160
Que cambie el color de fondo

42
00:08:08,160 --> 00:08:11,379
Cuando nos pasamos por encima, ¿vale?

43
00:08:11,379 --> 00:08:16,540
Con el hover, simplemente lo que hago aquí es que le cambio el color, ¿vale?

44
00:08:16,939 --> 00:08:24,540
En este caso, pues le voy a poner un color de 0000FF, ¿vale?

45
00:08:24,699 --> 00:08:28,800
Un azul, y le voy a reducir el tamaño de la letra, ¿vale?

46
00:08:29,800 --> 00:08:32,759
Le voy a poner 100 de grosor de la letra.

47
00:08:33,139 --> 00:08:38,990
Y ahora, cuando hagamos clic sobre él, ¿vale?

48
00:08:38,990 --> 00:08:41,470
Que es la opción active, ¿vale?

49
00:08:41,470 --> 00:08:58,649
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.

50
00:08:58,649 --> 00:09:06,049
Cuando paso el ratón por encima, se pone en azul y pasa la letra de ser negrita a ser 100

51
00:09:06,049 --> 00:09:08,350
Pero fijaros lo que ocurre cuando pulso

52
00:09:08,350 --> 00:09:11,769
Ocurre ese efecto de pulsado, ¿vale?

53
00:09:11,769 --> 00:09:16,389
¿Por qué? Porque he cambiado el borde de tipo ins-outset a inset, ¿vale?

54
00:09:17,029 --> 00:09:20,750
Entonces fijaros como yo he convertido un enlace en un botón, ¿vale?

55
00:09:21,450 --> 00:09:25,950
Pues con esto es simplemente ir combinando todas las opciones que ya hemos visto

56
00:09:25,950 --> 00:09:29,409
y se pueden hacer cosas muy, muy, muy espectaculares, ¿vale?

57
00:09:31,690 --> 00:09:35,389
Bueno, esto en cuanto a los enlaces, ¿vale?

58
00:09:35,669 --> 00:09:37,649
Vamos a continuar con las listas.