1
00:00:00,270 --> 00:00:01,530
Dar una buena acogida.

2
00:00:01,530 --> 00:00:07,350
Ahora que tenemos la funcionalidad básica de nuestra aplicación Lista de tareas pendiente, es hora de que nos concentremos en hacer

3
00:00:07,350 --> 00:00:08,580
que se vea así.

4
00:00:08,880 --> 00:00:11,430
Así que definitivamente tenemos bastante camino por recorrer.

5
00:00:11,550 --> 00:00:14,220
Y vamos a atacar esta pieza de una en una.

6
00:00:14,280 --> 00:00:17,080
Trataré de hacer esto en el orden más lógico posible.

7
00:00:17,220 --> 00:00:22,800
más grandes, como los colores de fondo y las fuentes, asegurándonos de que tengamos el margen y el relleno correctos

8
00:00:22,800 --> 00:00:27,210
en este gran contenedor aquí y luego nos centraremos en algunos de los elementos más matizados.

9
00:00:27,210 --> 00:00:28,740
Comenzaremos con algunas de las piezas

10
00:00:28,760 --> 00:00:30,460
OK, comencemos aquí.

11
00:00:30,480 --> 00:00:33,200
Lo primero que haremos será hacer una pantalla completa.

12
00:00:33,720 --> 00:00:35,670
Comencemos presionando esto hacia abajo.

13
00:00:35,670 --> 00:00:37,120
Este es nuestro contenedor div.

14
00:00:37,440 --> 00:00:41,630
Añadiremos un margen a la parte superior para que tengamos más espacio aquí.

15
00:00:41,910 --> 00:00:47,180
Entonces volveremos a nuestro C S y podemos cerrar o javascript por ahora.

16
00:00:47,670 --> 00:00:52,520
Nuestro div tiene una idea de contenedor y luego vamos a seleccionar eso aquí que ya has hecho.

17
00:00:52,860 --> 00:00:59,550
Y en lugar de un margen de cero OTTO Bueno, dale cien píxeles en la parte superior e inferior.

18
00:00:59,820 --> 00:01:05,690
Y recuerda que necesitamos la x si tenemos cero, no necesitamos X pero si tenemos un número lo hacemos.

19
00:01:05,880 --> 00:01:07,230
Echemos un vistazo ahora.

20
00:01:07,650 --> 00:01:10,100
OK, entonces ahora están comenzando en el mismo lugar.

21
00:01:10,200 --> 00:01:12,400
Ellos tienen el mismo margen allí.

22
00:01:12,420 --> 00:01:18,090
Lo siguiente que haremos es agregar un color de fondo a este contenedor que este tiene.

23
00:01:18,090 --> 00:01:22,830
Es un poco difícil de ver, pero cuando elimino algo, se ve en la parte posterior.

24
00:01:22,950 --> 00:01:24,570
Es este color aquí mismo.

25
00:01:24,630 --> 00:01:25,700
Entonces eso otra vez

26
00:01:26,080 --> 00:01:28,190
Entonces continuaremos y agregaremos eso.

27
00:01:28,830 --> 00:01:34,680
Entonces, en lugar de un contenedor, di el fondo y el color.

28
00:01:34,680 --> 00:01:39,680
Lo leeré en F 7 7 después de las 7.

29
00:01:39,960 --> 00:01:41,210
Así.

30
00:01:41,850 --> 00:01:43,570
Y veamos cómo se ve.

31
00:01:44,000 --> 00:01:44,400
DE ACUERDO.

32
00:01:44,490 --> 00:01:50,430
Entonces tenemos el mismo color gris que tenemos aquí.

33
00:01:50,430 --> 00:01:52,790
Es el mismo gris claro.

34
00:01:52,830 --> 00:01:54,990
Lo siguiente que haremos es trabajar en la frontera.

35
00:01:55,230 --> 00:01:57,460
Y esto en realidad no tiene un borde.

36
00:01:57,540 --> 00:02:00,840
Lo que sí tiene es una sombra de caja muy leve.

