1
00:00:00,000 --> 00:00:05,400
Bueno, pues ahora vamos a ver cómo cambiar los colores de los elementos en hojas de estilo, ¿vale?

2
00:00:05,540 --> 00:00:10,919
Pero de una forma... ya hemos visto la propiedad color, pero la vamos a ver más en detalle, ¿vale?

3
00:00:11,019 --> 00:00:13,519
Para que entendamos bien cómo cambiar los colores.

4
00:00:14,380 --> 00:00:18,940
Entonces, vamos a crear una web, ¿vale?

5
00:00:19,399 --> 00:00:23,859
Como la que estáis viendo en pantalla, aunque creo que no se ve todavía, un segundito.

6
00:00:25,339 --> 00:00:26,219
Ahora, ¿vale?

7
00:00:26,219 --> 00:00:29,079
este archivo lo vamos a llamar

8
00:00:29,079 --> 00:00:30,440
yo lo he llamado

9
00:00:30,440 --> 00:00:32,659
colores.html

10
00:00:32,659 --> 00:00:33,039
¿vale?

11
00:00:34,420 --> 00:00:36,679
vamos a hacer la estructura de la web

12
00:00:36,679 --> 00:00:40,420
vamos a ponerle aquí

13
00:00:40,420 --> 00:00:42,700
de título colores

14
00:00:42,700 --> 00:00:44,899
en hojas de estilo

15
00:00:44,899 --> 00:00:45,320
¿vale?

16
00:00:45,979 --> 00:00:48,859
y lo que vamos a hacer es crearnos una primera etiqueta h1

17
00:00:48,859 --> 00:00:50,000
que va a ser propiedad

18
00:00:50,000 --> 00:00:51,659
color ¿vale?

19
00:00:52,280 --> 00:00:55,479
porque esa va a ser la propiedad básica

20
00:00:56,219 --> 00:01:08,239
Vale, ya lo tenemos y lo que yo voy a hacer ahora es crearme un párrafo con un texto Lorem Ix, ¿vale?

21
00:01:09,959 --> 00:01:17,280
Y lo primero que voy a hacer aquí va a ser cambiar la tipo de letra, ¿vale? Para que nos sirva de recordatorio.

22
00:01:17,900 --> 00:01:24,700
Pongo body, ¿vale? Perdón, primero tengo que poner style, ¿vale? No puedo poner aquí el body así directamente.

23
00:01:24,700 --> 00:01:27,500
pongo style, eso es

24
00:01:27,500 --> 00:01:29,140
y ahora dentro del body pongo

25
00:01:29,140 --> 00:01:31,340
dentro de style pongo, perdón, el body

26
00:01:31,340 --> 00:01:33,379
y aquí voy a poner font-family

27
00:01:33,379 --> 00:01:34,879
y voy a poner arial

28
00:01:34,879 --> 00:01:37,099
¿vale? sans-serif

29
00:01:37,099 --> 00:01:39,120
y de dentro voy a

30
00:01:39,120 --> 00:01:40,500
cambiarle también el tamaño

31
00:01:40,500 --> 00:01:43,420
¿vale? y le voy a poner 1,125

32
00:01:43,420 --> 00:01:44,959
rem, ¿vale?

33
00:01:45,079 --> 00:01:46,239
para que sea un poquito más grande

34
00:01:46,239 --> 00:01:50,560
vale, entonces, lo primero que voy a hacer

35
00:01:50,560 --> 00:01:52,540
vamos a ver, nosotros siempre hemos

36
00:01:52,540 --> 00:01:55,000
estado todo el rato modificando

37
00:01:55,000 --> 00:01:59,620
el color de la fuente de la siguiente forma, ¿vale?

38
00:01:59,680 --> 00:02:02,939
Nosotros cogíamos y poníamos color

39
00:02:02,939 --> 00:02:06,040
y aquí poníamos un color que poníamos green, por ejemplo, ¿vale?

