1
00:00:01,300 --> 00:00:04,270
De acuerdo, es hora de que realmente escribamos algo de C S.

2
00:00:04,290 --> 00:00:05,400
Muy emocionante.

3
00:00:05,400 --> 00:00:09,000
Antes de hacer eso, necesitamos tener algo de edad, Al, que podamos darle estilo.

4
00:00:09,180 --> 00:00:16,470
Así que voy a seguir adelante y, en sublime, crear un nuevo archivo, guardarlo, ponerlo en mi escritorio por ahora y

5
00:00:16,470 --> 00:00:18,140
voy a llamarlo sobre mí.

6
00:00:18,220 --> 00:00:21,180
HMO.

7
00:00:22,470 --> 00:00:30,400
Usa ese pequeño truco para obtener el esqueleto de la placa de la caldera y esta será una página muy simple.

8
00:00:30,600 --> 00:00:34,500
Te digo que ahora no va a ser hermoso cuando terminemos aquí.

9
00:00:34,590 --> 00:00:36,110
Vamos a cambiar algunos colores.

10
00:00:36,210 --> 00:00:38,950
Estamos repasando los conceptos básicos de cómo todo esto funciona en conjunto.

11
00:00:39,240 --> 00:00:44,820
Así que solo voy y cada uno acerca de mí y

12
00:00:48,450 --> 00:00:52,430
luego digamos que tengo ganas de pasatiempos.

13
00:00:52,740 --> 00:00:55,150
Siéntete libre de adaptar esto a ti mismo.

14
00:00:55,530 --> 00:01:12,730
Agreguemos una lista y algunos aliados y hagamos volar el alquitrán y el origami y guardemos ese archivo.

15
00:01:13,110 --> 00:01:14,180
Vamos a verificarlo dos veces.

16
00:01:14,280 --> 00:01:16,870
Vamos a abrirlo.

17
00:01:16,920 --> 00:01:17,480
Estupendo.

18
00:01:17,550 --> 00:01:19,970
Aquí está nuestro maravilloso sitio que vamos a diseñar.

19
00:01:20,580 --> 00:01:26,650
Entonces, antes de comenzar realmente a escribir el éxito, tenemos que decidir dónde colocar el éxito.

20
00:01:26,820 --> 00:01:28,520
Y en realidad hay algunas opciones.

21
00:01:28,860 --> 00:01:34,800
Entonces, en las notas hay dos a las que me refiero en esta página y la primera que le diré

22
00:01:34,800 --> 00:01:36,840
ahora mismo no es una buena idea.

23
00:01:36,840 --> 00:01:41,100
Te lo estoy mostrando solo para que lo sepas por dos razones.

24
00:01:41,100 --> 00:01:47,430
de los elementos antes de la hoja de estilos por separado, y antes de CSSA realmente se hacía esto en cada elemento.

25
00:01:47,490 --> 00:01:51,390
Una, esta es la única forma en la que solía ser posible el estilo

26
00:01:51,660 --> 00:01:55,380
Déjame mostrarte un ejemplo.

27
00:01:55,830 --> 00:01:59,140
Quiero hacer que esta primera mentira sea violeta.

28
00:01:59,340 --> 00:02:08,000
Yo diría estilo y luego en la cita dice Color Morado y eso funcionará.

29
00:02:08,580 --> 00:02:10,800
Y esto cambia a ser morado.

30
00:02:11,490 --> 00:02:18,780
Entonces, aunque hay un problema, si quiero que los tres sean de color púrpura, necesito seguir adelante

31
00:02:18,780 --> 00:02:20,880
y duplicar esto cada vez.

32
00:02:20,880 --> 00:02:21,910
Lo cual es mucho trabajo.

33
00:02:21,990 --> 00:02:27,300
Y luego, si decido oh no, quiero que sean verdes, entonces tengo que ir y cambiar tres lugares diferentes

34
00:02:27,870 --> 00:02:28,570
para ser verde.

35
00:02:28,770 --> 00:02:33,960
Y obviamente ese problema es mucho peor cuando tienes cientos del mismo elemento con el mismo

36
00:02:34,170 --> 00:02:35,940
estilo en una página dada.

37
00:02:35,940 --> 00:02:37,200
Entonces esta es una mala idea.