37
00:02:00,840 --> 00:02:02,870
Así que no hemos visto sombra de caja todavía.

38
00:02:02,940 --> 00:02:09,820
Lo demostraré aquí y entraré en MT-NW y es solo una forma de agregar un efecto de sombra.

39
00:02:09,870 --> 00:02:15,240
Así que si me desplazo hacia abajo puedes ver que aquí hay algunas sombras de caja diferentes y vamos a

40
00:02:15,240 --> 00:02:19,750
tener una muy clara, pero si te das cuenta de esto, hay una sombra muy leve.

41
00:02:20,220 --> 00:02:28,380
Entonces, la sintaxis y la sombra que vamos a usar nos desharán de nuestro borde, es sombra de cuadro de tablero 0 0 3

42
00:02:28,500 --> 00:02:39,020
píxeles y luego un color y nuestro color va a ser básicamente negro, pero es R. GRAMO. Y luego vamos a hacerlo realmente realmente transparente.

43
00:02:39,180 --> 00:02:43,260
Así que apenas se nota.

44
00:02:43,560 --> 00:02:45,380
Y si me actualizo

45
00:02:45,400 --> 00:02:46,890
No tenemos frontera ahora, pero hay una pequeña sombra alrededor de este elemento.

46
00:02:46,890 --> 00:02:52,090
DE ACUERDO.

47
00:02:52,710 --> 00:02:53,170
Eso es todo lo que haremos con el contenedor por el momento.

48
00:02:53,250 --> 00:02:55,460
Ataquemos al H-1.

49
00:02:55,770 --> 00:02:57,480
Así que esta partida aquí.

50
00:02:57,480 --> 00:02:59,490
Así que eso es en nuestra edad, solo lo considero un H1.

51
00:02:59,580 --> 00:03:04,320
No tiene una identificación ni nada y está bien.

52
00:03:04,320 --> 00:03:06,710
Vayamos al archivo CSSA y comencemos agregando un color de fondo.

53
00:03:06,960 --> 00:03:12,120
Así que seleccionaremos cada uno y el fondo

54
00:03:12,390 --> 00:03:25,950
es un color que es 2 9 8 0 ser 9 y guardarán y actualizarán y ahora tenemos el tono azul correcto.

55
00:03:27,270 --> 00:03:30,010
Así que también cambiaremos el color de la

56
00:03:31,210 --> 00:03:33,930
fuente a blanco y rápidamente le mostraremos eso.

57
00:03:36,660 --> 00:03:38,890
Todo bien.

58
00:03:38,970 --> 00:03:39,450
Poco a poco avanzando más cerca aquí.

59
00:03:39,510 --> 00:03:42,890
Lo siguiente que haremos es no darle margen y ahora nos desharemos de este espacio que teníamos aquí.

60
00:03:43,050 --> 00:03:50,790
Como puede ver aquí, no hay margen.

61
00:03:51,420 --> 00:03:53,220
Este es nuestro H-1.

62
00:03:53,220 --> 00:03:54,440
Hay relleno aquí.

63
00:03:54,510 --> 00:03:55,970
Entonces el texto no va directo al borde como lo hace aquí.

64
00:03:56,340 --> 00:03:59,550
Pero no hay margen en el exterior de la caja azul.

65
00:03:59,700 --> 00:04:03,330
Esta es nuestra entrada de texto y también ha aumentado el relleno, pero tampoco hay margen para eso.

66
00:04:03,360 --> 00:04:09,360
Comenzaremos agregando algo de relleno alrededor de nuestra lista de tareas pendientes.

67
00:04:10,200 --> 00:04:13,360
H-1 Así que aquí vamos a

68
00:04:13,370 --> 00:04:22,740
agregar 10 píxeles en la parte superior e inferior y 20 píxeles a la izquierda y derecha y guardar.

69
00:04:22,740 --> 00:04:24,240
Puedes ver que nos estamos acercando.

70
00:04:25,260 --> 00:04:27,150
Necesitamos cambiar el tamaño de la fuente.

71
00:04:27,480 --> 00:04:29,000
Necesita cambiar la fuente

