forked from sasij/subtitles
-
Notifications
You must be signed in to change notification settings - Fork 0
/
1-b-en.srt
415 lines (328 loc) · 7.01 KB
/
1-b-en.srt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
1
00:00:02,720 --> 00:00:05,210
So we've learned about making
real time updates to the DOM,
2
00:00:05,210 --> 00:00:06,890
but what if we want to
make changes to our
3
00:00:06,890 --> 00:00:09,620
style sheets or CSS?
4
00:00:09,620 --> 00:00:10,980
Well, that's where
the right side of
5
00:00:10,980 --> 00:00:12,660
Elements panel comes in.
6
00:00:12,660 --> 00:00:14,240
The styles view does
a lot for us.
7
00:00:14,240 --> 00:00:17,340
First off, it displays the
computed CSS styles for any
8
00:00:17,340 --> 00:00:18,780
given element.
9
00:00:18,780 --> 00:00:22,020
See, on any element, you might
have multiple styles coming
10
00:00:22,020 --> 00:00:26,370
from multiple files, multiple
style sheets, and they get
11
00:00:26,370 --> 00:00:30,080
computed into a listing
that you see here.
12
00:00:30,080 --> 00:00:32,600
The styles view also allows
you to enable and disable
13
00:00:32,600 --> 00:00:36,050
style properties, add new
ones, edit rules on
14
00:00:36,050 --> 00:00:38,490
pseudo-classes, like your
active and hover state.
15
00:00:38,490 --> 00:00:40,680
And finally, it provides a bread
crumb trail so you can
16
00:00:40,680 --> 00:00:43,720
figure out what file
a style came from.
17
00:00:43,720 --> 00:00:46,630
Here you can see, I have the Add
Event button selected on
18
00:00:46,630 --> 00:00:47,440
the left side.
19
00:00:47,440 --> 00:00:50,060
And on the right side, I can
see all the CSS rules being
20
00:00:50,060 --> 00:00:52,390
applied to this button,
starting with the most
21
00:00:52,390 --> 00:00:54,470
specific rules first.
22
00:00:54,470 --> 00:00:57,490
So if I had any inline styles,
they would be displayed here.
23
00:00:57,490 --> 00:00:59,430
And then, there's a label that's
showing us the first
24
00:00:59,430 --> 00:01:03,490
set of CSS rules coming from the
new class since our link
25
00:01:03,490 --> 00:01:05,340
belongs to that class.
26
00:01:05,340 --> 00:01:07,620
You see all those check boxes
next to those styles?
27
00:01:07,620 --> 00:01:09,890
Well, they do what you would
expect them to do.
28
00:01:09,890 --> 00:01:11,990
If you unclick a style,
it stops getting
29
00:01:11,990 --> 00:01:13,330
applied to that element.
30
00:01:13,330 --> 00:01:15,060
This is really useful
in debugging.
31
00:01:15,060 --> 00:01:18,050
If you're wondering what style
is messing up your page, you
32
00:01:18,050 --> 00:01:20,610
can just start disabling the
styles until you figure out
33
00:01:20,610 --> 00:01:21,940
who the culprit is.
34
00:01:21,940 --> 00:01:23,900
We can also change the
style values by
35
00:01:23,900 --> 00:01:25,180
double clicking on them.
36
00:01:25,180 --> 00:01:28,000
So now, our button text is
aligned to the right, as you
37
00:01:28,000 --> 00:01:28,790
can see above.
38
00:01:28,790 --> 00:01:31,890
Or we can remove a property
entirely by just deleting the
39
00:01:31,890 --> 00:01:33,870
value, and now our text
is over on the
40
00:01:33,870 --> 00:01:36,110
left side of the button.
41
00:01:36,110 --> 00:01:38,170
If you want to add a style to an
element, just make sure it's
42
00:01:38,170 --> 00:01:41,080
selected and just hit the
Plus button here.
43
00:01:41,080 --> 00:01:44,880
We then, will want to specify
the CSS selector, which, as
44
00:01:44,880 --> 00:01:47,860
you can see, is defaulted to the
dot new class since that's
45
00:01:47,860 --> 00:01:48,860
what we have selected.
46
00:01:48,860 --> 00:01:52,050
We can then start typing a new
style, and look at that.
47
00:01:52,050 --> 00:01:53,910
It actually allows us to auto
complete each of the
48
00:01:53,910 --> 00:01:57,330
properties and values
using the Tab key.
49
00:01:57,330 --> 00:02:00,140
Now, what if we wanted to change
our Add Event button so
50
00:02:00,140 --> 00:02:01,760
that it changes to a different
color when our
51
00:02:01,760 --> 00:02:03,720
mouse hovers over it?
52
00:02:03,720 --> 00:02:06,900
It might be kind of hard to
hover the mouse over it while
53
00:02:06,900 --> 00:02:08,910
we're trying to use Dev Tools.
54
00:02:08,910 --> 00:02:10,970
But, there's a solution
for this.
55
00:02:10,970 --> 00:02:13,640
If we click on this icon, on
the right side here, we can
56
00:02:13,640 --> 00:02:16,510
force the element we have
selected, the button in this
57
00:02:16,510 --> 00:02:18,650
case, to be in the
active, hover,
58
00:02:18,650 --> 00:02:20,410
focused, or visited state.
59
00:02:20,410 --> 00:02:22,200
In this case, we want
the hover state so
60
00:02:22,200 --> 00:02:22,845
we'll check that off.
61
00:02:22,845 --> 00:02:25,270
And as you can see here, the
button text up above is
62
00:02:25,270 --> 00:02:26,310
underlined.
63
00:02:26,310 --> 00:02:29,380
We can also see the style for
the hover state, which makes
64
00:02:29,380 --> 00:02:33,920
underlined right here in the
bottom right of the screen.
65
00:02:33,920 --> 00:02:36,230
If you want to change the
background color on hover, we
66
00:02:36,230 --> 00:02:39,270
can just add the style here,
and immediately see that it
67
00:02:39,270 --> 00:02:40,760
turns black in the web page.
68
00:02:40,760 --> 00:02:43,650
When we're ready to actually
watch it work, we can uncheck
69
00:02:43,650 --> 00:02:46,300
the hover state and
play with it.
70
00:02:46,300 --> 00:02:48,080
Yep, looks like it works.
71
00:02:48,080 --> 00:02:50,910
Black is obviously not a great
color for this hover state, so
72
00:02:50,910 --> 00:02:51,770
let's change it.
73
00:02:51,770 --> 00:02:55,030
But this time, instead of typing
a value, let's click on
74
00:02:55,030 --> 00:02:56,970
that color swatch right there.
75
00:02:56,970 --> 00:02:59,570
When we see that, we can get
this nice color picker so we
76
00:02:59,570 --> 00:03:01,660
can choose our color this
way, and come up
77
00:03:01,660 --> 00:03:02,910
with a better match.
78
00:03:06,750 --> 00:03:09,650
Lastly, our style view allows us
to know where a particular
79
00:03:09,650 --> 00:03:10,830
style came from.
80
00:03:10,830 --> 00:03:14,960
You might notice that in our CSS
panel, each CSS rule has a
81
00:03:14,960 --> 00:03:18,310
file name listed on the right
side with a line number.
82
00:03:18,310 --> 00:03:21,430
When you click on this file,
that opens up the CSS source
83
00:03:21,430 --> 00:03:24,080
in something that resembles
an editor.
84
00:03:24,080 --> 00:03:26,150
This is actually the source
view panel, which we'll be
85
00:03:26,150 --> 00:03:27,480
going over in the
next chapter.
86
00:03:27,480 --> 00:03:29,570
So let's not get ahead
of ourselves.
87
00:03:29,570 --> 00:03:31,550
First, it's time for you to play
with the style view in
88
00:03:31,550 --> 00:03:32,800
the challenges.