38
00:02:37,470 --> 00:02:43,220
Y la otra razón por la cual esta no es una gran idea es que queremos separar nuestro h tim L de RCA.

39
00:02:43,380 --> 00:02:46,050
Es esta idea de la separación de preocupaciones.

40
00:02:46,200 --> 00:02:50,030
Queremos que nuestra CSSA sea independiente en su propio archivo.

41
00:02:50,040 --> 00:02:53,270
Queremos envejecerlo para que sea su propio archivo con solo la estructura.

42
00:02:53,290 --> 00:02:55,130
C Ss es solo el estilo.

43
00:02:55,230 --> 00:02:58,490
Así que ahora mismo esta es una mezcla extraña de los dos.

44
00:02:58,710 --> 00:03:07,010
Así que me desharé de eso y, a la inversa, en las notas hay algo llamado ataque de estilo.

45
00:03:07,360 --> 00:03:13,740
Entonces, una etiqueta de estilo nos permite escribir la sintaxis de C S en donde realmente seleccionamos cosas y tenemos las llaves

46
00:03:14,040 --> 00:03:15,580
que no podríamos hacer aquí.

47
00:03:16,230 --> 00:03:20,590
Pero lo que podemos hacer es hacer esto dentro de un documento h t m l.

48
00:03:20,700 --> 00:03:25,530
escribir algunas etiquetas C Ss y selectores dentro de aquí.

49
00:03:29,940 --> 00:03:40,620
Así que, si seguimos adelante y creamos la etiqueta llamada estilo, podemos darle este tipo de atributo igual a la barra de

50
00:03:40,890 --> 00:03:43,260
texto C Ss ahora podemos

51
00:03:43,470 --> 00:03:52,620
Así que recuerde que tenemos este es el selector de regla general y luego tenemos la propiedad dentro de las llaves y luego

52
00:03:52,650 --> 00:03:55,240
valor y luego un punto y coma.

53
00:03:55,920 --> 00:03:58,990
Así que voy a comentar esto por cierto para hacer comentarios.

54
00:03:59,040 --> 00:04:03,870
SS usa barra inclinada y el asterisco, y luego asterisco y barra inclinada.

55
00:04:04,230 --> 00:04:06,060
Entonces quiero decir que lo dejo aquí.

56
00:04:06,270 --> 00:04:12,990
Y comencemos cambiando el H-1 para que sea de color púrpura.

57
00:04:13,020 --> 00:04:16,810
Entonces, la forma en que escribimos es que si seguimos este patrón lo seleccionamos.

58
00:04:17,070 --> 00:04:23,670
Así que vamos a escribir cada una y otra vez y pasaremos mucho tiempo en diferentes

59
00:04:23,670 --> 00:04:24,680
tipos de selectores.

60
00:04:24,690 --> 00:04:29,640
Así que ahora estamos aprendiendo acerca de un selector de elementos llamado que llevó a

61
00:04:29,760 --> 00:04:32,860
seleccionar basado en un tipo de elemento que es H-1.

62
00:04:33,300 --> 00:04:38,550
Ahora vamos a agregar una propiedad aquí y en este video vamos a mantenerlo

63
00:04:38,550 --> 00:04:40,220
extremadamente simple y usar color.

64
00:04:40,740 --> 00:04:54,490
podemos hacer es cambiar todos los aliados para que sean de color naranja y para hacerlo seleccionamos con un selector de elementos de nuevo y podemos hacer esto inmediatamente después.

65
00:04:54,490 --> 00:05:03,430
Así que voy a decir color y luego violeta y guardar esta recarga o página de respaldo y obtenemos

66
00:05:03,430 --> 00:05:06,510
un H-1 morado. Entonces, lo siguiente que

67
00:05:06,520 --> 00:05:10,660
No necesitamos comas ni ningún otro signo de puntuación.

68
00:05:10,660 --> 00:05:19,390
Acabamos de hacer otra regla aquí aplicar llaves y esta vez vamos a decir que el color es naranja.

69
00:05:19,390 --> 00:05:25,780
Entonces, la razón por la que hacemos esto es que quiero mostrarles que este selector de Elyse no solo

70
00:05:25,780 --> 00:05:28,500
selecciona uno, sino que selecciona todas las mentiras.