72
00:04:29,070 --> 00:04:30,350
También vamos a mayúsculas de todo eso y podemos hacerlo a estas alturas.

73
00:04:30,420 --> 00:04:34,900
Debes saber que uno de mis favoritos es el texto transformado en mayúsculas.

74
00:04:34,980 --> 00:04:40,010
Solo creo que es genial.

75
00:04:40,320 --> 00:04:42,480
Ahí vamos, obtenemos todo en mayúsculas, el

76
00:04:42,480 --> 00:04:53,910
tamaño de la fuente debe ser de 24 píxeles, por lo que el tamaño de la fuente es 24 xy guardamos bien. Lo último que haremos es asegurarnos de que sea un peso de fuente normal.

77
00:04:53,900 --> 00:04:56,840
Entonces, un H1 predeterminado es en negrita y no queremos eso.

78
00:04:57,020 --> 00:05:00,970
Así que haremos Funt way normal o también podríamos escribir font weight 400.

79
00:05:01,290 --> 00:05:09,310
Aquí vamos.

80
00:05:09,320 --> 00:05:10,290
deshacerse de estos puntos.

81
00:05:10,350 --> 00:05:14,960
Ahora solo se trata de cambiar la fuente, lo que volverá a ser lo siguiente que quiere abordar es

82
00:05:15,380 --> 00:05:17,510
Puede ver si no tenemos ningún punto aquí.

83
00:05:17,510 --> 00:05:20,240
Esos puntos se consideran el estilo de navegador predeterminado.

84
00:05:20,250 --> 00:05:23,430
Así que vamos a anular eso.

85
00:05:23,510 --> 00:05:25,360
Vamos a seleccionar la UL en la que están dentro y decir estilo de lista ninguno.

86
00:05:25,400 --> 00:05:32,270
Y si volvemos y actualizamos, ahora no tenemos ningún punto.

87
00:05:32,370 --> 00:05:37,790
en cero y se actualizará aquí y no solo eliminar el espacio en los lados

88
00:05:37,800 --> 00:05:44,270
del pozo. Tenemos espacio aquí que necesita trabajar, pero esa es la mentira, no la UL en sí misma.

89
00:05:45,240 --> 00:05:51,350
Otra cosa que voy a hacer es honrarlo y establecer el margen en cero y el relleno

90
00:05:51,360 --> 00:05:56,240
Así que volveremos a eso.

91
00:05:56,250 --> 00:05:58,440
Ahora agreguemos la fuente correcta y el nombre de esta fuente es rubato y es parte de las fuentes de Google.

92
00:05:58,440 --> 00:06:04,400
Así que tengo eso abierto aquí y lo buscaré rubato.

93
00:06:04,880 --> 00:06:09,400
Y aquí vamos.

94
00:06:09,620 --> 00:06:10,720
Agregar a la colección y luego usar.

95
00:06:10,770 --> 00:06:14,230
Y vamos a querer la manera normal.

96
00:06:14,510 --> 00:06:16,490
Añadiremos en negrita y también medio.

97
00:06:16,800 --> 00:06:20,660
Ahora sigamos y copiemos este enlace a nuestra HMO y podemos cerrar esta ventana.

98
00:06:20,660 --> 00:06:25,620
Regrese a donde cada equipo aquí y arriba arriba pegue

99
00:06:25,980 --> 00:06:33,650
eso y guarde, luego iremos a ver para evaluar y agregaremos algunos estilos al cuerpo.

100
00:06:33,650 --> 00:06:37,520
Todo usa esta fuente, así que agregaremos la familia de fuentes de manera robótica.

101
00:06:37,740 --> 00:06:44,780
Así.

102
00:06:45,530 --> 00:06:46,680
Y si volvemos ahora y refrescamos nuestro H-1 está más o menos allí.

103
00:06:47,390 --> 00:06:53,650
Aparte de este botón que no hemos tocado en todas las fuentes,

104
00:06:53,660 --> 00:06:58,810
el color es el mismo, el espaciado es bueno.

