-
Notifications
You must be signed in to change notification settings - Fork 1
/
CSS.html
520 lines (512 loc) · 156 KB
/
CSS.html
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
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
<!DOCTYPE html><html lang="zh-TW"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"><meta name="apple-mobile-web-app-capable" content="yes"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta property="og:type" content="website"><meta name="twitter:card" content="summary"><style>@media screen{body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;background-color:transparent;border:0;color:inherit;cursor:pointer;font-size:inherit;opacity:.8;outline:none;padding:0;transition:opacity .2s linear}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:disabled,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:disabled,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:disabled,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button:disabled{cursor:not-allowed;opacity:.15!important}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:hover,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:hover,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:hover,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button:hover{opacity:1}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:active,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:active,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:hover:active,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button:hover:active{opacity:.6}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:not(:disabled),body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:not(:disabled),body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:hover:not(:disabled),body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button:hover:not(:disabled){transition:none}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev],body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button.bespoke-marp-presenter-info-page-prev{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNNjggOTAgMjggNTBsNDAtNDAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button.bespoke-marp-presenter-info-page-next{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJtMzIgOTAgNDAtNDAtNDAtNDAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen]{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6NXB4fTwvc3R5bGU+PC9kZWZzPjxyZWN0IHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgeD0iMTAiIHk9IjIwIiBjbGFzcz0iYSIgcng9IjUuNjciLz48cGF0aCBkPSJNNDAgNzBIMjBWNTBtMjAgMEwyMCA3MG00MC00MGgyMHYyMG0tMjAgMCAyMC0yMCIgY2xhc3M9ImEiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button.exit[data-bespoke-marp-osc=fullscreen],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button.exit[data-bespoke-marp-osc=fullscreen]{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6NXB4fTwvc3R5bGU+PC9kZWZzPjxyZWN0IHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgeD0iMTAiIHk9IjIwIiBjbGFzcz0iYSIgcng9IjUuNjciLz48cGF0aCBkPSJNMjAgNTBoMjB2MjBtLTIwIDAgMjAtMjBtNDAgMEg2MFYzMG0yMCAwTDYwIDUwIiBjbGFzcz0iYSIvPjwvc3ZnPg==")}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=presenter],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=presenter]{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNODcuOCA0Ny41Qzg5IDUwIDg3LjcgNTIgODUgNTJIMzVhOC43IDguNyAwIDAgMS03LjItNC41bC0xNS42LTMxQzExIDE0IDEyLjIgMTIgMTUgMTJoNTBhOC44IDguOCAwIDAgMSA3LjIgNC41ek02MCA1MnYzNm0tMTAgMGgyME00NSA0MmgyMCIvPjwvc3ZnPg==") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button.bespoke-marp-presenter-note-bigger{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNMTIgNTBoODBNNTIgOTBWMTAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button.bespoke-marp-presenter-note-smaller{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNMTIgNTBoODAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}}@keyframes __bespoke_marp_transition_reduced_outgoing__{0%{opacity:1}to{opacity:0}}@keyframes __bespoke_marp_transition_reduced_incoming__{0%{mix-blend-mode:plus-lighter;opacity:0}to{mix-blend-mode:plus-lighter;opacity:1}}.bespoke-marp-note,.bespoke-marp-osc,.bespoke-progress-parent{display:none;transition:none}@media screen{::view-transition-group(*){animation-duration:var(--marp-bespoke-transition-animation-duration,.5s);animation-timing-function:ease}::view-transition-new(*),::view-transition-old(*){animation-delay:0s;animation-direction:var(--marp-bespoke-transition-animation-direction,normal);animation-duration:var(--marp-bespoke-transition-animation-duration,.5s);animation-fill-mode:both;animation-name:var(--marp-bespoke-transition-animation-name,var(--marp-bespoke-transition-animation-name-fallback,__bespoke_marp_transition_no_animation__));mix-blend-mode:normal}::view-transition-old(*){--marp-bespoke-transition-animation-name-fallback:__bespoke_marp_transition_reduced_outgoing__;animation-timing-function:ease}::view-transition-new(*){--marp-bespoke-transition-animation-name-fallback:__bespoke_marp_transition_reduced_incoming__;animation-timing-function:ease}::view-transition-new(root),::view-transition-old(root){animation-timing-function:linear}::view-transition-new(__bespoke_marp_transition_osc__),::view-transition-old(__bespoke_marp_transition_osc__){animation-duration:0s!important;animation-name:__bespoke_marp_transition_osc__!important}::view-transition-new(__bespoke_marp_transition_osc__){opacity:0!important}.bespoke-marp-transition-warming-up::view-transition-group(*),.bespoke-marp-transition-warming-up::view-transition-new(*),.bespoke-marp-transition-warming-up::view-transition-old(*){animation-play-state:paused!important}body,html{height:100%;margin:0}body{background:#000;overflow:hidden}svg.bespoke-marp-slide{content-visibility:hidden;opacity:0;pointer-events:none;z-index:-1}svg.bespoke-marp-slide:not(.bespoke-marp-active) *{view-transition-name:none!important}svg.bespoke-marp-slide.bespoke-marp-active{content-visibility:visible;opacity:1;pointer-events:auto;z-index:0}svg.bespoke-marp-slide.bespoke-marp-active.bespoke-marp-active-ready *{animation-name:__bespoke_marp__!important}@supports not (content-visibility:hidden){svg.bespoke-marp-slide[data-bespoke-marp-load=hideable]{display:none}svg.bespoke-marp-slide[data-bespoke-marp-load=hideable].bespoke-marp-active{display:block}}}@media screen and (prefers-reduced-motion:reduce){svg.bespoke-marp-slide *{view-transition-name:none!important}}@media screen{[data-bespoke-marp-fragment=inactive]{visibility:hidden}body[data-bespoke-view=""] .bespoke-marp-parent,body[data-bespoke-view=next] .bespoke-marp-parent{inset:0;position:absolute}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc{view-transition-name:__bespoke_marp_transition_osc__;background:rgba(0,0,0,.65);border-radius:7px;bottom:50px;color:#fff;contain:paint;display:block;font-family:Helvetica,Arial,sans-serif;font-size:16px;left:50%;line-height:0;opacity:1;padding:12px;position:absolute;touch-action:manipulation;transform:translateX(-50%);transition:opacity .2s linear;-webkit-user-select:none;user-select:none;white-space:nowrap;will-change:transform;z-index:1}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>*,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>*{margin-left:6px}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>:first-child,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>:first-child{margin-left:0}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>span,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>span{opacity:.8}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>span[data-bespoke-marp-osc=page],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>span[data-bespoke-marp-osc=page]{display:inline-block;min-width:140px;text-align:center}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen],body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=presenter],body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=presenter],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev]{height:32px;line-height:32px;width:32px}body[data-bespoke-view=""] .bespoke-marp-parent.bespoke-marp-inactive,body[data-bespoke-view=next] .bespoke-marp-parent.bespoke-marp-inactive{cursor:none}body[data-bespoke-view=""] .bespoke-marp-parent.bespoke-marp-inactive>.bespoke-marp-osc,body[data-bespoke-view=next] .bespoke-marp-parent.bespoke-marp-inactive>.bespoke-marp-osc{opacity:0;pointer-events:none}body[data-bespoke-view=""] svg.bespoke-marp-slide,body[data-bespoke-view=next] svg.bespoke-marp-slide{height:100%;left:0;position:absolute;top:0;width:100%}body[data-bespoke-view=""] .bespoke-progress-parent{background:#222;display:flex;height:5px;width:100%}body[data-bespoke-view=""] .bespoke-progress-parent+.bespoke-marp-parent{top:5px}body[data-bespoke-view=""] .bespoke-progress-parent .bespoke-progress-bar{background:#0288d1;flex:0 0 0;transition:flex-basis .2s cubic-bezier(0,1,1,1)}body[data-bespoke-view=next]{background:transparent}body[data-bespoke-view=presenter]{background:#161616}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container{display:grid;font-family:Helvetica,Arial,sans-serif;grid-template:"current dragbar next" minmax(140px,1fr) "current dragbar note" 2fr "info dragbar note" 3em;grid-template-columns:minmax(3px,var(--bespoke-marp-presenter-split-ratio,66%)) 0 minmax(3px,1fr);height:100%;left:0;position:absolute;top:0;width:100%}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-parent{grid-area:current;overflow:hidden;position:relative}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-parent svg.bespoke-marp-slide{height:calc(100% - 40px);left:20px;pointer-events:none;position:absolute;top:20px;-webkit-user-select:none;user-select:none;width:calc(100% - 40px)}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-parent svg.bespoke-marp-slide.bespoke-marp-active{filter:drop-shadow(0 3px 10px rgba(0,0,0,.5))}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-dragbar-container{background:#0288d1;cursor:col-resize;grid-area:dragbar;margin-left:-3px;opacity:0;position:relative;transition:opacity .4s linear .1s;width:6px;z-index:10}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-dragbar-container:hover{opacity:1}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-dragbar-container.active{opacity:1;transition-delay:0s}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-next-container{background:#222;cursor:pointer;display:none;grid-area:next;overflow:hidden;position:relative}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-next-container.active{display:block}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-next-container iframe.bespoke-marp-presenter-next{background:transparent;border:0;display:block;filter:drop-shadow(0 3px 10px rgba(0,0,0,.5));height:calc(100% - 40px);left:20px;pointer-events:none;position:absolute;top:20px;-webkit-user-select:none;user-select:none;width:calc(100% - 40px)}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container{background:#222;color:#eee;grid-area:note;position:relative;z-index:1}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button{height:1.5em;line-height:1.5em;width:1.5em}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-presenter-note-wrapper{display:block;inset:0;position:absolute}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-presenter-note-buttons{background:rgba(0,0,0,.65);border-radius:4px;bottom:0;display:flex;gap:4px;margin:12px;opacity:0;padding:6px;pointer-events:none;position:absolute;right:0;transition:opacity .2s linear}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-presenter-note-buttons:focus-within,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-presenter-note-wrapper:focus-within+.bespoke-marp-presenter-note-buttons,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container:hover .bespoke-marp-presenter-note-buttons{opacity:1;pointer-events:auto}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note{word-wrap:break-word;box-sizing:border-box;font-size:calc(1.1em*var(--bespoke-marp-note-font-scale, 1));height:calc(100% - 40px);margin:20px;overflow:auto;padding-right:3px;scrollbar-color:hsla(0,0%,93%,.5) transparent;scrollbar-width:thin;white-space:pre-wrap;width:calc(100% - 40px)}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note::-webkit-scrollbar{width:6px}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note::-webkit-scrollbar-track{background:transparent}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note::-webkit-scrollbar-thumb{background:hsla(0,0%,93%,.5);border-radius:6px}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note:empty{pointer-events:none}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note.active{display:block}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note p:first-child{margin-top:0}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note p:last-child{margin-bottom:0}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container{align-items:center;box-sizing:border-box;color:#eee;display:flex;flex-wrap:nowrap;grid-area:info;justify-content:center;overflow:hidden;padding:0 10px}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-page,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-time,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-timer{box-sizing:border-box;display:block;padding:0 10px;white-space:nowrap;width:100%}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button{height:1.5em;line-height:1.5em;width:1.5em}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-page{order:2;text-align:center}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-page .bespoke-marp-presenter-info-page-text{display:inline-block;min-width:120px;text-align:center}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-time{color:#999;order:1;text-align:left}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-timer{color:#999;order:3;text-align:right}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-timer:hover{cursor:pointer}}@media print{.bespoke-marp-presenter-info-container,.bespoke-marp-presenter-next-container,.bespoke-marp-presenter-note-container{display:none}}</style><style>@charset "UTF-8";@import "https://fonts.bunny.net/css?family=Lato:400,900|Roboto+Mono:400,700&display=swap";div#\:\$p>svg>foreignObject>section{width:1280px;height:720px;box-sizing:border-box;overflow:hidden;position:relative;scroll-snap-align:center center}div#\:\$p>svg>foreignObject>section:after{bottom:0;content:attr(data-marpit-pagination);padding:inherit;pointer-events:none;position:absolute;right:0}div#\:\$p>svg>foreignObject>section:not([data-marpit-pagination]):after{display:none}/* Normalization */div#\:\$p>svg>foreignObject>section :is(h1,marp-h1){font-size:2em;margin:0.67em 0}div#\:\$p>svg>foreignObject>section video::-webkit-media-controls{will-change:transform}@page{size:1280px 720px;margin:0}@media print{body,html{background-color:#fff;margin:0;page-break-inside:avoid;break-inside:avoid-page}div#\:\$p>svg>foreignObject>section{page-break-before:always;break-before:page}div#\:\$p>svg>foreignObject>section,div#\:\$p>svg>foreignObject>section *{-webkit-print-color-adjust:exact!important;animation-delay:0s!important;animation-duration:0s!important;color-adjust:exact!important;transition:none!important}div#\:\$p>svg[data-marpit-svg]{display:block;height:100vh;width:100vw}}div#\:\$p>svg>foreignObject>:where(section){container-type:size}div#\:\$p>svg>foreignObject>section img[data-marp-twemoji]{background:transparent;height:1em;margin:0 .05em 0 .1em;vertical-align:-.1em;width:1em}
/*!
* Marp / Marpit Gaia theme.
*
* @theme gaia
* @author Yuki Hattori
*
* @auto-scaling true
* @size 16:9 1280px 720px
* @size 4:3 960px 720px
*/div#\:\$p>svg>foreignObject>section :is(pre,marp-pre) code.hljs{display:block;overflow-x:auto;padding:1em}div#\:\$p>svg>foreignObject>section code.hljs{padding:3px 5px}div#\:\$p>svg>foreignObject>section .hljs{background:#000;color:#f8f8f8}div#\:\$p>svg>foreignObject>section .hljs-comment,div#\:\$p>svg>foreignObject>section .hljs-quote{color:#aeaeae;font-style:italic}div#\:\$p>svg>foreignObject>section .hljs-keyword,div#\:\$p>svg>foreignObject>section .hljs-selector-tag,div#\:\$p>svg>foreignObject>section .hljs-type{color:#e28964}div#\:\$p>svg>foreignObject>section .hljs-string{color:#65b042}div#\:\$p>svg>foreignObject>section .hljs-subst{color:#daefa3}div#\:\$p>svg>foreignObject>section .hljs-link,div#\:\$p>svg>foreignObject>section .hljs-regexp{color:#e9c062}div#\:\$p>svg>foreignObject>section .hljs-name,div#\:\$p>svg>foreignObject>section .hljs-section,div#\:\$p>svg>foreignObject>section .hljs-tag,div#\:\$p>svg>foreignObject>section .hljs-title{color:#89bdff}div#\:\$p>svg>foreignObject>section .hljs-class .hljs-title,div#\:\$p>svg>foreignObject>section .hljs-doctag,div#\:\$p>svg>foreignObject>section .hljs-title.class_{text-decoration:underline}div#\:\$p>svg>foreignObject>section .hljs-bullet,div#\:\$p>svg>foreignObject>section .hljs-number,div#\:\$p>svg>foreignObject>section .hljs-symbol{color:#3387cc}div#\:\$p>svg>foreignObject>section .hljs-params,div#\:\$p>svg>foreignObject>section .hljs-template-variable,div#\:\$p>svg>foreignObject>section .hljs-variable{color:#3e87e3}div#\:\$p>svg>foreignObject>section .hljs-attribute{color:#cda869}div#\:\$p>svg>foreignObject>section .hljs-meta{color:#8996a8}div#\:\$p>svg>foreignObject>section .hljs-formula{background-color:#0e2231;color:#f8f8f8;font-style:italic}div#\:\$p>svg>foreignObject>section .hljs-addition{background-color:#253b22;color:#f8f8f8}div#\:\$p>svg>foreignObject>section .hljs-deletion{background-color:#420e09;color:#f8f8f8}div#\:\$p>svg>foreignObject>section .hljs-selector-class{color:#9b703f}div#\:\$p>svg>foreignObject>section .hljs-selector-id{color:#8b98ab}div#\:\$p>svg>foreignObject>section .hljs-emphasis{font-style:italic}div#\:\$p>svg>foreignObject>section .hljs-strong{font-weight:700}div#\:\$p>svg>foreignObject>section :is(h1,marp-h1),div#\:\$p>svg>foreignObject>section :is(h2,marp-h2),div#\:\$p>svg>foreignObject>section :is(h3,marp-h3),div#\:\$p>svg>foreignObject>section :is(h4,marp-h4),div#\:\$p>svg>foreignObject>section :is(h5,marp-h5),div#\:\$p>svg>foreignObject>section :is(h6,marp-h6){margin:.5em 0 0}div#\:\$p>svg>foreignObject>section :is(h1,marp-h1) strong,div#\:\$p>svg>foreignObject>section :is(h2,marp-h2) strong,div#\:\$p>svg>foreignObject>section :is(h3,marp-h3) strong,div#\:\$p>svg>foreignObject>section :is(h4,marp-h4) strong,div#\:\$p>svg>foreignObject>section :is(h5,marp-h5) strong,div#\:\$p>svg>foreignObject>section :is(h6,marp-h6) strong{font-weight:inherit}div#\:\$p>svg>foreignObject>section :is(h1,marp-h1)::part(auto-scaling),div#\:\$p>svg>foreignObject>section :is(h2,marp-h2)::part(auto-scaling),div#\:\$p>svg>foreignObject>section :is(h3,marp-h3)::part(auto-scaling),div#\:\$p>svg>foreignObject>section :is(h4,marp-h4)::part(auto-scaling),div#\:\$p>svg>foreignObject>section :is(h5,marp-h5)::part(auto-scaling),div#\:\$p>svg>foreignObject>section :is(h6,marp-h6)::part(auto-scaling){max-height:580px}div#\:\$p>svg>foreignObject>section :is(h1,marp-h1){font-size:1.8em}div#\:\$p>svg>foreignObject>section :is(h2,marp-h2){font-size:1.5em}div#\:\$p>svg>foreignObject>section :is(h3,marp-h3){font-size:1.3em}div#\:\$p>svg>foreignObject>section :is(h4,marp-h4){font-size:1.1em}div#\:\$p>svg>foreignObject>section :is(h5,marp-h5){font-size:1em}div#\:\$p>svg>foreignObject>section :is(h6,marp-h6){font-size:.9em}div#\:\$p>svg>foreignObject>section blockquote,div#\:\$p>svg>foreignObject>section p{margin:1em 0 0}div#\:\$p>svg>foreignObject>section ol>li,div#\:\$p>svg>foreignObject>section ul>li{margin:.3em 0 0}div#\:\$p>svg>foreignObject>section ol>li>p,div#\:\$p>svg>foreignObject>section ul>li>p{margin:.6em 0 0}div#\:\$p>svg>foreignObject>section code{display:inline-block;font-family:Roboto Mono,monospace;font-size:.8em;letter-spacing:0;margin:-.1em .15em;padding:.1em .2em;vertical-align:baseline}div#\:\$p>svg>foreignObject>section :is(pre,marp-pre){display:block;margin:1em 0 0;overflow:visible}div#\:\$p>svg>foreignObject>section :is(pre,marp-pre) code{box-sizing:border-box;font-size:.7em;margin:0;min-width:100%;padding:.5em}div#\:\$p>svg>foreignObject>section :is(pre,marp-pre)::part(auto-scaling){max-height:calc(580px - 1em)}div#\:\$p>svg>foreignObject>section blockquote{margin:1em 0 0;padding:0 1em;position:relative}div#\:\$p>svg>foreignObject>section blockquote:after,div#\:\$p>svg>foreignObject>section blockquote:before{content:"“";display:block;font-family:Times New Roman,serif;font-weight:700;position:absolute}div#\:\$p>svg>foreignObject>section blockquote:before{left:0;top:0}div#\:\$p>svg>foreignObject>section blockquote:after{bottom:0;right:0;transform:rotate(180deg)}div#\:\$p>svg>foreignObject>section blockquote>:first-child{margin-top:0}div#\:\$p>svg>foreignObject>section mark{background:transparent}div#\:\$p>svg>foreignObject>section table{border-collapse:collapse;border-spacing:0;margin:1em 0 0}div#\:\$p>svg>foreignObject>section table td,div#\:\$p>svg>foreignObject>section table th{border-style:solid;border-width:1px;padding:.2em .4em}div#\:\$p>svg>foreignObject>section footer,div#\:\$p>svg>foreignObject>section header,div#\:\$p>svg>foreignObject>section:after{box-sizing:border-box;font-size:66%;height:70px;line-height:50px;overflow:hidden;padding:10px 25px;position:absolute}div#\:\$p>svg>foreignObject>section:after{--marpit-root-font-size:66%}div#\:\$p>svg>foreignObject>section header{top:0}div#\:\$p>svg>foreignObject>section footer,div#\:\$p>svg>foreignObject>section header{left:0;right:0}div#\:\$p>svg>foreignObject>section footer{bottom:0}div#\:\$p>svg>foreignObject>section{word-wrap:break-word;--color-background:#fff8e1;--color-background-stripe:rgba(69,90,100,.1);--color-foreground:#455a64;--color-dimmed:#6a7a7d;--color-highlight:#0288d1;background-color:var(--color-background);background-image:linear-gradient(135deg,hsla(0,0%,53%,0),hsla(0,0%,53%,.02) 50%,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.05));color:var(--color-foreground);font-family:Lato,Avenir Next,Avenir,Trebuchet MS,Segoe UI,sans-serif;font-size:35px;height:720px;letter-spacing:1.25px;line-height:1.35;padding:70px;width:1280px}div#\:\$p>svg>foreignObject>section{--marpit-root-font-size:35px}div#\:\$p>svg>foreignObject>section:after{bottom:0;font-size:80%;right:0}div#\:\$p>svg>foreignObject>section:after{--marpit-root-font-size:80%}div#\:\$p>svg>foreignObject>section a,div#\:\$p>svg>foreignObject>section mark{color:var(--color-highlight)}div#\:\$p>svg>foreignObject>section code{background:var(--color-dimmed);color:var(--color-background)}div#\:\$p>svg>foreignObject>section :is(h1,marp-h1) strong,div#\:\$p>svg>foreignObject>section :is(h2,marp-h2) strong,div#\:\$p>svg>foreignObject>section :is(h3,marp-h3) strong,div#\:\$p>svg>foreignObject>section :is(h4,marp-h4) strong,div#\:\$p>svg>foreignObject>section :is(h5,marp-h5) strong,div#\:\$p>svg>foreignObject>section :is(h6,marp-h6) strong{color:var(--color-highlight)}div#\:\$p>svg>foreignObject>section :is(pre,marp-pre){background:var(--color-foreground)}div#\:\$p>svg>foreignObject>section :is(pre,marp-pre)>code{background:transparent}div#\:\$p>svg>foreignObject>section blockquote:after,div#\:\$p>svg>foreignObject>section blockquote:before,div#\:\$p>svg>foreignObject>section footer,div#\:\$p>svg>foreignObject>section header,div#\:\$p>svg>foreignObject>section section:after{color:var(--color-dimmed)}div#\:\$p>svg>foreignObject>section table td,div#\:\$p>svg>foreignObject>section table th{border-color:var(--color-foreground)}div#\:\$p>svg>foreignObject>section table thead th{background:var(--color-foreground);color:var(--color-background)}div#\:\$p>svg>foreignObject>section table tbody>tr:nth-child(odd) td,div#\:\$p>svg>foreignObject>section table tbody>tr:nth-child(odd) th{background:var(--color-background-stripe,transparent)}div#\:\$p>svg>foreignObject>section>:first-child,div#\:\$p>svg>foreignObject>section>header:first-child+*{margin-top:0}div#\:\$p>svg>foreignObject>section:where(.invert){--color-background:#455a64;--color-background-stripe:rgba(255,248,225,.1);--color-foreground:#fff8e1;--color-dimmed:#dad8c8;--color-highlight:#81d4fa}div#\:\$p>svg>foreignObject>section:where(.gaia){--color-background:#0288d1;--color-background-stripe:rgba(255,248,225,.1);--color-foreground:#fff8e1;--color-dimmed:#cce2de;--color-highlight:#81d4fa}div#\:\$p>svg>foreignObject>section:where(.lead){display:flex;flex-flow:column nowrap;justify-content:center}div#\:\$p>svg>foreignObject>section:where(.lead) :is(h1,marp-h1),div#\:\$p>svg>foreignObject>section:where(.lead) :is(h2,marp-h2),div#\:\$p>svg>foreignObject>section:where(.lead) :is(h3,marp-h3),div#\:\$p>svg>foreignObject>section:where(.lead) :is(h4,marp-h4),div#\:\$p>svg>foreignObject>section:where(.lead) :is(h5,marp-h5),div#\:\$p>svg>foreignObject>section:where(.lead) :is(h6,marp-h6){text-align:center}div#\:\$p>svg>foreignObject>section:where(.lead) p{text-align:center}div#\:\$p>svg>foreignObject>section:where(.lead) blockquote>:is(h1,marp-h1),div#\:\$p>svg>foreignObject>section:where(.lead) blockquote>:is(h2,marp-h2),div#\:\$p>svg>foreignObject>section:where(.lead) blockquote>:is(h3,marp-h3),div#\:\$p>svg>foreignObject>section:where(.lead) blockquote>:is(h4,marp-h4),div#\:\$p>svg>foreignObject>section:where(.lead) blockquote>:is(h5,marp-h5),div#\:\$p>svg>foreignObject>section:where(.lead) blockquote>:is(h6,marp-h6),div#\:\$p>svg>foreignObject>section:where(.lead) blockquote>p{text-align:left}div#\:\$p>svg>foreignObject>section:where(.lead) ol>li>p,div#\:\$p>svg>foreignObject>section:where(.lead) ul>li>p{text-align:left}div#\:\$p>svg>foreignObject>section:where(.lead) table{margin-left:auto;margin-right:auto}div#\:\$p>svg>foreignObject>section marp-pre{border-radius:13px}div#\:\$p>svg>foreignObject>section code{border-radius:7px}div#\:\$p>svg>foreignObject>section .box{width:50%;text-align:left!important}div#\:\$p>svg>foreignObject>section .container{display:flex}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]{columns:initial!important;display:block!important;padding:0!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:before,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:before{display:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction=vertical]{flex-direction:column}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split]>div[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split,50%)}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split=right]>div[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure>figcaption{position:absolute;border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content],div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo]{background:transparent!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo],div#\:\$p>svg[data-marpit-svg]>foreignObject[data-marpit-advanced-background=pseudo]{pointer-events:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background-split]{width:100%;height:100%}</style></head><body><div class="bespoke-marp-osc"><button data-bespoke-marp-osc="prev" tabindex="-1" title="Previous slide">Previous slide</button><span data-bespoke-marp-osc="page"></span><button data-bespoke-marp-osc="next" tabindex="-1" title="Next slide">Next slide</button><button data-bespoke-marp-osc="fullscreen" tabindex="-1" title="Toggle fullscreen (f)">Toggle fullscreen</button><button data-bespoke-marp-osc="presenter" tabindex="-1" title="Open presenter view (p)">Open presenter view</button></div><div id=":$p"><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="1" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="1" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h1 id="css">CSS</h1>
<h2 id="%E8%AC%9B%E5%B8%AB%E6%AF%9B%E5%93%A5em">講師：毛哥EM</h2>
<p>西苑高中資訊志工隊提供</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="2" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="2" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h1 id="css%E7%B0%A1%E4%BB%8B">css簡介</h1>
<h3 id="%E4%B8%BB%E8%A6%81%E5%8A%9F%E8%83%BD%E7%BE%8E%E8%A7%80%E7%B6%B2%E7%AB%99">主要功能:美觀網站</h3>
<p><img src="img%5C%E9%AA%A8%E6%9E%B6%E3%80%81%E5%A4%96%E8%A7%80%E3%80%81%E8%A1%8C%E7%82%BA.png" alt="HTML,css,js" style="width:450px;" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="3" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="3" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h1 style="color:red;">範例</h1>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-css"><span class="hljs-selector-tag">h1</span>{
<span class="hljs-attribute">color</span>: red;
}
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="4" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="4" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h1 id="%E5%AF%AB%E5%9C%A8%E5%93%AA%E8%A3%A1">寫在哪裡?</h1>
<ul>
<li>在HTML建立<code><style></code>裡面(通常放在<code><head></code>裡面)</li>
<li>創一個css檔案，並連結到HTML(link)</li>
</ul>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"style.css"</span>></span>
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="5" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("img%5Ccss_selector%E7%AF%84%E4%BE%8B.png");background-size:90%;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="5" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="5" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1 id="%E4%B8%80%E5%80%8Bcss%E5%8C%85%E5%90%AB">一個CSS包含</h1>
<ul>
<li>selector:選擇器 (對象)</li>
<li>declaration:宣告</li>
<li>property:屬性 (要改的東西)</li>
<li>value:屬性值</li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="5" style="" data-marpit-pagination-total="57" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="6" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="6" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h1 id="%E9%81%B8%E5%8F%96%E5%99%A8">選取器</h1>
<ol>
<li><code>.</code>選擇class</li>
<li><code>#</code>選擇id</li>
<li>所有後代:<code>*</code></li>
</ol>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="7" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="7" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h1 id="%E6%96%87%E5%AD%97">文字</h1>
<div class="container">
<div class="box">
<p><code>color</code>:顏色<br />
<code>font-size</code>:字體大小<br />
<code>letter-spacing</code>:字和字之間的距離<br />
<code>line-height</code>:行高<br />
<code>font-weight</code>:字體粗細<br />
<code>text-decoration</code>: 文字裝飾<br />
<code>font-style</code>:字型<br />
<code>opacity</code>:透明度<br />
<code>text-align</code>:文字位置<br />
<code>font-family</code>:字體</p>
</div>
<div class="box">
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-css">`<span class="hljs-attribute">color</span>`: <span class="hljs-number">#FFF</span>;
`<span class="hljs-attribute">font-size</span>`: <span class="hljs-number">10px</span>;
`<span class="hljs-attribute">letter-spacing</span>`: <span class="hljs-number">2</span>;
`<span class="hljs-attribute">line-height</span>`: <span class="hljs-number">20px</span>;
`<span class="hljs-attribute">font-weight</span>`: <span class="hljs-number">500</span>;
`<span class="hljs-attribute">text-decoration</span>`: none;
`<span class="hljs-attribute">font-style</span>`: italic;
`<span class="hljs-attribute">opacity</span>`: <span class="hljs-number">0.5</span>;
`<span class="hljs-attribute">text-align</span>`: left;
`<span class="hljs-attribute">font-family</span>`:微軟正黑體;
</code></pre>
</div>
</div>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="8" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="8" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h1 id="%E6%96%87%E5%AD%97%E7%B2%97%E5%BA%A6-font-weight">文字粗度 font-weight</h1>
<p>關鍵字</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-css"><span class="hljs-attribute">font-weight</span>: normal; <span class="hljs-comment">/* 正常 */</span>
<span class="hljs-attribute">font-weight</span>: bold; <span class="hljs-comment">/* 粗 */</span>
<span class="hljs-attribute">font-weight</span>: lighter; <span class="hljs-comment">/* 細一點 */</span>
<span class="hljs-attribute">font-weight</span>: bolder; <span class="hljs-comment">/* 粗一點 */</span>
</code></pre>
<p>絕對的數值</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-css"><span class="hljs-attribute">font-weight</span>: <span class="hljs-number">100</span>;
<span class="hljs-attribute">font-weight</span>: <span class="hljs-number">400</span>; <span class="hljs-comment">/* 正常 */</span>
<span class="hljs-attribute">font-weight</span>: <span class="hljs-number">700</span>; <span class="hljs-comment">/* 粗體 */</span>
<span class="hljs-attribute">font-weight</span>: <span class="hljs-number">900</span>;
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="9" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="9" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h1 id="text-decoration">text-decoration</h1>
<p>常用於消除超連結的<a href="">藍色底線</a></p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-css"><span class="hljs-attribute">text-decoration</span>: underline; <span class="hljs-comment">/* 底線 */</span>
<span class="hljs-attribute">text-decoration</span>: overline red; <span class="hljs-comment">/* 劃過的線 */</span>
<span class="hljs-attribute">text-decoration</span>: none; <span class="hljs-comment">/* 不要 */</span>
<span class="hljs-attribute">text-decoration-color</span>: <span class="hljs-number">#ff00ff</span>; <span class="hljs-comment">/* 線顏色 */</span>
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="10" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="10" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h1 id="%E8%83%8C%E6%99%AF%E5%9C%96%E7%89%87">背景圖片</h1>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-css"><span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">./image/cloud.png</span>); <span class="hljs-comment">/* 背景圖片 */</span>
<span class="hljs-attribute">background-repeat</span>: no-repeat; <span class="hljs-comment">/* 背景重複 */</span>
<span class="hljs-attribute">background-size</span>: cover; <span class="hljs-comment">/* 高填滿 */</span>
<span class="hljs-attribute">background-size</span>: contain; <span class="hljs-comment">/* 寬填滿 */</span>
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="11" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="11" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-css"><span class="hljs-attribute">background-position</span>: top left;
<span class="hljs-attribute">background-position</span>: <span class="hljs-number">20%</span> <span class="hljs-number">40%</span>; <span class="hljs-comment">/*從左上開始算*/</span>
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="12" data-marpit-fragments="3" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="12" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h1 id="%E9%A1%8F%E8%89%B2%E8%A1%A8%E7%A4%BA%E6%B3%95">顏色表示法</h1>
<ul>
<li data-marpit-fragment="1">RGB/RGBA</li>
<li data-marpit-fragment="2">HEX</li>
<li data-marpit-fragment="3">HSL</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="13" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="13" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h1 id="rgbrgba">RGB/RGBA</h1>
<ul>
<li>R : Red</li>
<li>G : Green</li>
<li>B : Blue</li>
<li>A : Alpha(透明度)</li>
</ul>
<p>R,G,B參數範圍為0~255，表示在此顏色的不透明度為何。介於0~1之間</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code>範例:半透明紫色
rgba(160,32,240,0.5)
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="14" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="14" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h1 id="hex">HEX</h1>
<h2 id="%E5%85%B6%E5%AF%A6%E4%BB%96%E5%92%8Crgb%E6%9C%89%E9%97%9C%E4%BF%82">其實他和RGB有關係</h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-marpit-fragments="2" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="15" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("img%5CHEX.png");background-size:auto 50%;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="15" data-marpit-fragments="2" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="15" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h3 id="%E5%8D%81%E5%85%AD%E9%80%B2%E4%BD%8Dhexadecimal">(十六進位（hexadecimal）)</h3>
<ul>
<li>0 代表最低（如同 RGB 中的 0）</li>
<li>8 代表中間</li>
<li>9 之後是 A</li>
<li>F 代表最高（如同 RGB 中的 255）</li>
</ul>
<ul>
<li data-marpit-fragment="1">黑色:#000000</li>
<li data-marpit-fragment="2">白色:#ffffff</li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-marpit-fragments="2" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="15" style="" data-marpit-pagination-total="57" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="16" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="16" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h1 id="hsl">HSL</h1>
<ul>
<li>H : hue 色相 (0是紅色120是綠色240是藍色)</li>
<li>S : saturation 彩度、飽和度(以白色缺乏程度表示，100%表示沒有白色)</li>
<li>L : lightness 明度<br />
<img src="img%5C%E8%89%B2%E5%BD%A9%E6%98%8E%E5%BA%A6.png" alt="" style="width:30em;" /></li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="17" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="17" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h1 id="%E5%96%AE%E4%BD%8D">單位</h1>
<h2 id="px">px</h2>
<h2 id="em">em</h2>
<h2 id="rem">rem</h2>
<h2 id="vwvh">vw/vh</h2>
<h2 id="">%</h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="18" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("img%5Cpx%E7%A4%BA%E6%84%8F%E5%9C%96.png");"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="18" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="18" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1 id="px-%E7%9B%B8%E5%B0%8D%E9%A1%AF%E7%A4%BA%E5%99%A8%E7%9A%84%E8%A7%A3%E6%9E%90%E5%BA%A6%E7%82%BA%E7%B5%95%E5%B0%8D%E5%96%AE%E4%BD%8Dpixel">px :相對顯示器的解析度，為絕對單位(pixel)</h1>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="18" style="" data-marpit-pagination-total="57" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="19" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("img%5Cem%E7%A4%BA%E6%84%8F%E5%9C%96.png");background-size:auto 99%;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="19" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="19" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1 id="em--%E7%9B%B8%E5%B0%8D%E7%88%B6%E5%85%83%E7%B4%A0%E7%9A%84m%E5%AF%AC%E5%BA%A6%E9%A0%90%E8%A8%AD16px">em : 相對父元素的m寬度(預設16px)</h1>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="19" style="" data-marpit-pagination-total="57" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="20" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("img%5Crem%E7%A4%BA%E6%84%8F%E5%9C%96.png");background-size:99% auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="20" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="20" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1 id="rem--%E7%9B%B8%E5%B0%8D%E6%A0%B9%E5%85%83%E7%B4%A0%E7%9A%84m%E5%AF%AC%E5%BA%A6%E9%A0%90%E8%A8%AD16px">rem : 相對根元素的m寬度(預設16px)</h1>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="20" style="" data-marpit-pagination-total="57" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="21" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="21" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h1 id="vwvh--viewport%E8%A6%96%E5%8F%A3%E5%AF%AC%E9%95%B7%E5%BA%A6">vw/vh : viewport（視口）寬/長度</h1>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="22" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("img/%25%E7%A4%BA%E6%84%8F%E5%9C%96.png");"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="22" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="22" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1 id="-1">%</h1>
<h3 id="1-width%E8%B7%9Fheight%E7%9A%84%E5%9F%BA%E6%BA%96%E6%98%AF%E7%88%B6%E5%B1%A4">1. width跟height的%基準是父層</h3>
<h3 id="2-line-height%E4%BB%A5%E6%9C%AC%E8%BA%AB%E6%96%87%E5%AD%97%E8%A1%8C%E9%AB%98%E7%82%BA%E5%9F%BA%E6%BA%96">2. line-height以本身文字行高為基準</h3>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="22" style="" data-marpit-pagination-total="57" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="23" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="23" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h1 id="box">box</h1>
<ol>
<li>漸層</li>
<li>Padding</li>
<li>Grandient</li>
</ol>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="24" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="24" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h1 id="box%E6%98%AF%E4%BB%80%E9%BA%BC">box是什麼?</h1>
<p>html的每個元素都可被視作為一個盒子，然後可以針對這個盒子去做調整。</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="25" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://i.imgur.com/vxm8vFhm.png");background-size:99% auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="25" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="25" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1 id="box-sizing">box-sizing</h1>
<p><code>box-sizing</code> 是設定物件尺寸的計算方式。</p>
<ol>
<li><code>box-sizing:content-box</code> (content area)</li>
<li><code>box-sizing:border-box</code> （content area+padding+border）<br />
</li>
</ol>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="25" style="" data-marpit-pagination-total="57" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-marpit-fragments="2" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="26" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://i1.kknews.cc/7ZSMA_iSst3TDMprjKJ9eMGgBC-PLnzhhv-n3YFRDUk/0.jpg");background-size:99% auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="26" data-marpit-fragments="2" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="26" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<ul>
<li data-marpit-fragment="1">所以在 block 元素中只要設定 <code>box-sizing:border-box;</code> 就不用另外再計算padding、border 的寬度。</li>
<li data-marpit-fragment="2">假設 width:300px, padding 就算加了 20px, border 加了4px，寬度依舊是300px。<br />
</li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-marpit-fragments="2" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="26" style="" data-marpit-pagination-total="57" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="27" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="27" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h1 id="padding">Padding</h1>
<p>padding 的用途是設定物件邊框(border) 內與資料之間的留白空間，常見的翻譯是稱之為「內距」，讓你的資料不致於貼著邊框線。</p>
<ol>
<li><strong>注意!</strong> Padding 預設會增加物件的可見尺寸!</li>
<li>若你對該物件設定了 padding 之後，padding 的空間則是會添加到 width 之外，所以物件的尺寸就變成了 「width + padding 」</li>
</ol>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="28" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="28" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-css"><span class="hljs-comment">/*四個值，個別指定*/</span>
<span class="hljs-attribute">padding</span>: 上 右 下 左;
<span class="hljs-comment">/*三個值，左右採用同一個值，上下則分開指定*/</span>
<span class="hljs-attribute">padding</span>: 上 [右左] 下;
<span class="hljs-comment">/*二個值，【上下】採用同一值，【左右】採用同一值*/</span>
<span class="hljs-attribute">padding</span>: [上下] [右左];
<span class="hljs-comment">/*一個值，【上下左右】都使用相同的值*/</span>
<span class="hljs-attribute">padding</span>: [上右下左];
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="29" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="29" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h1 id="%E6%BC%B8%E5%B1%A4">漸層</h1>
<p>1.漸層需要顏色跟角度<br />
2. 可分為<strong>線性漸層</strong>跟<strong>放射漸層</strong><br />
3. 可以指定每個顏色的比例<br />
4. 可以決定漸層位置跟大小</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="30" data-marpit-fragments="7" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="30" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h2 id="%E7%B7%9A%E6%80%A7%E6%BC%B8%E5%B1%A4linear-gradient">線性漸層linear-gradient</h2>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-css"><span class="hljs-attribute">background</span>:<span class="hljs-built_in">linear-gradient</span>(方向, 顏色<span class="hljs-number">1</span> 位置, 顏色<span class="hljs-number">2</span> 位置);
</code></pre>
<ul>
<li data-marpit-fragment="1">角度
<ul>
<li data-marpit-fragment="2">如果沒有設定角度，預設從上往下進行漸層。</li>
</ul>
</li>
<li data-marpit-fragment="3">位置
<ul>
<li data-marpit-fragment="4">0% 表示起始邊界，100% 表示結束邊界 ( 邊界為填色的區外邊界 )。</li>
<li data-marpit-fragment="5">如果沒有指定參數，則會自動等比例分配。</li>
<li data-marpit-fragment="6">如果沒有指定第一個參數，預設 0%。</li>
<li data-marpit-fragment="7">如果沒有指定最後一個參數，預設 100%。</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="31" data-marpit-fragments="3" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="31" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<ul>
<li data-marpit-fragment="1">顏色位置重疊
<ul>
<li data-marpit-fragment="2">如果兩種顏色位置重疊，結果將會直接呈現兩種顏色交界，若前後邊界沒有設定顏色，則會以最靠近該邊界的顏色補滿。</li>
</ul>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-css"><span class="hljs-attribute">background</span>:<span class="hljs-built_in">linear-gradient</span>(<span class="hljs-number">45deg</span>, red <span class="hljs-number">50%</span>, black <span class="hljs-number">50%</span>);
</code></pre>
<ul>
<li data-marpit-fragment="3"><img src="https://www.oxxostudio.tw/img/articles/202008/css-gradient-03.jpg" alt="gradient" /></li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="32" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="32" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h2 id="%E6%94%BE%E5%B0%84%E6%BC%B8%E5%B1%A4radial-gradient">放射漸層Radial Gradient</h2>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-css"><span class="hljs-attribute">background</span>: <span class="hljs-built_in">radial-gradient</span>( 形狀 範圍 at 中心位置, 顏色 色彩位置, 顏色 色彩位置,...);
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="33" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://user-images.githubusercontent.com/115127388/230543074-7827cfe7-5992-47cb-b54f-3baeb380b614.png");background-size:99% auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="33" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="33" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<ol>
<li>圓形</li>
</ol>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-css"> <span class="hljs-attribute">background</span>:<span class="hljs-built_in">radial-gradient</span>(circle at center,顏色<span class="hljs-number">1</span>,顏色<span class="hljs-number">2</span>);
</code></pre>
<ol start="2">
<li>橢圓形</li>
</ol>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-css"><span class="hljs-attribute">background</span>:<span class="hljs-built_in">radial-gradient</span>(ellipse at center,顏色<span class="hljs-number">1</span>,顏色<span class="hljs-number">2</span>);
</code></pre>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="33" style="" data-marpit-pagination-total="57" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="34" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="34" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h1 id="%E8%83%8C%E6%99%AFbackground">背景background</h1>
<ol>
<li>background-color: 背景顏色</li>
</ol>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code>background-color:FF0000
background-color:red; /* 背景為紅色 */
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="35" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="35" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h1 id="%E9%81%B8%E6%93%87%E5%99%A8">選擇器</h1>
<p>CSS可以用來控制元素，但要先用選擇器來選擇要誰控制</p>
<p>所有後代: <code>*</code><br />
後代選擇器: <code>nav a</code><br />
群組選擇器: <code>nav, a</code><br />
親代選擇器: <code>ol > li</code> (只能在裡面一層)<br />
相鄰兄弟: <code>h1 + p</code>(後面的第一個)<br />
一般兄弟: <code>h1 ~ p</code>(後面的)<br />
屬性選擇器: <code>input[type="text"]</code></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="36" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="36" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h1 id="%E6%AC%8A%E9%87%8D">權重</h1>
<p>你媽說你很醜，早餐店阿姨說你是帥哥，你就是醜，因為你媽權重比較重。</p>
<p>從上比下來。這裡有一個計算機</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code> !important
ID 選擇器
類別選擇器、屬性選擇器、偽類選擇器(如:root)
元素選擇器、偽元素選擇器
任何元素選擇符*沒有權級
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="37" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="37" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h1 id="display">display</h1>
<p>中文：顯示</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="38" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("img/meme/pikachu.jpg");background-size:90%;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="38" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="38" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1 id="display-1">display</h1>
<p><code>display: inline;</code> - 行內元素<br />
<code>display: block;</code> - 區塊元素<br />
<code>display: inline-block;</code> - 行內但保留區塊元素特性<br />
<code>display: none;</code> - 變不見(且不佔原本空間)</p>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="38" style="" data-marpit-pagination-total="57" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="39" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("img/flex.png");background-size:55%;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="39" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="39" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57" data-marpit-advanced-background="content">
<h1 id="displayflex">display:flex;</h1>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="39" style="" data-marpit-pagination-total="57" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="40" data-marpit-fragments="6" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="40" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h2 id="flex-%E5%A4%96%E5%AE%B9%E5%99%A8%E5%B1%AC%E6%80%A7">Flex 外容器屬性</h2>
<ul>
<li data-marpit-fragment="1">display</li>
<li data-marpit-fragment="2">flex-flow</li>
<li data-marpit-fragment="3">flex-direction</li>
<li data-marpit-fragment="4">flex-wrap</li>
<li data-marpit-fragment="5">justify-content</li>
<li data-marpit-fragment="6">align-items</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="41" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("img/flex-direction.png");background-size:90%;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="41" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="41" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1 id="flex-direction">flex-direction</h1>
<p>怎麼排</p>
<p>左到右、右到左、上到下、下到上。<br />
</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-css"><span class="hljs-selector-class">.flex-container</span> {
<span class="hljs-attribute">flex-direction</span>: row;
<span class="hljs-attribute">flex-direction</span>: row-reverse;
<span class="hljs-attribute">flex-direction</span>: column;
<span class="hljs-attribute">flex-direction</span>: column-reverse;
}
</code></pre>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="41" style="" data-marpit-pagination-total="57" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="42" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("img/flex-wrap.png");background-size:90%;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="42" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="42" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1 id="flex-wrap">flex-wrap</h1>
<p>超出範圍是否換行</p>
<p>換行、不換行、換行時反轉。</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-css"><span class="hljs-selector-class">.flex-container</span> {
<span class="hljs-attribute">flex-wrap</span>: nowrap;
<span class="hljs-attribute">flex-wrap</span>: wrap;
<span class="hljs-attribute">flex-wrap</span>: wrap-reverse;
}
</code></pre>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="42" style="" data-marpit-pagination-total="57" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="lead" data-paginate="true" data-background-color="#cce8fd" data-background-image="none" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="43" style="--class:lead;--paginate:true;--background-color:#cce8fd;--background-image:none;--theme:gaia;background-color:#cce8fd;background-image:none;background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("img/meme/combine.png");"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="43" data-class="lead" data-paginate="true" data-background-color="#cce8fd" data-background-image="none" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="43" style="--class:lead;--paginate:true;--background-color:#cce8fd;--background-image:none;--theme:gaia;background-color:#cce8fd;background-image:none;background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1 id="flex-flow">flex-flow</h1>
<p>懶人縮寫</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-css"><span class="hljs-selector-class">.flex-container</span> {
<span class="hljs-attribute">flex-flow</span>: 方向 換行;
}
</code></pre>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-class="lead" data-paginate="true" data-background-color="#cce8fd" data-background-image="none" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="43" style="" data-marpit-pagination-total="57" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="44" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("img/flex-justify-content.png");background-size:90%;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="44" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="44" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1 id="justify-content">justify-content</h1>
<p>水平對齊</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-css"><span class="hljs-selector-class">.flex-container</span> {
<span class="hljs-attribute">justify-content</span>: flex-start;
<span class="hljs-attribute">justify-content</span>: flex-end;
<span class="hljs-attribute">justify-content</span>: center;
<span class="hljs-attribute">justify-content</span>: space-between;
<span class="hljs-attribute">justify-content</span>: space-around;
}
</code></pre>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="44" style="" data-marpit-pagination-total="57" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="45" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("img/flex-align-items.png");background-size:90%;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="45" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="45" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1 id="align-items">align-items</h1>
<p>垂直對齊</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-css"><span class="hljs-selector-class">.flex-container</span> {
<span class="hljs-attribute">align-items</span>: flex-start;
<span class="hljs-attribute">align-items</span>: flex-end;
<span class="hljs-attribute">align-items</span>: center;
<span class="hljs-attribute">align-items</span>: baseline;
<span class="hljs-attribute">align-items</span>: stretch;
}
</code></pre>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="45" style="" data-marpit-pagination-total="57" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="46" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("img/flex-align-content.png");background-size:90%;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="46" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="46" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1 id="align-content">align-content</h1>
<p>整體對齊</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-css"><span class="hljs-attribute">flex</span>-container {
<span class="hljs-attribute">align-content</span>: flex-start;
<span class="hljs-attribute">align-content</span>: flex-end;
<span class="hljs-attribute">align-content</span>: center;
<span class="hljs-attribute">align-content</span>: space-between;
<span class="hljs-attribute">align-content</span>: space-around;
<span class="hljs-attribute">align-content</span>: stretch;
}
</code></pre>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="46" style="" data-marpit-pagination-total="57" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="47" data-class="lead" data-paginate="true" data-background-color="#1f5768" data-background-image="none" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="47" style="--class:lead;--paginate:true;--background-color:#1f5768;--background-image:none;--theme:gaia;background-color:#1f5768;background-image:none;background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<p><a href="https://flexboxfroggy.com/#zh-tw"><img src="https://flexboxfroggy.com/images/frog-green.svg" alt="" /><br />
<span style="color:#FFF;font-size:3rem;">送青蛙回家吧</span></a></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="48" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="48" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h1 id="position">Position</h1>
<p>物件定位時所要的參考對像</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-css"><span class="hljs-attribute">position</span>:static | relative | absolute | fixed | sticky;
<span class="hljs-attribute">top</span>:<span class="hljs-number">10px</span>;
<span class="hljs-attribute">right</span>:<span class="hljs-number">10px</span>;
<span class="hljs-attribute">bottom</span>:<span class="hljs-number">10px</span>;
<span class="hljs-attribute">left</span>:<span class="hljs-number">10px</span>;
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="49" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="49" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h3 id="static-%E5%8E%9F%E5%A7%8B%E5%AE%9A%E4%BD%8D">static 原始定位</h3>
<p>正常<br />
inline往右，block往下</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="50" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://i.imgur.com/H1Vru7P.png");background-size:contain;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="50" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="50" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57" data-marpit-advanced-background="content">
<h3 id="reletive-%E7%9B%B8%E5%B0%8D%E5%AE%9A%E4%BD%8D">reletive 相對定位</h3>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="50" style="" data-marpit-pagination-total="57" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="51" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="51" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h3 id="absolute-%E7%B5%95%E5%B0%8D%E5%AE%9A%E4%BD%8D">absolute 絕對定位</h3>
<p>貼到最近的reletive祖先元素。</p>
<blockquote>
<p>口訣:父相子絕</p>
</blockquote>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-css"><span class="hljs-selector-class">.parent</span> {
<span class="hljs-attribute">position</span>: relative;
}
<span class="hljs-selector-class">.child</span> {
<span class="hljs-attribute">position</span>: absolute;
<span class="hljs-attribute">left</span>:<span class="hljs-number">50%</span>;
}
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="52" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://media.giphy.com/media/LRs2BIsDx1WjzSdIAJ/giphy.gif");background-size:90%;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="52" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="52" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h2 id="fixed">fixed</h2>
<p>貼著視窗，卡在那裡，原本位置不再佔據</p>
<h2 id="sticky">sticky</h2>
<p>以自己為基準，卡在那裡，但sticky元素仍然in flow，元素佔位會保留<br />
</p>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="52" style="" data-marpit-pagination-total="57" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="53" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="53" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h1 id="transform-translate">Transform: translate</h1>
<p>平移元素</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-css"><span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translate</span>(單位或百分比, 單位或百分比);
<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translateX</span>(單位或百分比);
<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translateY</span>(單位或百分比);
</code></pre>
<p>單位值為多少就平移多少，transform支援負值</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="54" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://i.imgur.com/IFdDGiC.png");background-size:90%;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="54" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="54" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-css"><span class="hljs-selector-class">.translate</span> {
<span class="hljs-attribute">background-color</span>: pink;
<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translate</span>(<span class="hljs-number">100px</span>, -<span class="hljs-number">50px</span>);
}
</code></pre>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="54" style="" data-marpit-pagination-total="57" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="55" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="vertical"><figure style="background-image:url("https://i.imgur.com/jM1Hazt.png");background-size:90%;"></figure><figure style="background-image:url("https://i.imgur.com/Gswm945.png");background-size:90%;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="55" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="55" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<p>translate的百分比基準是自己的width跟height</p>
<p>來一個推方塊範例</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-css"><span class="hljs-selector-class">.outer</span> {
<span class="hljs-attribute">position</span>: relative;
}
<span class="hljs-selector-tag">img</span> {
<span class="hljs-attribute">position</span>: absolute;
<span class="hljs-attribute">top</span>:<span class="hljs-number">50%</span>;
<span class="hljs-attribute">left</span>: <span class="hljs-number">50%</span>;
}
</code></pre>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="55" style="" data-marpit-pagination-total="57" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="56" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://i.imgur.com/YeDUST3.png");background-size:90%;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="56" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="56" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="57" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<p>再來往左上推: <code>transform: translate(-50%, -50%);</code></p>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="56" style="" data-marpit-pagination-total="57" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="57" data-class="lead" data-paginate="true" data-background-color="#fff" data-background-image="url("釣魚網站.jpg")" data-theme="gaia" lang="zh-TW" class="lead" data-marpit-pagination="57" style="--class:lead;--paginate:true;--background-color:#fff;--background-image:url("釣魚網站.jpg");--theme:gaia;background-color:#fff;background-image:url("釣魚網站.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="57">
<h1 id="%E4%BE%86%E5%BF%AB%E6%A8%82%E6%8E%92%E7%89%88%E5%90%A7">來快樂排版吧</h1>
<p>網頁設計幾乎所有時間都花在這裡<br />
很多問題沒有標準做法<br />
多多練習就會找到自己習慣的方式</p>
</section>
<script>!function(){"use strict";const t={h1:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"1"},style:"display: block; font-size: 2em; margin-block-start: 0.67em; margin-block-end: 0.67em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h2:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"2"},style:"display: block; font-size: 1.5em; margin-block-start: 0.83em; margin-block-end: 0.83em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h3:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"3"},style:"display: block; font-size: 1.17em; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h4:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"4"},style:"display: block; margin-block-start: 1.33em; margin-block-end: 1.33em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h5:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"5"},style:"display: block; font-size: 0.83em; margin-block-start: 1.67em; margin-block-end: 1.67em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h6:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"6"},style:"display: block; font-size: 0.67em; margin-block-start: 2.33em; margin-block-end: 2.33em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},span:{proto:()=>HTMLSpanElement},pre:{proto:()=>HTMLElement,style:"display: block; font-family: monospace; white-space: pre; margin: 1em 0; --marp-auto-scaling-white-space: pre;"}},e="data-marp-auto-scaling-wrapper",i="data-marp-auto-scaling-svg",n="data-marp-auto-scaling-container";class s extends HTMLElement{constructor(){super(),this.svgPreserveAspectRatio="xMinYMid meet";const t=t=>([e])=>{const{width:i,height:n}=e.contentRect;this[t]={width:i,height:n},this.updateSVGRect()};this.attachShadow({mode:"open"}),this.containerObserver=new ResizeObserver(t("containerSize")),this.wrapperObserver=new ResizeObserver(((...e)=>{t("wrapperSize")(...e),this.flushSvgDisplay()}))}static get observedAttributes(){return["data-downscale-only"]}connectedCallback(){var t,s,o,r,a;this.shadowRoot.innerHTML=`\n<style>\n svg[${i}] { display: block; width: 100%; height: auto; vertical-align: top; }\n span[${n}] { display: table; white-space: var(--marp-auto-scaling-white-space, nowrap); width: max-content; }\n</style>\n<div ${e}>\n <svg part="svg" ${i}>\n <foreignObject><span ${n}><slot></slot></span></foreignObject>\n </svg>\n</div>\n `.split(/\n\s*/).join(""),this.wrapper=null!==(t=this.shadowRoot.querySelector(`div[${e}]`))&&void 0!==t?t:void 0;const l=this.svg;this.svg=null!==(o=null===(s=this.wrapper)||void 0===s?void 0:s.querySelector(`svg[${i}]`))&&void 0!==o?o:void 0,this.svg!==l&&(this.svgComputedStyle=this.svg?window.getComputedStyle(this.svg):void 0),this.container=null!==(a=null===(r=this.svg)||void 0===r?void 0:r.querySelector(`span[${n}]`))&&void 0!==a?a:void 0,this.observe()}disconnectedCallback(){this.svg=void 0,this.svgComputedStyle=void 0,this.wrapper=void 0,this.container=void 0,this.observe()}attributeChangedCallback(){this.observe()}flushSvgDisplay(){const{svg:t}=this;t&&(t.style.display="inline",requestAnimationFrame((()=>{t.style.display=""})))}observe(){this.containerObserver.disconnect(),this.wrapperObserver.disconnect(),this.wrapper&&this.wrapperObserver.observe(this.wrapper),this.container&&this.containerObserver.observe(this.container),this.svgComputedStyle&&this.observeSVGStyle(this.svgComputedStyle)}observeSVGStyle(t){const e=()=>{const i=(()=>{const e=t.getPropertyValue("--preserve-aspect-ratio");if(e)return e.trim();return`x${(({textAlign:t,direction:e})=>{if(t.endsWith("left"))return"Min";if(t.endsWith("right"))return"Max";if("start"===t||"end"===t){let i="rtl"===e;return"end"===t&&(i=!i),i?"Max":"Min"}return"Mid"})(t)}YMid meet`})();i!==this.svgPreserveAspectRatio&&(this.svgPreserveAspectRatio=i,this.updateSVGRect()),t===this.svgComputedStyle&&requestAnimationFrame(e)};e()}updateSVGRect(){var t,e,i,n,s,o,r;let a=Math.ceil(null!==(e=null===(t=this.containerSize)||void 0===t?void 0:t.width)&&void 0!==e?e:0);const l=Math.ceil(null!==(n=null===(i=this.containerSize)||void 0===i?void 0:i.height)&&void 0!==n?n:0);void 0!==this.dataset.downscaleOnly&&(a=Math.max(a,null!==(o=null===(s=this.wrapperSize)||void 0===s?void 0:s.width)&&void 0!==o?o:0));const c=null===(r=this.svg)||void 0===r?void 0:r.querySelector(":scope > foreignObject");if(null==c||c.setAttribute("width",`${a}`),null==c||c.setAttribute("height",`${l}`),this.svg&&(this.svg.setAttribute("viewBox",`0 0 ${a} ${l}`),this.svg.setAttribute("preserveAspectRatio",this.svgPreserveAspectRatio),this.svg.style.height=a<=0||l<=0?"0":""),this.container){const t=this.svgPreserveAspectRatio.toLowerCase();this.container.style.marginLeft=t.startsWith("xmid")||t.startsWith("xmax")?"auto":"0",this.container.style.marginRight=t.startsWith("xmi")?"auto":"0"}}}const o=(t,{attrs:e={},style:i})=>class extends t{constructor(...t){super(...t);for(const[t,i]of Object.entries(e))this.hasAttribute(t)||this.setAttribute(t,i);this.attachShadow({mode:"open"})}static get observedAttributes(){return["data-auto-scaling"]}connectedCallback(){this._update()}attributeChangedCallback(){this._update()}_update(){const t=i?`<style>:host { ${i} }</style>`:"";let e="<slot></slot>";const{autoScaling:n}=this.dataset;if(void 0!==n){e=`<marp-auto-scaling exportparts="svg:auto-scaling" ${"downscale-only"===n?"data-downscale-only":""}>${e}</marp-auto-scaling>`}this.shadowRoot.innerHTML=t+e}};let r;const a=Symbol();let l;const c="marpitSVGPolyfill:setZoomFactor,",d=Symbol(),g=Symbol();const h=()=>{const t="Apple Computer, Inc."===navigator.vendor,e=t?[u]:[],i={then:e=>(t?(async()=>{if(void 0===l){const t=document.createElement("canvas");t.width=10,t.height=10;const e=t.getContext("2d"),i=new Image(10,10),n=new Promise((t=>{i.addEventListener("load",(()=>t()))}));i.crossOrigin="anonymous",i.src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%201%201%22%3E%3CforeignObject%20width%3D%221%22%20height%3D%221%22%20requiredExtensions%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20style%3D%22width%3A%201px%3B%20height%3A%201px%3B%20background%3A%20red%3B%20position%3A%20relative%22%3E%3C%2Fdiv%3E%3C%2FforeignObject%3E%3C%2Fsvg%3E",await n,e.drawImage(i,0,0),l=e.getImageData(5,5,1,1).data[3]<128}return l})().then((t=>{null==e||e(t?[u]:[])})):null==e||e([]),i)};return Object.assign(e,i)};let p,m;function u(t){const e="object"==typeof t&&t.target||document,i="object"==typeof t?t.zoom:t;window[g]||(Object.defineProperty(window,g,{configurable:!0,value:!0}),document.body.style.zoom=1.0001,document.body.offsetHeight,document.body.style.zoom=1,window.addEventListener("message",(({data:t,origin:e})=>{if(e===window.origin)try{if(t&&"string"==typeof t&&t.startsWith(c)){const[,e]=t.split(","),i=Number.parseFloat(e);Number.isNaN(i)||(m=i)}}catch(t){console.error(t)}})));let n=!1;Array.from(e.querySelectorAll("svg[data-marpit-svg]"),(t=>{var e,s,o,r;t.style.transform||(t.style.transform="translateZ(0)");const a=i||m||t.currentScale||1;p!==a&&(p=a,n=a);const l=t.getBoundingClientRect(),{length:c}=t.children;for(let i=0;i<c;i+=1){const n=t.children[i];if(n.getScreenCTM){const t=n.getScreenCTM();if(t){const i=null!==(s=null===(e=n.x)||void 0===e?void 0:e.baseVal.value)&&void 0!==s?s:0,c=null!==(r=null===(o=n.y)||void 0===o?void 0:o.baseVal.value)&&void 0!==r?r:0,d=n.children.length;for(let e=0;e<d;e+=1){const s=n.children[e];if("SECTION"===s.tagName){const{style:e}=s;e.transformOrigin||(e.transformOrigin=`${-i}px ${-c}px`),e.transform=`scale(${a}) matrix(${t.a}, ${t.b}, ${t.c}, ${t.d}, ${t.e-l.left}, ${t.f-l.top}) translateZ(0.0001px)`;break}}}}}})),!1!==n&&Array.from(e.querySelectorAll("iframe"),(({contentWindow:t})=>{null==t||t.postMessage(`${c}${n}`,"null"===window.origin?"*":window.origin)}))}function v({once:t=!1,target:e=document}={}){const i=function(t=document){if(t[d])return t[d];let e=!0;const i=()=>{e=!1,delete t[d]};Object.defineProperty(t,d,{configurable:!0,value:i});let n=[],s=!1;(async()=>{try{n=await h()}finally{s=!0}})();const o=()=>{for(const e of n)e({target:t});s&&0===n.length||e&&window.requestAnimationFrame(o)};return o(),i}(e);return t?(i(),()=>{}):i}p=1,m=void 0;const b=Symbol(),w=(e=document)=>{if("undefined"==typeof window)throw new Error("Marp Core's browser script is valid only in browser context.");if(((e=document)=>{const i=window[a];i||customElements.define("marp-auto-scaling",s);for(const n of Object.keys(t)){const s=`marp-${n}`,a=t[n].proto();null!=r||(r=!!document.createElement("div",{is:"marp-auto-scaling"}).outerHTML.startsWith("<div is")),r&&a!==HTMLElement?i||customElements.define(s,o(a,{style:t[n].style}),{extends:n}):(i||customElements.define(s,o(HTMLElement,t[n])),e.querySelectorAll(`${n}[is="${s}"]`).forEach((t=>{t.outerHTML=t.outerHTML.replace(new RegExp(`^<${n}`,"i"),`<${s}`).replace(new RegExp(`</${n}>$`,"i"),`</${s}>`)})))}window[a]=!0})(e),e[b])return e[b];const i=v({target:e}),n=()=>{i(),delete e[b]},l=Object.assign(n,{cleanup:n,update:()=>w(e)});return Object.defineProperty(e,b,{configurable:!0,value:l}),l},y=document.currentScript;w(y?y.getRootNode():document)}();
</script></foreignObject></svg></div><div class="bespoke-marp-note" data-index="6" tabindex="0"><p></p></div><div class="bespoke-marp-note" data-index="14" tabindex="0"><p>十六進位就是由數字 0 到 9 加上字母 A 到 F 來表示，後者可視為數字 10 到 15。不同於二進位，十六進位可以用更少的位元表達相同的數值</p></div><div class="bespoke-marp-note" data-index="17" tabindex="0"><p>- `em`:相對父元素的m寬度(預設16px)
- `rem`:相對根元素的m寬度(預設16px)
- `vw/vh`: viewport（視口）寬/長度
- `%`
- width跟height的%基準是父層
- line-height以本身文字行高為基準</p></div><script>/*!! License: https://unpkg.com/@marp-team/marp-cli@3.4.0/lib/bespoke.js.LICENSE.txt */
!function(){"use strict";function e(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var t={from:function(e,t){var n,r=1===(e.parent||e).nodeType?e.parent||e:document.querySelector(e.parent||e),o=[].filter.call("string"==typeof e.slides?r.querySelectorAll(e.slides):e.slides||r.children,(function(e){return"SCRIPT"!==e.nodeName})),i={},a=function(e,t){return(t=t||{}).index=o.indexOf(e),t.slide=e,t},s=function(e,t){i[e]=(i[e]||[]).filter((function(e){return e!==t}))},l=function(e,t){return(i[e]||[]).reduce((function(e,n){return e&&!1!==n(t)}),!0)},c=function(e,t){o[e]&&(n&&l("deactivate",a(n,t)),n=o[e],l("activate",a(n,t)))},d=function(e,t){var r=o.indexOf(n)+e;l(e>0?"next":"prev",a(n,t))&&c(r,t)},u={off:s,on:function(e,t){return(i[e]||(i[e]=[])).push(t),s.bind(null,e,t)},fire:l,slide:function(e,t){if(!arguments.length)return o.indexOf(n);l("slide",a(o[e],t))&&c(e,t)},next:d.bind(null,1),prev:d.bind(null,-1),parent:r,slides:o,destroy:function(e){l("destroy",a(n,e)),i={}}};return(t||[]).forEach((function(e){e(u)})),n||c(0),u}},n=e(t);const r=document.body,o=(...e)=>history.replaceState(...e),i="presenter",a="next",s=["",i,a],l="bespoke-marp-",c=`data-${l}`,d=(e,{protocol:t,host:n,pathname:r,hash:o}=location)=>{const i=e.toString();return`${t}//${n}${r}${i?"?":""}${i}${o}`},u=()=>r.dataset.bespokeView,f=e=>new URLSearchParams(location.search).get(e),m=(e,t={})=>{var n;const r={location,setter:o,...t},i=new URLSearchParams(r.location.search);for(const t of Object.keys(e)){const n=e[t];"string"==typeof n?i.set(t,n):i.delete(t)}try{r.setter({...null!==(n=window.history.state)&&void 0!==n?n:{}},"",d(i,r.location))}catch(e){console.error(e)}},g=(()=>{const e="bespoke-marp";try{return localStorage.setItem(e,e),localStorage.removeItem(e),!0}catch(e){return!1}})(),p=e=>{try{return localStorage.getItem(e)}catch(e){return null}},v=(e,t)=>{try{return localStorage.setItem(e,t),!0}catch(e){return!1}},h=e=>{try{return localStorage.removeItem(e),!0}catch(e){return!1}},y=(e,t)=>{const n="aria-hidden";t?e.setAttribute(n,"true"):e.removeAttribute(n)},b=e=>{e.parent.classList.add(`${l}parent`),e.slides.forEach((e=>e.classList.add(`${l}slide`))),e.on("activate",(t=>{const n=`${l}active`,r=t.slide,o=r.classList,i=!o.contains(n);if(e.slides.forEach((e=>{e.classList.remove(n),y(e,!0)})),o.add(n),y(r,!1),i){const e=`${n}-ready`;o.add(e),document.body.clientHeight,o.remove(e)}}))},w=e=>{let t=0,n=0;Object.defineProperty(e,"fragments",{enumerable:!0,value:e.slides.map((e=>[null,...e.querySelectorAll("[data-marpit-fragment]")]))});const r=r=>void 0!==e.fragments[t][n+r],o=(r,o)=>{t=r,n=o,e.fragments.forEach(((e,t)=>{e.forEach(((e,n)=>{if(null==e)return;const i=t<r||t===r&&n<=o;e.setAttribute(`${c}fragment`,(i?"":"in")+"active");const a=`${c}current-fragment`;t===r&&n===o?e.setAttribute(a,"current"):e.removeAttribute(a)}))})),e.fragmentIndex=o;const i={slide:e.slides[r],index:r,fragments:e.fragments[r],fragmentIndex:o};e.fire("fragment",i)};e.on("next",(({fragment:i=!0})=>{if(i){if(r(1))return o(t,n+1),!1;const i=t+1;e.fragments[i]&&o(i,0)}else{const r=e.fragments[t].length;if(n+1<r)return o(t,r-1),!1;const i=e.fragments[t+1];i&&o(t+1,i.length-1)}})),e.on("prev",(({fragment:i=!0})=>{if(r(-1)&&i)return o(t,n-1),!1;const a=t-1;e.fragments[a]&&o(a,e.fragments[a].length-1)})),e.on("slide",(({index:t,fragment:n})=>{let r=0;if(void 0!==n){const o=e.fragments[t];if(o){const{length:e}=o;r=-1===n?e-1:Math.min(Math.max(n,0),e-1)}}o(t,r)})),o(0,0)},x=document,k=()=>!(!x.fullscreenEnabled&&!x.webkitFullscreenEnabled),$=()=>!(!x.fullscreenElement&&!x.webkitFullscreenElement),E=e=>{e.fullscreen=()=>{k()&&(async()=>{return $()?null===(e=x.exitFullscreen||x.webkitExitFullscreen)||void 0===e?void 0:e.call(x):((e=x.body)=>{var t;return null===(t=e.requestFullscreen||e.webkitRequestFullscreen)||void 0===t?void 0:t.call(e)})();var e})()},document.addEventListener("keydown",(t=>{"f"!==t.key&&"F11"!==t.key||t.altKey||t.ctrlKey||t.metaKey||!k()||(e.fullscreen(),t.preventDefault())}))},L=`${l}inactive`,S=(e=2e3)=>({parent:t,fire:n})=>{const r=t.classList,o=e=>n(`marp-${e?"":"in"}active`);let i;const a=()=>{i&&clearTimeout(i),i=setTimeout((()=>{r.add(L),o()}),e),r.contains(L)&&(r.remove(L),o(!0))};for(const e of["mousedown","mousemove","touchend"])document.addEventListener(e,a);setTimeout(a,0)},P=["AUDIO","BUTTON","INPUT","SELECT","TEXTAREA","VIDEO"],_=e=>{e.parent.addEventListener("keydown",(e=>{if(!e.target)return;const t=e.target;(P.includes(t.nodeName)||"true"===t.contentEditable)&&e.stopPropagation()}))},T=e=>{window.addEventListener("load",(()=>{for(const t of e.slides){const e=t.querySelector("marp-auto-scaling, [data-auto-scaling], [data-marp-fitting]");t.setAttribute(`${c}load`,e?"":"hideable")}}))},I=({interval:e=250}={})=>t=>{document.addEventListener("keydown",(e=>{if(" "===e.key&&e.shiftKey)t.prev();else if("ArrowLeft"===e.key||"ArrowUp"===e.key||"PageUp"===e.key)t.prev({fragment:!e.shiftKey});else if(" "!==e.key||e.shiftKey)if("ArrowRight"===e.key||"ArrowDown"===e.key||"PageDown"===e.key)t.next({fragment:!e.shiftKey});else if("End"===e.key)t.slide(t.slides.length-1,{fragment:-1});else{if("Home"!==e.key)return;t.slide(0)}else t.next();e.preventDefault()}));let n,r,o=0;t.parent.addEventListener("wheel",(i=>{let a=!1;const s=(e,t)=>{e&&(a=a||((e,t)=>((e,t)=>{const n="X"===t?"Width":"Height";return e[`client${n}`]<e[`scroll${n}`]})(e,t)&&((e,t)=>{const{overflow:n}=e,r=e[`overflow${t}`];return"auto"===n||"scroll"===n||"auto"===r||"scroll"===r})(getComputedStyle(e),t))(e,t)),(null==e?void 0:e.parentElement)&&s(e.parentElement,t)};if(0!==i.deltaX&&s(i.target,"X"),0!==i.deltaY&&s(i.target,"Y"),a)return;i.preventDefault();const l=Math.sqrt(i.deltaX**2+i.deltaY**2);if(void 0!==i.wheelDelta){if(void 0===i.webkitForce&&Math.abs(i.wheelDelta)<40)return;if(i.deltaMode===i.DOM_DELTA_PIXEL&&l<4)return}else if(i.deltaMode===i.DOM_DELTA_PIXEL&&l<12)return;r&&clearTimeout(r),r=setTimeout((()=>{n=0}),e);const c=Date.now()-o<e,d=l<=n;if(n=l,c||d)return;let u;(i.deltaX>0||i.deltaY>0)&&(u="next"),(i.deltaX<0||i.deltaY<0)&&(u="prev"),u&&(t[u](),o=Date.now())}))},M=(e=`.${l}osc`)=>{const t=document.querySelector(e);if(!t)return()=>{};const n=(e,n)=>{t.querySelectorAll(`[${c}osc=${JSON.stringify(e)}]`).forEach(n)};return k()||n("fullscreen",(e=>e.style.display="none")),g||n("presenter",(e=>{e.disabled=!0,e.title="Presenter view is disabled due to restricted localStorage."})),e=>{t.addEventListener("click",(t=>{if(t.target instanceof HTMLElement){const{bespokeMarpOsc:n}=t.target.dataset;n&&t.target.blur();const r={fragment:!t.shiftKey};"next"===n?e.next(r):"prev"===n?e.prev(r):"fullscreen"===n?null==e||e.fullscreen():"presenter"===n&&e.openPresenterView()}})),e.parent.appendChild(t),e.on("activate",(({index:t})=>{n("page",(n=>n.textContent=`Page ${t+1} of ${e.slides.length}`))})),e.on("fragment",(({index:t,fragments:r,fragmentIndex:o})=>{n("prev",(e=>e.disabled=0===t&&0===o)),n("next",(n=>n.disabled=t===e.slides.length-1&&o===r.length-1))})),e.on("marp-active",(()=>y(t,!1))),e.on("marp-inactive",(()=>y(t,!0))),k()&&(e=>{for(const t of["","webkit"])x.addEventListener(t+"fullscreenchange",e)})((()=>n("fullscreen",(e=>e.classList.toggle("exit",k()&&$())))))}},O=e=>{window.addEventListener("message",(t=>{if(t.origin!==window.origin)return;const[n,r]=t.data.split(":");if("navigate"===n){const[t,n]=r.split(",");let o=Number.parseInt(t,10),i=Number.parseInt(n,10)+1;i>=e.fragments[o].length&&(o+=1,i=0),e.slide(o,{fragment:i})}}))};var A=["area","base","br","col","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"];let C=e=>String(e).replace(/[&<>"']/g,(e=>`&${D[e]};`)),D={"&":"amp","<":"lt",">":"gt",'"':"quot","'":"apos"},N="dangerouslySetInnerHTML",B={className:"class",htmlFor:"for"},q={};function K(e,t){let n=[],r="";t=t||{};for(let e=arguments.length;e-- >2;)n.push(arguments[e]);if("function"==typeof e)return t.children=n.reverse(),e(t);if(e){if(r+="<"+e,t)for(let e in t)!1!==t[e]&&null!=t[e]&&e!==N&&(r+=` ${B[e]?B[e]:C(e)}="${C(t[e])}"`);r+=">"}if(-1===A.indexOf(e)){if(t[N])r+=t[N].__html;else for(;n.length;){let e=n.pop();if(e)if(e.pop)for(let t=e.length;t--;)n.push(e[t]);else r+=!0===q[e]?e:C(e)}r+=e?`</${e}>`:""}return q[r]=!0,r}const j=({children:e})=>K(null,null,...e),F=`${l}presenter-`,V={container:`${F}container`,dragbar:`${F}dragbar-container`,next:`${F}next`,nextContainer:`${F}next-container`,noteContainer:`${F}note-container`,noteWrapper:`${F}note-wrapper`,noteButtons:`${F}note-buttons`,infoContainer:`${F}info-container`,infoPage:`${F}info-page`,infoPageText:`${F}info-page-text`,infoPagePrev:`${F}info-page-prev`,infoPageNext:`${F}info-page-next`,noteButtonsBigger:`${F}note-bigger`,noteButtonsSmaller:`${F}note-smaller`,infoTime:`${F}info-time`,infoTimer:`${F}info-timer`},U=e=>{const{title:t}=document;document.title="[Presenter view]"+(t?` - ${t}`:"");const n={},r=e=>(n[e]=n[e]||document.querySelector(`.${e}`),n[e]);document.body.appendChild((e=>{const t=document.createElement("div");return t.className=V.container,t.appendChild(e),t.insertAdjacentHTML("beforeend",K(j,null,K("div",{class:V.nextContainer},K("iframe",{class:V.next,src:"?view=next"})),K("div",{class:V.dragbar}),K("div",{class:V.noteContainer},K("div",{class:V.noteWrapper}),K("div",{class:V.noteButtons},K("button",{class:V.noteButtonsSmaller,tabindex:"-1",title:"Smaller notes font size"},"Smaller notes font size"),K("button",{class:V.noteButtonsBigger,tabindex:"-1",title:"Bigger notes font size"},"Bigger notes font size"))),K("div",{class:V.infoContainer},K("div",{class:V.infoPage},K("button",{class:V.infoPagePrev,tabindex:"-1",title:"Previous"},"Previous"),K("span",{class:V.infoPageText}),K("button",{class:V.infoPageNext,tabindex:"-1",title:"Next"},"Next")),K("time",{class:V.infoTime,title:"Current time"}),K("time",{class:V.infoTimer,title:"Timer"})))),t})(e.parent)),(e=>{let t=!1;r(V.dragbar).addEventListener("mousedown",(()=>{t=!0,r(V.dragbar).classList.add("active")})),window.addEventListener("mouseup",(()=>{t=!1,r(V.dragbar).classList.remove("active")})),window.addEventListener("mousemove",(e=>{if(!t)return;const n=e.clientX/document.documentElement.clientWidth*100;r(V.container).style.setProperty("--bespoke-marp-presenter-split-ratio",`${Math.max(0,Math.min(100,n))}%`)})),r(V.nextContainer).addEventListener("click",(()=>e.next()));const n=r(V.next),o=(i=n,(e,t)=>{var n;return null===(n=i.contentWindow)||void 0===n?void 0:n.postMessage(`navigate:${e},${t}`,"null"===window.origin?"*":window.origin)});var i;n.addEventListener("load",(()=>{r(V.nextContainer).classList.add("active"),o(e.slide(),e.fragmentIndex),e.on("fragment",(({index:e,fragmentIndex:t})=>o(e,t)))}));const a=document.querySelectorAll(".bespoke-marp-note");a.forEach((e=>{e.addEventListener("keydown",(e=>e.stopPropagation())),r(V.noteWrapper).appendChild(e)})),e.on("activate",(()=>a.forEach((t=>t.classList.toggle("active",t.dataset.index==e.slide())))));let s=0;const l=e=>{s=Math.max(-5,s+e),r(V.noteContainer).style.setProperty("--bespoke-marp-note-font-scale",(1.2**s).toFixed(4))},c=()=>l(1),d=()=>l(-1),u=r(V.noteButtonsBigger),f=r(V.noteButtonsSmaller);u.addEventListener("click",(()=>{u.blur(),c()})),f.addEventListener("click",(()=>{f.blur(),d()})),document.addEventListener("keydown",(e=>{"+"===e.key&&c(),"-"===e.key&&d()}),!0),e.on("activate",(({index:t})=>{r(V.infoPageText).textContent=`${t+1} / ${e.slides.length}`}));const m=r(V.infoPagePrev),g=r(V.infoPageNext);m.addEventListener("click",(t=>{m.blur(),e.prev({fragment:!t.shiftKey})})),g.addEventListener("click",(t=>{g.blur(),e.next({fragment:!t.shiftKey})})),e.on("fragment",(({index:t,fragments:n,fragmentIndex:r})=>{m.disabled=0===t&&0===r,g.disabled=t===e.slides.length-1&&r===n.length-1}));let p=new Date;const v=()=>{const e=new Date,t=e=>`${Math.floor(e)}`.padStart(2,"0"),n=e.getTime()-p.getTime(),o=t(n/1e3%60),i=t(n/1e3/60%60),a=t(n/36e5%24);r(V.infoTime).textContent=e.toLocaleTimeString(),r(V.infoTimer).textContent=`${a}:${i}:${o}`};v(),setInterval(v,250),r(V.infoTimer).addEventListener("click",(()=>{p=new Date}))})(e)},X=e=>{if(!(e=>e.syncKey&&"string"==typeof e.syncKey)(e))throw new Error("The current instance of Bespoke.js is invalid for Marp bespoke presenter plugin.");Object.defineProperties(e,{openPresenterView:{enumerable:!0,value:H},presenterUrl:{enumerable:!0,get:R}}),g&&document.addEventListener("keydown",(t=>{"p"!==t.key||t.altKey||t.ctrlKey||t.metaKey||(t.preventDefault(),e.openPresenterView())}))};function H(){const{max:e,floor:t}=Math,n=e(t(.85*window.innerWidth),640),r=e(t(.85*window.innerHeight),360);return window.open(this.presenterUrl,F+this.syncKey,`width=${n},height=${r},menubar=no,toolbar=no`)}function R(){const e=new URLSearchParams(location.search);return e.set("view","presenter"),e.set("sync",this.syncKey),d(e)}const W=e=>{const t=u();return t===a&&e.appendChild(document.createElement("span")),{"":X,[i]:U,[a]:O}[t]},J=e=>{e.on("activate",(t=>{document.querySelectorAll(".bespoke-progress-parent > .bespoke-progress-bar").forEach((n=>{n.style.flexBasis=100*t.index/(e.slides.length-1)+"%"}))}))},Y=e=>{const t=Number.parseInt(e,10);return Number.isNaN(t)?null:t},z=(e={})=>{const t={history:!0,...e};return e=>{let n=!0;const r=e=>{const t=n;try{return n=!0,e()}finally{n=t}},o=(t={fragment:!0})=>{let n=t.fragment?Y(f("f")||""):null;((t,n)=>{const{min:r,max:o}=Math,{fragments:i,slides:a}=e,s=o(0,r(t,a.length-1)),l=o(0,r(n||0,i[s].length-1));s===e.slide()&&l===e.fragmentIndex||e.slide(s,{fragment:l})})((()=>{var t,r;if(location.hash){const[o]=location.hash.slice(1).split(":~:");if(/^\d+$/.test(o))return(null!==(t=Y(o))&&void 0!==t?t:1)-1;const i=document.getElementById(o)||document.querySelector(`a[name="${CSS.escape(o)}"]`);if(i){const{length:t}=e.slides;for(let o=0;o<t;o+=1)if(e.slides[o].contains(i)){const t=null===(r=e.fragments)||void 0===r?void 0:r[o],a=i.closest("[data-marpit-fragment]");if(t&&a){const e=t.indexOf(a);e>=0&&(n=e)}return o}}}return 0})(),n)};e.on("fragment",(({index:e,fragmentIndex:r})=>{n||m({f:0===r||r.toString()},{location:{...location,hash:`#${e+1}`},setter:(...e)=>t.history?history.pushState(...e):history.replaceState(...e)})})),setTimeout((()=>{o(),window.addEventListener("hashchange",(()=>r((()=>{o({fragment:!1}),m({f:void 0})})))),window.addEventListener("popstate",(()=>{n||r((()=>o()))})),n=!1}),0)}},G=(e={})=>{var t;const n=e.key||(null===(t=window.history.state)||void 0===t?void 0:t.marpBespokeSyncKey)||Math.random().toString(36).slice(2),r=`bespoke-marp-sync-${n}`;var i;i={marpBespokeSyncKey:n},m({},{setter:(e,...t)=>o({...e,...i},...t)});const a=()=>{const e=p(r);return e?JSON.parse(e):Object.create(null)},s=e=>{const t=a(),n={...t,...e(t)};return v(r,JSON.stringify(n)),n},l=()=>{window.removeEventListener("pageshow",l),s((e=>({reference:(e.reference||0)+1})))};return e=>{l(),Object.defineProperty(e,"syncKey",{value:n,enumerable:!0});let t=!0;setTimeout((()=>{e.on("fragment",(e=>{t&&s((()=>({index:e.index,fragmentIndex:e.fragmentIndex})))}))}),0),window.addEventListener("storage",(n=>{if(n.key===r&&n.oldValue&&n.newValue){const r=JSON.parse(n.oldValue),o=JSON.parse(n.newValue);if(r.index!==o.index||r.fragmentIndex!==o.fragmentIndex)try{t=!1,e.slide(o.index,{fragment:o.fragmentIndex,forSync:!0})}finally{t=!0}}}));const o=()=>{const{reference:e}=a();void 0===e||e<=1?h(r):s((()=>({reference:e-1})))};window.addEventListener("pagehide",(e=>{e.persisted&&window.addEventListener("pageshow",l),o()})),e.on("destroy",o)}},{PI:Q,abs:Z,sqrt:ee,atan2:te}=Math,ne={passive:!0},re=({slope:e=-.7,swipeThreshold:t=30}={})=>n=>{let r;const o=n.parent,i=e=>{const t=o.getBoundingClientRect();return{x:e.pageX-(t.left+t.right)/2,y:e.pageY-(t.top+t.bottom)/2}};o.addEventListener("touchstart",(({touches:e})=>{r=1===e.length?i(e[0]):void 0}),ne),o.addEventListener("touchmove",(e=>{if(r)if(1===e.touches.length){e.preventDefault();const t=i(e.touches[0]),n=t.x-r.x,o=t.y-r.y;r.delta=ee(Z(n)**2+Z(o)**2),r.radian=te(n,o)}else r=void 0})),o.addEventListener("touchend",(o=>{if(r){if(r.delta&&r.delta>=t&&r.radian){const t=(r.radian-e+Q)%(2*Q)-Q;n[t<0?"next":"prev"](),o.stopPropagation()}r=void 0}}),ne)},oe=new Map;oe.clear(),oe.set("none",{backward:{both:void 0,incoming:void 0,outgoing:void 0},forward:{both:void 0,incoming:void 0,outgoing:void 0}});const ie={both:"",outgoing:"outgoing-",incoming:"incoming-"},ae={forward:"",backward:"-backward"},se=e=>`--marp-bespoke-transition-animation-${e}`,le=e=>`--marp-transition-${e}`,ce=se("name"),de=se("duration"),ue=e=>new Promise((t=>{const n={},r=document.createElement("div"),o=e=>{r.remove(),t(e)};r.addEventListener("animationstart",(()=>o(n))),Object.assign(r.style,{animationName:e,animationDuration:"1s",animationFillMode:"both",animationPlayState:"paused",position:"absolute",pointerEvents:"none"}),document.body.appendChild(r);const i=getComputedStyle(r).getPropertyValue(le("duration"));i&&(n.defaultDuration=i),((e,t)=>{requestAnimationFrame((()=>{e.style.animationPlayState="running",requestAnimationFrame((()=>t(void 0)))}))})(r,o)})),fe=async e=>oe.has(e)?oe.get(e):(e=>{const t={},n=[];for(const[r,o]of Object.entries(ie))for(const[i,a]of Object.entries(ae)){const s=`marp-${o}transition${a}-${e}`;n.push(ue(s).then((e=>{t[i]=t[i]||{},t[i][r]=e?{...e,name:s}:void 0})))}return Promise.all(n).then((()=>t))})(e).then((t=>(oe.set(e,t),t))),me=e=>Object.values(e).flatMap(Object.values).every((e=>!e)),ge=(e,{type:t,backward:n})=>{const r=e[n?"backward":"forward"],o=(()=>{const e=r[t],n=e=>({[ce]:e.name});if(e)return n(e);if(r.both){const e=n(r.both);return"incoming"===t&&(e[se("direction")]="reverse"),e}})();return!o&&n?ge(e,{type:t,backward:!1}):o||{[ce]:"__bespoke_marp_transition_no_animation__"}},pe=e=>{if(e)try{const t=JSON.parse(e);if((e=>{if("object"!=typeof e)return!1;const t=e;return"string"==typeof t.name&&(void 0===t.duration||"string"==typeof t.duration)})(t))return t}catch(e){}},ve="_tSId",he="_tA",ye="bespoke-marp-transition-warming-up",be=window.matchMedia("(prefers-reduced-motion: reduce)"),we="__bespoke_marp_transition_reduced_outgoing__",xe="__bespoke_marp_transition_reduced_incoming__",ke={forward:{both:void 0,incoming:{name:xe},outgoing:{name:we}},backward:{both:void 0,incoming:{name:xe},outgoing:{name:we}}},$e=e=>{if(!document.startViewTransition)return;const t=t=>(void 0!==t&&(e._tD=t),e._tD);let n;t(!1),((...e)=>{const t=[...new Set(e).values()];return Promise.all(t.map((e=>fe(e)))).then()})(...Array.from(document.querySelectorAll("section[data-transition], section[data-transition-back]")).flatMap((e=>[e.dataset.transition,e.dataset.transitionBack].flatMap((e=>{const t=pe(e);return[null==t?void 0:t.name,(null==t?void 0:t.builtinFallback)?`__builtin__${t.name}`:void 0]})).filter((e=>!!e))))).then((()=>{document.querySelectorAll("style").forEach((e=>{e.innerHTML=e.innerHTML.replace(/--marp-transition-duration:[^;}]*[;}]/g,(e=>e.slice(0,-1)+"!important"+e.slice(-1)))}))}));const r=(n,{back:r,cond:o})=>i=>{var a;const s=t();if(s)return!!i[he]||!("object"!=typeof s||(s.skipTransition(),!i.forSync));if(!o(i))return!0;const l=e.slides[e.slide()],c=()=>{var e;return null!==(e=i.back)&&void 0!==e?e:r},d="data-transition"+(c()?"-back":""),u=l.querySelector(`section[${d}]`);if(!u)return!0;const f=pe(null!==(a=u.getAttribute(d))&&void 0!==a?a:void 0);return!f||((async(e,{builtinFallback:t=!0}={})=>{let n=await fe(e);if(me(n)){if(!t)return;return n=await fe(`__builtin__${e}`),me(n)?void 0:n}return n})(f.name,{builtinFallback:f.builtinFallback}).then((e=>{if(!e){t(!0);try{n(i)}finally{t(!1)}return}let r=e;be.matches&&(console.warn("Use a constant animation to transition because preferring reduced motion by viewer has detected."),r=ke);const o=document.getElementById(ve);o&&o.remove();const a=document.createElement("style");a.id=ve,document.head.appendChild(a),((e,t)=>{const n=[`:root{${le("direction")}:${t.backward?-1:1};}`,":root:has(.bespoke-marp-inactive){cursor:none;}"],r=t=>{var n,o,i;const a=(null===(n=e[t].both)||void 0===n?void 0:n.defaultDuration)||(null===(o=e[t].outgoing)||void 0===o?void 0:o.defaultDuration)||(null===(i=e[t].incoming)||void 0===i?void 0:i.defaultDuration);return"forward"===t?a:a||r("forward")},o=t.duration||r(t.backward?"backward":"forward");void 0!==o&&n.push(`::view-transition-group(*){${de}:${o};}`);const i=e=>Object.entries(e).map((([e,t])=>`${e}:${t};`)).join("");return n.push(`::view-transition-old(root){${i(ge(e,{...t,type:"outgoing"}))}}`,`::view-transition-new(root){${i(ge(e,{...t,type:"incoming"}))}}`),n})(r,{backward:c(),duration:f.duration}).forEach((e=>{var t;return null===(t=a.sheet)||void 0===t?void 0:t.insertRule(e)}));const s=document.documentElement.classList;s.add(ye);let l=!1;const d=()=>{l||(n(i),l=!0,s.remove(ye))},u=()=>{t(!1),a.remove(),s.remove(ye)};try{t(!0);const e=document.startViewTransition(d);t(e),e.finished.finally(u)}catch(e){console.error(e),d(),u()}})),!1)};e.on("prev",r((t=>e.prev({...t,[he]:!0})),{back:!0,cond:e=>{var t;return e.index>0&&!((null===(t=e.fragment)||void 0===t||t)&&n.fragmentIndex>0)}})),e.on("next",r((t=>e.next({...t,[he]:!0})),{cond:t=>t.index+1<e.slides.length&&!(n.fragmentIndex+1<n.fragments.length)})),setTimeout((()=>{e.on("slide",r((t=>e.slide(t.index,{...t,[he]:!0})),{cond:t=>{const n=e.slide();return t.index!==n&&(t.back=t.index<n,!0)}}))}),0),e.on("fragment",(e=>{n=e}))};let Ee;const Le=()=>(void 0===Ee&&(Ee="wakeLock"in navigator&&navigator.wakeLock),Ee),Se=async()=>{const e=Le();if(e)try{return await e.request("screen")}catch(e){console.warn(e)}return null},Pe=async()=>{if(!Le())return;let e;const t=()=>{e&&"visible"===document.visibilityState&&Se()};for(const e of["visibilitychange","fullscreenchange"])document.addEventListener(e,t);return e=await Se(),e};((e=document.getElementById(":$p"))=>{(()=>{const e=f("view");r.dataset.bespokeView=e===a||e===i?e:""})();const t=(e=>{const t=f(e);return m({[e]:void 0}),t})("sync")||void 0;n.from(e,((...e)=>{const t=s.findIndex((e=>u()===e));return e.map((([e,n])=>e[t]&&n)).filter((e=>e))})([[1,1,0],G({key:t})],[[1,1,1],W(e)],[[1,1,0],_],[[1,1,1],b],[[1,0,0],S()],[[1,1,1],T],[[1,1,1],z({history:!1})],[[1,1,0],I()],[[1,1,0],E],[[1,0,0],J],[[1,1,0],re()],[[1,0,0],M()],[[1,0,0],$e],[[1,1,1],w],[[1,1,0],Pe]))})()}();</script></body></html>