71
00:05:28,600 --> 00:05:33,340
Así que refrescamos los tres ahora son de color naranja.

72
00:05:33,340 --> 00:05:36,220
Del mismo modo con el H-1 si tuviéramos múltiples h.

73
00:05:36,310 --> 00:05:38,190
Así que solo agregaré tres.

74
00:05:38,260 --> 00:05:42,210
Todos serían de color púrpura.

75
00:05:42,220 --> 00:05:48,850
Otra cosa que te mostraré aquí es si necesito encontrar otro estilo para cada uno después y digo que

76
00:05:48,850 --> 00:05:50,380
debe ser azul, se

77
00:05:54,130 --> 00:05:54,860
vuelve azul.

78
00:05:54,910 --> 00:05:56,020
Todos ellos se ponen azules.

79
00:05:56,080 --> 00:06:00,400
Y entonces, esto llega a algo en lo que aprenderemos mucho más sobre qué es lo

80
00:06:00,400 --> 00:06:02,680
que sucede cuando hay información conflictiva sobre el estilo.

81
00:06:02,680 --> 00:06:05,200
Y en este caso los cambiamos a todos por morados.

82
00:06:05,410 --> 00:06:07,870
Y luego los cambiamos todos para que sean azules.

83
00:06:07,870 --> 00:06:12,510
Así que el que vino más tarde ganó la batalla, supongo.

84
00:06:13,560 --> 00:06:14,040
DE ACUERDO.

85
00:06:14,050 --> 00:06:21,520
Entonces, el problema con lo que acabamos de hacer parece estar bien, pero desafortunadamente todavía está en

86
00:06:21,520 --> 00:06:22,550
nuestra HMO.

87
00:06:22,690 --> 00:06:27,940
Y acabo de decir que hace unos minutos queremos separarlo y R C

88
00:06:27,940 --> 00:06:30,210
S no queremos que se conecten.

89
00:06:30,320 --> 00:06:35,000
Bueno, queremos que estén conectados, no queremos que los CC se aniden dentro de su HMO.

90
00:06:35,440 --> 00:06:38,630
Funcionalmente funciona exactamente de la misma manera.

91
00:06:38,800 --> 00:06:46,880
No vemos ninguna diferencia visual, pero bueno, lo que realmente queremos hacer es usar una etiqueta de enlace.

92
00:06:47,290 --> 00:06:53,810
Entonces, lo que una etiqueta de enlace nos permite hacer es escribir o ver SS en un archivo totalmente separado y luego conectarlo con

93
00:06:53,810 --> 00:06:59,830
la etiqueta de enlace en lugar de nuestra cabeza, que básicamente obtendrá el contenido de ese archivo y alma y todo lo

94
00:07:00,190 --> 00:07:01,580
que tengamos en nuestra edad.

95
00:07:01,580 --> 00:07:05,090
Tim L. dado el contenido de ese archivo.

96
00:07:07,270 --> 00:07:13,780
archivo y vamos a poner RC SS aquí, vamos a guardarlo y lo voy a llamar.

97
00:07:13,780 --> 00:07:17,630
Entonces, para escribir que podemos comenzar haciendo un nuevo

98
00:07:17,690 --> 00:07:25,420
C S lo llamas como quieras, pero necesita ser punto C S y lo estoy colocando en el

99
00:07:26,230 --> 00:07:28,960
mismo directorio que mi archivo HDMI.

100
00:07:29,050 --> 00:07:37,360
Lo siguiente que voy a hacer es definir algunos estilos y aquí H-1 digamos que

101
00:07:37,400 --> 00:07:42,630
el color es rojo y el color mentiras es verde.

102
00:07:43,240 --> 00:07:46,870
Y mientras estamos aquí, vamos a cambiarlo también.

103
00:07:46,870 --> 00:07:49,330
Color morado.

104
00:07:49,870 --> 00:07:50,830
Estupendo.

105
00:07:50,980 --> 00:07:58,180
Así que tenemos CSSA definido aquí, por supuesto, y voy a comentar esto por ahora.

106
00:07:58,180 --> 00:08:00,750
Por supuesto, aunque no están conectados en este momento.

107
00:08:01,120 --> 00:08:04,030
Así que hicimos un archivo pero no está conectado.