40
00:02:06,040 --> 00:02:12,759
Y como veis, aquí en brackets me aparecen un montón de palabras clave con el color green.

41
00:02:13,560 --> 00:02:14,680
¿Qué es lo que pasa?

42
00:02:15,099 --> 00:02:18,800
Pues pasa que hay muchos navegadores que esas palabras clave no las entienden, ¿vale?

43
00:02:19,479 --> 00:02:24,159
Entonces, el sistema que más se utiliza es un sistema que se llama RGB, ¿vale?

44
00:02:26,569 --> 00:02:42,099
Entonces, el sistema que hemos utilizado, ¿vale? Sistema RG, que viene de rojo, verde y azul, ¿vale? Red, green and blue, ¿vale?

45
00:02:42,780 --> 00:02:50,099
Entonces, tenemos dos formas de poner este código. A través del número hexadecimal, que es un número que varía entre...

46
00:02:50,099 --> 00:02:57,699
que puede coger valores 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 y luego A, B, C, D, E, E, ¿vale?

47
00:02:58,020 --> 00:03:00,020
Y ahora vamos a ver con un ejemplo cómo se pone.

48
00:03:01,060 --> 00:03:04,319
Vamos a poner aquí un id, ¿vale?

49
00:03:04,680 --> 00:03:08,219
Que va a ser color hexadecimal, ¿vale?

50
00:03:08,680 --> 00:03:12,819
Y lo que vamos a hacer es modificar ese párrafo, ¿vale?

51
00:03:12,879 --> 00:03:16,479
Ese id, ponemos aquí color hexadecimal.

52
00:03:16,479 --> 00:03:25,580
y vamos a poner la propiedad color, pero en vez de poner aquí el color directamente, vamos a poner una almohadilla.

53
00:03:25,900 --> 00:03:29,060
Y ahora vamos a poner el color utilizando el código hexadecimal, ¿vale?

54
00:03:29,860 --> 00:03:33,979
Como hemos dicho que vamos a utilizar el sistema RGB, esto va a ir por orden.

55
00:03:33,979 --> 00:03:37,340
Va a ir primero el rojo, luego el verde y luego el azul, ¿vale?

56
00:03:37,560 --> 00:03:43,439
Y los valores van a variar desde 0,0, que será el mínimo, para el cual no habrá rojo, por ejemplo,

57
00:03:43,439 --> 00:03:45,539
hasta FF que será el máximo

58
00:03:45,539 --> 00:03:47,580
que será el color rojo

59
00:03:47,580 --> 00:03:49,419
¿vale? o que será que

60
00:03:49,419 --> 00:03:51,500
la componente roja, perdón, es

61
00:03:51,500 --> 00:03:53,360
más ¿vale? entonces si yo pongo aquí

62
00:03:53,360 --> 00:03:54,340
FF

63
00:03:54,340 --> 00:03:56,939
0000

64
00:03:56,939 --> 00:03:59,599
¿vale? sería que el rojo

65
00:03:59,599 --> 00:04:01,620
es máximo, el verde es mínimo

66
00:04:01,620 --> 00:04:02,979
y el azul es mínimo

67
00:04:02,979 --> 00:04:05,419
por lo tanto como veis el texto parece rojo

68
00:04:05,419 --> 00:04:07,419
¿vale? de hecho si yo pongo el ratón

69
00:04:07,419 --> 00:04:09,460
aquí encima, veis que bracket

70
00:04:09,460 --> 00:04:11,560
ya me está diciendo directamente que este color

71
00:04:11,560 --> 00:04:12,500
es el rojo ¿vale?

72
00:04:13,439 --> 00:04:18,920
¿Que yo quiero que sea verde? Pues entonces pondría la componente roja, la pondría 0, ¿vale?

73
00:04:19,300 --> 00:04:24,279
Y la componente verde la pondría FF, ¿vale?

