1
00:00:00,240 --> 00:00:01,290
Ben tornato.

2
00:00:01,290 --> 00:00:06,670
Quindi questo video rappresenterà una panoramica di alto livello su come funziona la valutazione e su cosa fa.

3
00:00:06,720 --> 00:00:11,310
Quindi vogliamo effettivamente scrivere qualsiasi codice fino alla prossima lezione e praticamente ogni lezione da

4
00:00:11,310 --> 00:00:13,120
lì in avanti che copre noi.

5
00:00:13,500 --> 00:00:18,930
Ma quello che faremo è tre cose importanti che definiremo il successo e parleremo del ruolo

6
00:00:18,930 --> 00:00:21,870
che gioca perché lo usi e lo faccia.

7
00:00:21,870 --> 00:00:24,180
Stiamo andando a vedere alcuni siti web che hanno il.

8
00:00:24,210 --> 00:00:27,560
Prenderemo il C S C S e vediamo come cambiano.

9
00:00:27,900 --> 00:00:32,490
E poi definiremo questa regola generale che seguirà per ogni linea CSSA che scriviamo.

10
00:00:34,380 --> 00:00:39,580
Quindi andiamo avanti e parliamo di cosa è la posizione per i fogli di stile a cascata.

11
00:00:39,840 --> 00:00:43,670
Quindi la parte a cascata in cui torneremo in un video successivo.

12
00:00:43,830 --> 00:00:46,690
Ma i fogli di stile sono piuttosto auto-esplicativi.

13
00:00:46,710 --> 00:00:55,390
Ricorda che C Ss è spesso considerato gli aggettivi o la pelle dove H M L sarebbe il nome.

14
00:00:55,590 --> 00:00:59,830
Quindi Jim Ellis la struttura che vogliamo nel titolo qui e un punto elenco qui.

15
00:01:00,090 --> 00:01:07,740
Dicevamo che rendere i titoli viola e la dimensione dei caratteri di 50 pixel e spostarli verso il basso

16
00:01:07,740 --> 00:01:09,170
e dargli un bordo.

17
00:01:09,240 --> 00:01:13,760
Quindi lo usiamo per descrivere come dovrebbero apparire le cose in modo foglio di stile.

18
00:01:13,770 --> 00:01:19,410
L'altra parte è costituita dai fogli e ciò che significa è che li scriveremo

19
00:01:19,530 --> 00:01:21,030
separatamente da ogni squadra.

20
00:01:21,110 --> 00:01:23,400
Non sono dentro HMO.

21
00:01:23,460 --> 00:01:27,590
Sono documenti separati che poi includiamo nel nostro HMO.

22
00:01:28,020 --> 00:01:31,510
Quindi iniziamo dando un'occhiata ad alcuni esempi.

23
00:01:31,560 --> 00:01:35,430
sito che mi piace molto chiamato CSX Zen Garden e l'intero

24
00:01:38,610 --> 00:01:44,490
punto di questo sito è di mostrarti la varietà di cose che puoi realizzare con Jesse s s.

25
00:01:44,490 --> 00:01:45,220
C'è un

26
00:01:45,300 --> 00:01:49,200
Quindi se dai un'occhiata qui abbiamo qualche markup.

27
00:01:49,260 --> 00:01:52,120
Diamo un'occhiata al file HDMI.

28
00:01:52,410 --> 00:01:54,010
Possiamo andare avanti e aprirlo.

29
00:01:54,450 --> 00:01:58,780
Quindi questo è il file principale che ogni singola pagina NCEA dice.

30
00:01:58,840 --> 00:02:00,300
Usi giardino zen.

31
00:02:00,300 --> 00:02:02,130
Quindi puoi vedere che è piuttosto semplice.

32
00:02:02,130 --> 00:02:04,280
Abbiamo alcuni titoli.

33
00:02:04,280 --> 00:02:10,260
Abbiamo alcuni paragrafi alcuni link alcuni punti elenco in basso e quindi l'idea di

34
00:02:10,260 --> 00:02:16,710
questo sito è che i contributori lo portino via e-mail e scrivano il proprio CSSA senza

35
00:02:16,710 --> 00:02:17,580
cambiarlo affatto.

36
00:02:17,580 --> 00:02:23,360
Quindi cambi solo per vedere valutare la struttura è la stessa e ti ritrovi con risultati diversi.

37
00:02:23,370 --> 00:02:25,550
Quindi eccone uno.

38
00:02:25,720 --> 00:02:31,320
E sul lato destro puoi dare un'occhiata ad alcuni altri e ce ne sono un sacco sul sito e in

39
00:02:31,350 --> 00:02:33,800
realtà puoi dare il tuo contributo se lo desideri.

40
00:02:34,080 --> 00:02:35,020
Bene diamo un'occhiata.