108
00:08:04,180 --> 00:08:06,550
Entonces para hacer eso necesitamos usar la etiqueta de enlace.

109
00:08:06,880 --> 00:08:13,810
Así que me gustaría simplemente escribir el enlace y luego presionar la pestaña y se puede ver que hay un atributo importante que

110
00:08:14,210 --> 00:08:19,570
el texto sublime quiere que llenemos, que se llama A-Trak y funciona igual que el canal en una

111
00:08:19,570 --> 00:08:22,110
etiqueta de anclaje y eso sería dale una llegada.

112
00:08:22,140 --> 00:08:24,900
Le damos un lugar para encontrar el archivo.

113
00:08:24,940 --> 00:08:35,140
Entonces, en este caso, este archivo simplemente se llama apt us, así que solo escribimos abducts yes us save y refresh.

114
00:08:35,140 --> 00:08:42,540
Ahora puedes ver que hemos leído H-1, una página púrpura 4 y aliados verdes, así que vamos a hacer todo lo que vamos a hacer.

115
00:08:42,540 --> 00:08:43,920
En cuanto a estilo por ahora.

116
00:08:44,110 --> 00:08:50,440
Entonces, para recapitular aquí, lo primero que discutimos es usar el atributo de estilo para agregar estilo en la línea

117
00:08:50,620 --> 00:08:57,070
que se asemeja a este estilo y luego darle una propiedad, y esta es una mala idea por dos razones.

118
00:08:57,160 --> 00:09:01,420
El primero es que no queremos desordenar o H Tim L con muchos estilos.

119
00:09:01,480 --> 00:09:02,890
Queremos que estén separados.

120
00:09:03,160 --> 00:09:06,860
Y la segunda razón es que es un dolor si queremos cambiar las cosas.

121
00:09:07,150 --> 00:09:11,500
Es mucha duplicación si queremos hacer todo el hilo 3H one.

122
00:09:11,530 --> 00:09:14,850
Tenemos que copiar ese código en tres lugares diferentes.

123
00:09:15,340 --> 00:09:21,550
Lo siguiente que aprendimos fue usar la etiqueta de estilo y la etiqueta de estilo nos permite escribir C S us

124
00:09:21,640 --> 00:09:23,110
dentro de nuestro h Timo.

125
00:09:23,410 --> 00:09:24,940
Y funciona bien

126
00:09:24,940 --> 00:09:30,010
Nos permite usar la sintaxis CSSA donde podemos seleccionar todos a la vez.

127
00:09:30,010 --> 00:09:34,710
El problema es que no queremos poner a R C S S directamente enfurecido.

128
00:09:35,230 --> 00:09:39,940
que desea agregar rápidamente algunos estilos, no desea crear un nuevo archivo y luego conectarse.

129
00:09:40,180 --> 00:09:42,880
Pero lo usará ocasionalmente si solo está depurando algo

130
00:09:42,920 --> 00:09:44,480
Simplemente lo eliminarás luego.

131
00:09:44,590 --> 00:09:46,100
Entonces ese es realmente el momento donde lo uso.

132
00:09:46,100 --> 00:09:48,530
Solo para demostraciones rápidas.

133
00:09:48,730 --> 00:09:53,670
Pero lo que realmente queremos usar es la etiqueta de enlace, la etiqueta de enlace.

134
00:09:53,860 --> 00:09:55,810
Es solo una referencia a otro archivo.

135
00:09:55,960 --> 00:10:02,020
Necesitamos un archivo lleno de estilos para que Dotsie lo evalúe y guárdelo con el atributo H

136
00:10:02,020 --> 00:10:05,800
ref y eso es todo lo que tenemos que hacer.

137
00:10:05,800 --> 00:10:12,550
Una cosa que olvidé mencionar es que definitivamente quieres poner etiquetas de enlace y estilos en tu cabeza.

138
00:10:12,790 --> 00:10:17,110
Ese es realmente el punto de la cabeza donde colocas las cosas que no están en la página,

139
00:10:17,110 --> 00:10:22,600
no los elementos, sino las cosas que tienen que ver con esos elementos, por lo que las fuentes incluyen las hojas de

140
00:10:22,900 --> 00:10:24,190
estilo y, finalmente, los javascript.