105
00:06:58,860 --> 00:06:59,960
Y nuestros aliados están llegando allí.

106
00:06:59,970 --> 00:07:01,970
Ellos tienen la fuente correcta.

107
00:07:01,980 --> 00:07:03,060
Necesitamos trabajar en algunos de los problemas de espaciado y relleno.

108
00:07:03,140 --> 00:07:06,680
Lo siguiente que abordaremos son los colores de fondo de las mentiras.

109
00:07:06,690 --> 00:07:10,660
Así que cada otra mentira.

110
00:07:11,250 --> 00:07:12,750
Va desde un blanco de color blanco puro a este color gris que tenemos como fondo del the.

111
00:07:12,930 --> 00:07:19,280
Entonces podemos usar el SS para agregar estilos a cada otro aliado.

112
00:07:19,470 --> 00:07:24,340
Así que hagámoslo ahora.

113
00:07:24,380 --> 00:07:25,450
Lo primero que haremos es

114
00:07:25,500 --> 00:07:32,610
seleccionar todos los aliados y darles un fondo de blanco para que podamos hacerlo con F F F o blanco o R-GA 255 255 a 55 y luego haremos las demás cosas.

115
00:07:32,610 --> 00:07:43,520
Y la sintaxis para eso es una mentira y un niño para terminar.

116
00:07:43,740 --> 00:07:50,080
Y eso también y bien definido un patrón de todos los demás.

117
00:07:50,360 --> 00:07:53,970
Y si hiciéramos tres y dijera cada tercio, solo nos queremos mutuamente.

118
00:07:54,140 --> 00:07:58,670
Y haremos que el color de fondo sea

119
00:07:59,000 --> 00:08:08,310
el mismo f7 f7 f7 que utilizamos para el fondo del contenedor y la actualización.

120
00:08:08,390 --> 00:08:08,880
Ahora es difícil de ver porque son un poco pequeños, pero cualquier otra mentira ahora es de este color gris.

121
00:08:08,880 --> 00:08:16,500
Así que agrega algunos más y puedes ver que se alternan perfectos.

122
00:08:16,700 --> 00:08:21,030
Ahora abordemos el problema de la altura de las mentiras y también el relleno.

123
00:08:21,020 --> 00:08:25,370
Lo primero que debe hacer es darles una

124
00:08:25,760 --> 00:08:35,240
altura de 40 píxeles para que todos los aliados tengan una altura de 40 x y volveremos a actualizar.

125
00:08:35,660 --> 00:08:36,540
OK para que ocupen la cantidad correcta de espacio.

126
00:08:36,950 --> 00:08:39,000
Ahora si los comparamos, la fuente tiene algunos problemas.

127
00:08:39,000 --> 00:08:42,620
Y también tenemos que agregar algo de relleno.

128
00:08:42,620 --> 00:08:44,600
A continuación, cambiaremos la propiedad de altura de línea en las mentiras para que nuestro texto se centre verticalmente.

129
00:08:44,970 --> 00:08:51,050
En este momento, la línea es básicamente así de alta.

130
00:08:51,570 --> 00:08:55,050
Vamos a hacer que ocupe los 40 píxeles

131
00:08:55,080 --> 00:09:05,550
completos que muestran la altura de la línea 40 x y eso no cambiará el tamaño de la fuente, solo cambia el tamaño de la línea.

132
00:09:05,540 --> 00:09:09,510
Ahora es 40 píxeles.

133
00:09:09,540 --> 00:09:10,880
Entonces la línea ocupa todo el área.

134
00:09:10,880 --> 00:09:13,850
La siguiente cosa menor es el color que tenemos negro puro y el color que utilicé no es exactamente negro.

135
00:09:14,150 --> 00:09:21,020
Es un poco más ligero.

136
00:09:21,060 --> 00:09:22,820
Así que vamos a configurar el color y es seis seis seis actualización y luego vamos a abordar la entrada.

137
00:09:23,070 --> 00:09:33,530
Entonces tenemos algunas cosas que debes hacer.