41
00:02:35,250 --> 00:02:42,750
Quindi questo è radicalmente diverso in totale diverso layout di colori diversi schemi di immagini dei caratteri.

42
00:02:42,750 --> 00:02:44,190
Anche questo è molto diverso.

43
00:02:44,190 --> 00:02:47,840
Ha questa bella animazione di caricamento tutto fatto Roscius noi.

44
00:02:48,240 --> 00:02:54,420
Puoi scorrere verso il basso e abbiamo questo effetto dove il nostro contenuto scorre ma l'immagine di sfondo è statica.

45
00:02:56,130 --> 00:03:00,190
Abbiamo questo che è radicalmente diverso.

46
00:03:01,020 --> 00:03:06,990
E potremmo passare tutto il giorno qui e ne troveremo uno in più che è il mio preferito

47
00:03:06,990 --> 00:03:08,820
che è un robot chiamato Jimmy.

48
00:03:09,190 --> 00:03:13,510
Prendiamo questo piccolo robot che si apre in questo filare uno starburst nella parte posteriore.

49
00:03:13,620 --> 00:03:20,860
Anche un altro effetto di scorrimento, quindi ti sto mostrando questo in modo che tu possa vedere quanto sia potente il CSSA.

50
00:03:21,060 --> 00:03:23,330
Fondamentalmente è il dottore della pelle.

51
00:03:23,370 --> 00:03:27,330
Gli additivi per la tua struttura possono cambiare.

52
00:03:27,330 --> 00:03:35,020
Sai a parte sembrare così e può cambiarlo per assomigliare a questo.

53
00:03:35,070 --> 00:03:40,140
Quindi spero che questo sia abbastanza per farti entusiasmare dell'apprendimento del

54
00:03:40,140 --> 00:03:40,690
passato.

55
00:03:40,770 --> 00:03:45,170
Non abbiamo avuto stile oltre agli stili predefiniti in bianco e nero.

56
00:03:46,440 --> 00:03:51,660
Quindi, dopo voglio parlare di una regola generale che seguirà ogni riga di CSSA che abbiamo scritto.

57
00:03:52,050 --> 00:03:55,090
Quindi questo schema qui sembra così.

58
00:03:55,230 --> 00:03:56,800
Selezioniamo qualcosa.

59
00:03:57,270 --> 00:04:02,990
Quindi parleremo molto di ciò che effettivamente accade lì, ma selezioneremo qualcosa come All h ones

60
00:04:03,300 --> 00:04:06,470
o ogni tag di ancoraggio all'interno di un alleato.

61
00:04:06,540 --> 00:04:12,690
Quindi facciamo qualcosa in cui stiamo selezionando gli elementi temporali che fanno riferimento a un html esistente e

62
00:04:12,690 --> 00:04:19,710
quindi all'interno delle parentesi graffe applichiamo alcuni stili e seguono questo formato di coppie di valori chiave in cui abbiamo i

63
00:04:19,710 --> 00:04:24,350
due punti della proprietà e quindi un valore corrispondente e quindi un semi -colon.

64
00:04:24,690 --> 00:04:30,090
proprietà diverse che stiamo cambiando ma seguono sempre questa proprietà di sintassi valore Colan.

65
00:04:30,090 --> 00:04:33,770
Quindi possiamo avere una cosa qui dentro possiamo avere 100

66
00:04:34,740 --> 00:04:36,510
Quindi ecco due esempi.

67
00:04:36,540 --> 00:04:40,190
Questa prima sezione selezionerà tutte le h.

68
00:04:40,260 --> 00:04:42,920
Quindi di nuovo torneremo da te su come funzionano questi selettori.

69
00:04:43,080 --> 00:04:49,350
Ma selezionerà tutti quelli su una pagina e poi darà loro il colore del viola

70
00:04:49,350 --> 00:04:57,000
e la dimensione del font di 56 e poi questo qui sotto selezionerà tutti i tag immagine e darà

71
00:04:57,000 --> 00:05:02,100
loro il colore del bordo rosso e il bordo con tre pixel.

72
00:05:02,100 --> 00:05:06,350
Quindi sai che non selezioneremo sempre tutti i tag immagine.

73
00:05:06,570 --> 00:05:10,860
Avremo più video sulle sfumature della selezione delle cose a volte vogliamo

74
00:05:10,860 --> 00:05:15,310
selezionare tonnellate di cose a volte stiamo facendo un piccolo elemento alla volta.

75
00:05:15,450 --> 00:05:19,160
Quindi ci sono molte opzioni ma segue sempre questo formato.

76
00:05:19,470 --> 00:05:26,250
Selezioniamo qualcosa di parentesi graffe e poi all'interno delle parentesi graffe abbiamo coppie di valori chiave che sono in realtà solo

77
00:05:26,250 --> 00:05:27,420
proprietà che stiamo cambiando