1
00:00:00,000 --> 00:00:00,290

2
00:00:00,290 --> 00:00:03,310
>> SPEAKER: Si scopre che HTML non è
l'unica lingua che è possibile utilizzare all'interno

3
00:00:03,310 --> 00:00:03,895
di una pagina web.

4
00:00:03,895 --> 00:00:08,100
È possibile utilizzare qualcosa chiamato CSS, o
Cascading Style Sheets, pure.

5
00:00:08,100 --> 00:00:12,120
CSS consente di specificare più
precisamente l'estetica di un web

6
00:00:12,120 --> 00:00:16,930
pagina, incluso il layout e dimensioni e
colori e caratteri e molto altro.

7
00:00:16,930 --> 00:00:20,820
Per esempio, creiamo una pagina web
qui chiamato CSS0 che rappresenta un

8
00:00:20,820 --> 00:00:22,740
home page per, diciamo, John Harvard.

9
00:00:22,740 --> 00:00:25,480
>> In questa pagina, avremo di John Harvard
nome, sotto il quale sarà

10
00:00:25,480 --> 00:00:28,500
un bel messaggio per i suoi visitatori, al di sotto
che sarà un piè di pagina, con

11
00:00:28,500 --> 00:00:30,590
dire, alcune informazioni sul copyright.

12
00:00:30,590 --> 00:00:34,650
Per fare questo, definiamo tre divisioni
per la pagina utilizzando un tag

13
00:00:34,650 --> 00:00:35,670
chiamato div.

14
00:00:35,670 --> 00:00:43,880
Aperto staffa div, John Harvard, vicino
Staffa div, un altro div parentesi aperta,

15
00:00:43,880 --> 00:00:48,330
e ora ci specificheremo qualcosa
come, benvenuti a casa mia pagina!

16
00:00:48,330 --> 00:00:50,420
E chiudiamo questo div, pure.

17
00:00:50,420 --> 00:00:53,700
>> E ora una terza ed ultima
div, diritto d'autore.

18
00:00:53,700 --> 00:00:58,250
Basta essere di fantasia, lasciatemi usare ora un HTML
entità, un simbolo che rappresenta

19
00:00:58,250 --> 00:01:01,140
un personaggio che non si poteva altrimenti
digitare sulla tastiera.

20
00:01:01,140 --> 00:01:07,490
In particolare, ho intenzione di fare
commerciale, libbra, 169, punto e virgola.

21
00:01:07,490 --> 00:01:10,620
Scopre che è il codice numerico
per il simbolo di copyright.

22
00:01:10,620 --> 00:01:14,260
Allora cerchiamo di specificare John Harvard
qui nella parte inferiore.

23
00:01:14,260 --> 00:01:17,180
Chiudiamo il div e salvare il file.

24
00:01:17,180 --> 00:01:18,910
>> Ora, che cosa è questo tag div?

25
00:01:18,910 --> 00:01:21,970
Il tag div definisce semplicemente una divisione
della pagina, che è essenzialmente un

26
00:01:21,970 --> 00:01:23,310
regione rettangolare.

27
00:01:23,310 --> 00:01:26,850
Quindi, in questo momento, ho tre
regioni rettangolari, uno sopra

28
00:01:26,850 --> 00:01:27,620
dall'altra.

29
00:01:27,620 --> 00:01:30,610
Quindi per ora, l'effetto è quasi come
se ho avuto tre paragrafi.

30
00:01:30,610 --> 00:01:33,490
Ma non vedremo abbastanza tanto
spazio vuoto tra di loro.

31
00:01:33,490 --> 00:01:36,170
>> Salviamo questo file, cambiare la sua
autorizzazioni e dare un'occhiata per un

32
00:01:36,170 --> 00:01:37,990
momento in Chrome.

33
00:01:37,990 --> 00:01:43,040
Chmod a + r CSS0.html.

34
00:01:43,040 --> 00:01:52,440
Diamo ora aprire Chrome e visita
http://localhost.CSS0.html.

35
00:01:52,440 --> 00:01:54,630
Infatti, ecco una home page
per John Harvard.

36
00:01:54,630 --> 00:01:59,370
Vediamo ora stilizzare un po 'più
Proprio utilizzando alcuni CSS.

37
00:01:59,370 --> 00:02:03,510
>> Torna in gedit, andiamo in questa
primo tag div e aggiungere uno stile

38
00:02:03,510 --> 00:02:11,060
Attribuisco precisando che mi piacerebbe un
dimensione del carattere, per esempio, 36 pixel o px.

39
00:02:11,060 --> 00:02:15,650
E mi piacerebbe che il peso di questo font
di essere audaci piuttosto che il predefinito,

40
00:02:15,650 --> 00:02:16,980
che è normale.

41
00:02:16,980 --> 00:02:21,170
Per il secondo div, cerchiamo di specificare
altro attributo style che ha un

42
00:02:21,170 --> 00:02:25,550
dimensione carattere di 24 pixel, quindi
un po 'più piccolo.