138
00:09:33,540 --> 00:09:35,260
El primero de ellos es asegurarse de que ocupa la cantidad correcta de espacio.

139
00:09:35,490 --> 00:09:39,660
Entonces, esta entrada es mucho más grande y no es solo un margen o margen, el tamaño de la fuente es mayor.

140
00:09:39,770 --> 00:09:45,740
También tenemos un nuevo color de fondo.

141
00:09:45,750 --> 00:09:47,420
Y hay un borde cuando hacemos clic.

142
00:09:47,750 --> 00:09:49,700
Así que trabajemos en todos ellos y comenzaremos añadiendo un tamaño de letra más grande.

143
00:09:49,740 --> 00:09:54,610
Así que seleccionaremos el tamaño de fuente de entrada

144
00:09:54,840 --> 00:09:59,370
y estableceremos el tamaño de fuente en 18 píxeles.

145
00:10:02,270 --> 00:10:05,420
Y mientras estemos aquí, haremos el color de

146
00:10:05,960 --> 00:10:11,570
fondo y el color de fondo, y es el mismo f 7 7 1/2 7.

147
00:10:11,610 --> 00:10:14,570
Así.

148
00:10:14,730 --> 00:10:16,350
Y refresquemos.

149
00:10:16,760 --> 00:10:18,040
DE ACUERDO.

150
00:10:18,770 --> 00:10:19,510
Nos estamos acercando.

151
00:10:19,700 --> 00:10:21,180
Lo siguiente que haremos es agregar un ancho y el ancho que le daremos es del 100 por ciento.

152
00:10:21,170 --> 00:10:29,880
Así que en este momento solo va a ser parte del contenedor.

153
00:10:29,880 --> 00:10:33,590
Si lo actualizamos, ahora llega hasta el final.

154
00:10:33,600 --> 00:10:36,820
Pero tenemos algunos pequeños problemas.

155
00:10:37,050 --> 00:10:39,200
Lo primero de lo que queremos ocuparnos es el relleno.

156
00:10:39,210 --> 00:10:42,970
Así que vamos a agregar relleno de 13 píxeles en la parte superior de 13 píxeles en el lado de la derecha.

157
00:10:43,400 --> 00:10:50,320
13 píxeles en la parte inferior y 20 píxeles en la izquierda.

158
00:10:50,370 --> 00:10:54,960
Entonces puedes ver en este.

159
00:10:54,950 --> 00:10:56,250
Tenemos arriba y abajo son 13.

160
00:10:56,550 --> 00:10:58,770
Y a la izquierda hay 20 píxeles.

161
00:10:59,000 --> 00:11:01,550
Entonces, si estuviera fresco, ahora tenemos una entrada más grande que ocupa la cantidad correcta de espacio.

162
00:11:01,590 --> 00:11:07,430
Tenemos un problema, que es que la entrada ahora es demasiado larga.

163
00:11:07,590 --> 00:11:11,670
Cuando dijimos que debería ser el 100 por ciento de eso, en

164
00:11:11,790 --> 00:11:18,540
realidad solo era el contenido y no incluía el relleno y no incluía el margen, lo que significa que nuestra

165
00:11:18,540 --> 00:11:24,460
información va más allá del final de la div y en lugar de ensuciar con el relleno.

166
00:11:24,450 --> 00:11:27,710
Me refiero a mostrar otra forma de cambiarlo, que es una propiedad llamada Box sizing.

167
00:11:27,770 --> 00:11:33,820
Entonces, con el tamaño del bloque tiene algunas opciones diferentes, pero

168
00:11:33,840 --> 00:11:39,420
básicamente controla cómo se dimensiona la caja del modelo de caja.

169
00:11:39,760 --> 00:11:41,400
Y vamos a cambiarlo a la casilla Dasch de la frontera.

170
00:11:41,390 --> 00:11:44,100
Y lo que haga, lo leeré y dice

171
00:11:44,270 --> 00:11:50,570
que las propiedades de ancho y alto incluyen el relleno y el borde, pero no el margen.

172
00:11:50,750 --> 00:11:52,740
Entonces, si lo cambiamos a