74
00:04:25,199 --> 00:04:29,879
¿Que yo quiero mezclar rojo y verde? Pues pongo los dos al máximo, ¿vale?

75
00:04:30,180 --> 00:04:31,100
Y me sale el amarillo.

76
00:04:31,560 --> 00:04:35,759
¿Que yo no quiero que sea el máximo de rojo, sino que quiero que sea un rojo más tenue?

77
00:04:35,759 --> 00:04:40,660
Pues, por ejemplo, 35, ¿vale? O menos aún, o 12.

78
00:04:40,660 --> 00:04:48,360
Y si quiero bajar aún más la componente del verde a, yo qué sé, a 88A, ¿vale?

79
00:04:49,259 --> 00:04:51,300
Y ahí voy jugando, ¿vale?

80
00:04:52,000 --> 00:04:55,100
No nos preocupemos porque no hay que saberse los colores del memoria, ¿vale?

81
00:04:55,100 --> 00:04:56,220
Ahora os voy a enseñar un truquito.

82
00:04:57,500 --> 00:05:01,699
Pero antes voy a enseñar otra forma más de poner estos colores, ¿vale?

83
00:05:01,980 --> 00:05:04,360
Porque tenemos siempre que acostumbrarnos a ponerlo en RGB.

84
00:05:04,500 --> 00:05:06,319
No lo vamos a poner como, ¿vale?

85
00:05:06,879 --> 00:05:10,160
Porque no se hace así en páginas web, ¿vale?

86
00:05:10,660 --> 00:05:17,839
Vamos a poner un párrafo nuevo, con un texto lorem ipsum, y en este caso vamos a poner color RGB, ¿vale?

87
00:05:19,259 --> 00:05:27,240
Y vamos a poner el id color RGB, ¿vale?

88
00:05:28,240 --> 00:05:33,279
Y vamos a poner color, y en este caso, es otra forma de construir esto, ¿vale?

89
00:05:33,279 --> 00:05:42,060
Cuando hablábamos que los colores podían variar entre 0, 0 y ff, es lo mismo que decir que el color varía entre 0 y 255, ¿vale?

90
00:05:42,060 --> 00:05:59,120
Entonces, lo que nosotros haremos aquí será poner RGB y entre paréntesis poner el valor de rojo, por ejemplo, si yo quiero que sea máximo de rojo, 255, el valor de verde, si yo quiero que sea cero, de verde, cero, y el valor de azul, ¿vale?

91
00:05:59,480 --> 00:06:09,180
Y fijaros cómo ese párrafo ahora es rojo, ¿vale? Si pongo mi ratón encima, igualmente veis que me aparece el color rojo, ¿vale?

92
00:06:09,639 --> 00:06:14,079
Si yo ahora quiero poner valores, pues yo que sé, un poco al azar para ver qué color sale, ¿vale?

93
00:06:14,800 --> 00:06:23,060
80, 198, 46, ¿vale?

94
00:06:24,120 --> 00:06:28,319
Y ahora yo pongo mi ratón encima, fijaros que me aparece el color que corresponde, ¿vale?

95
00:06:28,519 --> 00:06:33,560
Puedo bajar esta componente de verde un poco y poner, por ejemplo, 112, ¿vale?

96
00:06:34,720 --> 00:06:35,160
¿Ok?

97
00:06:35,160 --> 00:06:41,139
Entonces estas son las dos formas en las que vamos a poner siempre los colores

98
00:06:41,139 --> 00:06:44,860
E insisto, no hay que saberse los colores de memoria, ¿vale?

99
00:06:45,240 --> 00:06:49,040
Voy a enseñar como con brackets lo podemos hacer muy fácil

100
00:06:49,040 --> 00:06:51,019
Vale, pues entonces

101
00:06:51,019 --> 00:06:54,519
Muy sencillo, ¿vale?

102
00:06:54,540 --> 00:06:56,180
Lo que decía, para cambiar los colores