43
00:02:25,550 --> 00:02:28,410
Chiudere quotazioni dopo la virgola.

44
00:02:28,410 --> 00:02:33,255
>> Infine, in questa terza div, facciamolo
stile uguale dimensione citazione, font, e

45
00:02:33,255 --> 00:02:35,340
diciamo 12 pixel questa volta.

46
00:02:35,340 --> 00:02:37,280
Chiudi citazione dopo il punto e virgola.

47
00:02:37,280 --> 00:02:40,200
Si noti poi che mi sembra di avere
specificato un po 'di stilizzazione per

48
00:02:40,200 --> 00:02:43,770
ciascuno di questi tre div utilizzando,
si scopre, CSS.

49
00:02:43,770 --> 00:02:47,820
In effetti, la sintassi che si vede in
tra queste virgolette sono i CSS,

50
00:02:47,820 --> 00:02:50,620
CSS particolare proprietà
con valori.

51
00:02:50,620 --> 00:02:53,910
E per questo primo tag, dove ho avuto
due tali proprietà, dimensione del carattere e

52
00:02:53,910 --> 00:02:57,290
spessore del carattere, ho separato semplicemente
li con una virgola.

53
00:02:57,290 --> 00:02:59,940
>> Ora, solo per amor di stile,
virgola inclusi anche a

54
00:02:59,940 --> 00:03:00,880
Alla fine di ogni riga.

55
00:03:00,880 --> 00:03:04,270
Ma non sono strettamente necessari,
soprattutto quando si ha un solo

56
00:03:04,270 --> 00:03:05,580
struttura definita.

57
00:03:05,580 --> 00:03:08,370
Passiamo ora salvare il file e ricaricare
in Chrome, e vedere che cosa

58
00:03:08,370 --> 00:03:11,000
l'effetto netto è.

59
00:03:11,000 --> 00:03:13,470
Torna in Chrome qui,
cerchiamo di fare clic su Ricarica.

60
00:03:13,470 --> 00:03:15,800
>> Ora abbiamo un po 'più interessante
home page per John

61
00:03:15,800 --> 00:03:19,000
Harvard, per cui la prima riga con
suo nome, che si trova all'interno di tale

62
00:03:19,000 --> 00:03:23,470
prima div, è di 36 pixel di altezza e anche
grassetto, per cui la seconda linea,

63
00:03:23,470 --> 00:03:27,340
che è in quel secondo div, è di 24
pixel di altezza, ma non in grassetto.

64
00:03:27,340 --> 00:03:31,500
E in cui la terza linea in questa terza
div è di 12 pixel di altezza e anche

65
00:03:31,500 --> 00:03:32,610
non grassetto.

66
00:03:32,610 --> 00:03:35,380
Ma suppongo che ora mi piacerebbe spostare
tutto questo testo sopra

67
00:03:35,380 --> 00:03:36,650
tale che sia centrato.

68
00:03:36,650 --> 00:03:40,480
>> Ho potuto allineare ciascuno dei singoli
div ad essere centrato.

69
00:03:40,480 --> 00:03:45,330
Ma più facilmente, potrei avvolgere quelle
tre div all'interno di una quarta div, un

70
00:03:45,330 --> 00:03:49,360
div genitore, per così dire, e specificare
che tale div e tutti i suoi

71
00:03:49,360 --> 00:03:52,610
discendenti dovrebbero essere
testo allineato centro?

72
00:03:52,610 --> 00:03:54,120
Diamo uno sguardo.

73
00:03:54,120 --> 00:03:58,510
>> All'interno di gedit, torniamo alla mia
corpo e aggiungere un nuovo rabbocco div con

74
00:03:58,510 --> 00:04:04,460
div, lo stile è uguale tra virgolette
centro del testo align, vicino

75
00:04:04,460 --> 00:04:06,250
rispondere solo dopo il punto e virgola.

76
00:04:06,250 --> 00:04:10,280
E ora, andiamo avanti e trattino tutti
di quelle linee che abbiamo scritto prima.

77
00:04:10,280 --> 00:04:15,040
E sotto quel terzo div, cerchiamo di
chiudere questo nuovo div.

78
00:04:15,040 --> 00:04:18,829
>> In altre parole, perché quei tre
div originali sono ora i bambini, in modo da

79
00:04:18,829 --> 00:04:22,110
Parlo, di un nuovo div genitore e ho
specificato che mi piacerebbe allineare il

80
00:04:22,110 --> 00:04:26,140
testo che div genitore nel centro
della pagina, che la proprietà sarà

81
00:04:26,140 --> 00:04:28,290
ereditata da tutti quei bambini.

82
00:04:28,290 --> 00:04:32,370
Infatti, salviamo il file e
date un'occhiata in un browser.

83
00:04:32,370 --> 00:04:34,650
Facciamo ricaricare in Chrome.

84
00:04:34,650 --> 00:04:37,540
E non l'abbiamo, un ancora più bello
home page per John Harvard.

85
00:04:37,540 --> 00:04:39,872