173
00:11:52,800 --> 00:12:02,760
la casilla de borde, lo cual haré ahora, vamos aquí solo agregue el cuadro de orden de tamaño de la caja y guárdelo antes de continuar.

174
00:12:02,750 --> 00:12:05,170
Señalaré que esta es una de esas propiedades en las que queremos tener los prefijos.

175
00:12:05,310 --> 00:12:10,250
Entonces, el Web Kit y Mozy son Moz y el desastre de Microsoft.

176
00:12:10,250 --> 00:12:15,170
No voy a hacer eso ahora.

177
00:12:15,540 --> 00:12:16,850
Estará en el código de la solución.

178
00:12:16,910 --> 00:12:18,250
Pero solo lleva mucho tiempo escribir.

179
00:12:18,410 --> 00:12:20,330
Así que funcionará exactamente como está en Chrome, al menos lo actualizo ahora.

180
00:12:20,660 --> 00:12:25,940
Nuestra caja incluye el relleno en el borde, pero no incluye el margen.

181
00:12:26,040 --> 00:12:32,180
Así que terminamos con un ajuste perfecto.

182
00:12:32,180 --> 00:12:34,820
A continuación, le daré un color a la fuente cuando escriba allí.

183
00:12:34,880 --> 00:12:39,220
Entonces todo lo que tenemos que hacer

184
00:12:39,620 --> 00:12:41,130
color es ese color.

185
00:12:41,330 --> 00:12:48,740
Voy a tomar el mismo color del H-1 y bajar a nuestra entrada y solo decir el

186
00:12:48,750 --> 00:12:49,920
Y si actualizamos ahora y comenzamos a escribir Ahí vamos.

187
00:12:49,910 --> 00:12:54,400
Ahora centrémonos en el efecto.

188
00:12:54,410 --> 00:12:56,290
Cuando hacemos clic en lo que se llama enfocar en la entrada se puede ver que aquí obtenemos un borde alrededor.

189
00:12:56,580 --> 00:13:03,860
Entonces tenemos que trabajar en eso.

190
00:13:03,920 --> 00:13:05,060
En este momento tenemos el efecto de enfoque predeterminado.

191
00:13:05,120 --> 00:13:08,050
Entonces, hay un selector para el foco de dos puntos de entrada, al igual que el pseudo selector hover.

192
00:13:08,120 --> 00:13:17,590
Estas celdas solo se ejecutarán cuando nos hayamos enfocado en una entrada.

193
00:13:17,650 --> 00:13:21,510
Así que voy a hacer que el fondo sea blanco cuando nos centremos en él.

194
00:13:21,920 --> 00:13:27,310
También voy a darle un borde de tres píxeles

195
00:13:27,570 --> 00:13:35,960
sólido. El color azul con el que hemos estado trabajando y le daremos un esquema

196
00:13:36,570 --> 00:13:45,830
de no un contorno se refiere a este aspecto molesto que obtenemos del navegador en sí.

197
00:13:45,840 --> 00:13:47,180
Ahora, si nos enfocamos en

198
00:13:47,180 --> 00:13:53,670
la entrada obtenemos este nuevo borde azul y también cambiamos el color de fondo para que quede gris ahora que es blanco.

199
00:13:53,660 --> 00:13:56,610
Así que eso es todo lo que tenemos que hacer para

200
00:13:57,570 --> 00:14:01,850
la entrada, aunque deberíamos ir y agregar el texto de marcador de posición que tenemos aquí.

201
00:14:01,860 --> 00:14:02,850
Así que iré al índice HTL y junto a la entrada o en la entrada agregaré el atributo marcador de posición.

202
00:14:03,030 --> 00:14:10,410
Y esto puede ser lo que quieras.

203
00:14:10,910 --> 00:14:12,270
Lo haré coincidir.

204
00:14:12,470 --> 00:14:13,460
Por lo tanto, es agregar algo nuevo que hacer y actualizar.

205
00:14:13,490 --> 00:14:18,800
Aquí vamos.

206
00:14:18,840 --> 00:14:19,490