103
00:06:56,180 --> 00:07:00,480
Simplemente, fijaros que cuando yo pongo aquí mi ratón encima me aparece el color, ¿vale?

104
00:07:00,860 --> 00:07:03,860
Pues le vamos a hacer doble clic de tal forma que se marque el color

105
00:07:03,860 --> 00:07:05,819
O si no, no hace falta creo ni siquiera

106
00:07:05,819 --> 00:07:07,959
Y le vamos a dar al botón derecho

107
00:07:07,959 --> 00:07:13,259
Al darle al botón derecho os tiene que aparecer una opción que pone edición rápida

108
00:07:13,259 --> 00:07:19,959
Y cuando le damos, fijaros que nos aparece como una ventanita

109
00:07:19,959 --> 00:07:23,319
Donde nosotros podemos hacer clic en el color que queramos

110
00:07:23,319 --> 00:07:30,000
Fijaros que tenemos toda esta rama y automáticamente ya me está saliendo aquí abajo el color en RGB

111
00:07:30,000 --> 00:07:34,019
También puedo elegir la otra opción, formato RGB A

112
00:07:34,019 --> 00:07:47,399
¿Vale? Que es el otro formato que os he enseñado, ¿vale? Que sería numerando el rojo entre 0 y 255, entre 0 y 255 el verde y el azul igual, ¿vale?

113
00:07:47,779 --> 00:07:57,560
Entonces, os recomiendo estas dos opciones, ¿vale? Y ya con esto pues iréis jugando. Con esto podéis jugar un tercer componente que veis ahí al final, ¿vale?

114
00:07:57,560 --> 00:08:12,660
Que no he hablado antes de él. A la derecha del todo, perdón, un cuarto valor, ¿vale? Tanto para el RGB como para él. Bueno, en este caso esto no existe si lo utilizamos en esta decimal, es importante aclararlo, ¿vale?

115
00:08:12,660 --> 00:08:33,279
Pero si utilizamos el RGB, sí. Y esto lo que es, es la opacidad del color, ¿vale? Cómo de transparente es el color, ¿vale? Entonces fijaros que si yo pongo este color, que es como una especie de morado con un poco de sombra, ¿vale? Y directamente lo voy a cerrar aquí, a la X, ¿vale?

116
00:08:33,279 --> 00:08:35,879
fijaros que el color que se me ve

117
00:08:35,879 --> 00:08:41,899
vamos a ver si puedo

118
00:08:41,899 --> 00:08:46,690
saltar, o sea que no, un segundito

119
00:08:46,690 --> 00:08:53,500
voy a volver a abrir ahora, vale

120
00:08:53,500 --> 00:08:55,559
se me ve ahí como

121
00:08:55,559 --> 00:08:57,320
un poquito transparente, vale

122
00:08:57,320 --> 00:08:59,559
si yo le pongo un 1 aquí, sería lo

123
00:08:59,559 --> 00:09:00,899
máximo de opaco, vale

124
00:09:00,899 --> 00:09:03,820
y si le pongo un 0,2

125
00:09:03,820 --> 00:09:05,960
pues sería lo máximo de transparente

126
00:09:05,960 --> 00:09:07,559
vale, entonces ahí

127
00:09:07,559 --> 00:09:09,679
o un 0, perdón, si le ponemos un 0

128
00:09:09,679 --> 00:09:11,059
sería totalmente transparente, vale

129
00:09:11,059 --> 00:09:13,279
y un 0,2 pues sería

130
00:09:13,279 --> 00:09:15,200
un poquito menos transparente

131
00:09:15,220 --> 00:09:16,620
Entonces con eso podemos jugar, ¿vale?

132
00:09:16,940 --> 00:09:22,679
Entonces jugaríamos con RGB o RGBA si queremos darle ese componente de opacidad, ¿vale?

133
00:09:22,679 --> 00:09:29,399
O con almohadilla y los valores de estado primario, ¿vale?