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

2
00:00:00,290 --> 00:00:03,310
>> SPEAKER: Se pare că HTML nu este
singura limba pe care o puteți folosi în interiorul

3
00:00:03,310 --> 00:00:03,895
a unei pagini web.

4
00:00:03,895 --> 00:00:08,100
Puteți folosi ceva numit CSS, sau
Cascading Style Sheets, precum și.

5
00:00:08,100 --> 00:00:12,120
CSS vă permite să specificați mai mult
tocmai estetica unui web

6
00:00:12,120 --> 00:00:16,930
pagină, inclusiv aspectul și dimensiunile și
culori și fonturi și mult mai mult.

7
00:00:16,930 --> 00:00:20,820
De exemplu, să creeze o pagină web
aici numit CSS0 care reprezintă o

8
00:00:20,820 --> 00:00:22,740
de start, initiala pentru, să zicem, John Harvard.

9
00:00:22,740 --> 00:00:25,480
>> Pe această pagină, vom avea John Harvard
nume, sub care va fi

10
00:00:25,480 --> 00:00:28,500
un mesaj frumos pentru vizitatorii săi, sub
care va fi un subsol, cu

11
00:00:28,500 --> 00:00:30,590
spune, unele informații de copyright.

12
00:00:30,590 --> 00:00:34,650
Pentru a face acest lucru, haideți să definim trei divizii
pentru pagina folosind un tag

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

14
00:00:35,670 --> 00:00:43,880
Deschis div suport, John Harvard, aproape
div suport, un alt div suport deschis,

15
00:00:43,880 --> 00:00:48,330
iar acum vom specifica ceva
cum ar fi, bun venit la pagina mea de acasă!

16
00:00:48,330 --> 00:00:50,420
Și să închideți acest div, de asemenea.

17
00:00:50,420 --> 00:00:53,700
>> Și acum un al treilea și ultim
div, drepturi de autor.

18
00:00:53,700 --> 00:00:58,250
Doar pentru a fi de lux, permiteți-mi să folosesc acum un HTML
entitate, un simbol care reprezintă

19
00:00:58,250 --> 00:01:01,140
un personaj care nu ar putea altfel
tip de pe tastatură.

20
00:01:01,140 --> 00:01:07,490
În special, am de gând să fac
ampersand, lira, 169, punct și virgulă.

21
00:01:07,490 --> 00:01:10,620
Se pare că este codul numeric
pentru simbolul dreptului de autor.

22
00:01:10,620 --> 00:01:14,260
Atunci să specificați John Harvard
aici în partea de jos.

23
00:01:14,260 --> 00:01:17,180
Să închidem div și salvați fișierul.

24
00:01:17,180 --> 00:01:18,910
>> Acum, ceea ce este această etichetă div?

25
00:01:18,910 --> 00:01:21,970
Tag-ul div pur și simplu defineste o divizie
a paginii, care este în esență o

26
00:01:21,970 --> 00:01:23,310
regiune dreptunghiulară.

27
00:01:23,310 --> 00:01:26,850
Deci, în acest moment, am trei
regiuni dreptunghiulare, una în partea de sus

28
00:01:26,850 --> 00:01:27,620
pe de altă parte.

29
00:01:27,620 --> 00:01:30,610
Deci, de acum, efectul este aproape la fel de
dacă am avut trei paragrafe.

30
00:01:30,610 --> 00:01:33,490
Dar nu vom vedea la fel de mult
spațiu alb între ele.

31
00:01:33,490 --> 00:01:36,170
>> Să salvăm acest fișier, schimba sale
permisiuni, și să ia o privire pentru o

32
00:01:36,170 --> 00:01:37,990
clipă în Chrome.

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

34
00:01:43,040 --> 00:01:52,440
Să deschidem acum Chrome și vizita
http://localhost.CSS0.html.

35
00:01:52,440 --> 00:01:54,630
Într-adevăr, aici este o pagina de start
pentru John Harvard.

36
00:01:54,630 --> 00:01:59,370
Hai acum stiliza un pic mai mult
tocmai utilizarea unor CSS.

37
00:01:59,370 --> 00:02:03,510
>> Înapoi la gedit, să mergem în această
tag-ul div prima și a adăuga un stil

38
00:02:03,510 --> 00:02:11,060
atribut precizând că aș vrea un
dimensiunea fontului de, să zicem, 36 de pixeli, sau px.

39
00:02:11,060 --> 00:02:15,650
Și aș vrea greutatea de acest font
să fie îndrăzneț, mai degrabă decât implicit,

40
00:02:15,650 --> 00:02:16,980
ceea ce este normal.

41
00:02:16,980 --> 00:02:21,170
Pentru al doilea div, să specificați
un alt atribut de stil, care are o

42
00:02:21,170 --> 00:02:25,550
dimensiunea de 24 pixeli, așa
un pic mai mic.

43
00:02:25,550 --> 00:02:28,410
Cotații apropiate după virgulă.

44
00:02:28,410 --> 00:02:33,255
>> În cele din urmă, în acest al treilea div, să facem
Stilul este egal cu dimensiunea citat, font, și

45
00:02:33,255 --> 00:02:35,340
să spunem de 12 de pixeli de data asta.

46
00:02:35,340 --> 00:02:37,280
Aproape citat după virgulă.

47
00:02:37,280 --> 00:02:40,200
Observați că atunci am par a avea
specificat un pic de stilizare pentru

48
00:02:40,200 --> 00:02:43,770
fiecare dintre aceste trei divs folosind,
se pare, CSS.

49
00:02:43,770 --> 00:02:47,820
De fapt, sintaxa pe care le vedeți în
între aceste ghilimele duble este CSS,

50
00:02:47,820 --> 00:02:50,620
CSS special proprietăți
cu valori.

51
00:02:50,620 --> 00:02:53,910
Și pentru că în primul rând tag-ul, unde am avut
două astfel de proprietăți, dimensiunea fontului și

52
00:02:53,910 --> 00:02:57,290
greutate font, eu pur și simplu separat
le cu punct și virgulă.

53
00:02:57,290 --> 00:02:59,940
>> Acum, doar de dragul de stil, I
punct și virgulă, de asemenea, incluse la

54
00:02:59,940 --> 00:03:00,880
sfârșitul fiecărui rând.

55
00:03:00,880 --> 00:03:04,270
Dar ei nu sunt strict necesare,
mai ales atunci când aveți un singur

56
00:03:04,270 --> 00:03:05,580
proprietate definit.

57
00:03:05,580 --> 00:03:08,370
Să salvăm acum fișierul și reîncărcați
în Chrome, și să vedem ce

58
00:03:08,370 --> 00:03:11,000
efectul net este.

59
00:03:11,000 --> 00:03:13,470
Înapoi în Chrome aici,
să faceți clic pe Reload.

60
00:03:13,470 --> 00:03:15,800
>> Acum avem un pic mai interesant
de start, initiala pentru John

61
00:03:15,800 --> 00:03:19,000
Harvard, prin care prima linie cu
numele lui, care este în interiorul de care

62
00:03:19,000 --> 00:03:23,470
în primul rând div, este de 36 pixeli înălțime și, de asemenea,
aldine, prin care a doua linie,

63
00:03:23,470 --> 00:03:27,340
care este în acest al doilea div, este de 24
pixeli înalt, dar nu aldine.

64
00:03:27,340 --> 00:03:31,500
Și în care linia a treia în a treia
div este de 12 pixeli înălțime și, de asemenea,

65
00:03:31,500 --> 00:03:32,610
nu ingrosate.

66
00:03:32,610 --> 00:03:35,380
Dar să presupunem că acum aș vrea să schimbe
toate acest text peste

67
00:03:35,380 --> 00:03:36,650
astfel încât este centrat.

68
00:03:36,650 --> 00:03:40,480
>> Aș putea alinia fiecare a individului
divs ca fiind centrate.

69
00:03:40,480 --> 00:03:45,330
Dar mai ușor, aș putea încheia cele
trei divs în interiorul celei de a patra div, un

70
00:03:45,330 --> 00:03:49,360
div părinte, ca să spunem așa, și specificați
că div și toate sale

71
00:03:49,360 --> 00:03:52,610
descendenții trebuie să fie
textul aliniat centru?

72
00:03:52,610 --> 00:03:54,120
Să aruncăm o privire.

73
00:03:54,120 --> 00:03:58,510
>> In interiorul gedit, să mergem înapoi la mea
corp și se adaugă un nou div până sus cu

74
00:03:58,510 --> 00:04:04,460
div, stil este egal cu, citez,
centru de aliniere a textului, aproape

75
00:04:04,460 --> 00:04:06,250
cita după virgulă.

76
00:04:06,250 --> 00:04:10,280
Și acum, hai să mergem mai departe și liniuță toate
de acele linii pe care le tastat înainte.

77
00:04:10,280 --> 00:04:15,040
Și de mai jos că a treia div, să
închide acest nou div.

78
00:04:15,040 --> 00:04:18,829
>> Cu alte cuvinte, pentru că cele trei
divs originale sunt acum copii, astfel încât să

79
00:04:18,829 --> 00:04:22,110
vorbesc, de un nou div părinte și am
a specificat că aș vrea să alinieze

80
00:04:22,110 --> 00:04:26,140
textul care div părinte în centrul
a paginii, că proprietatea va fi

81
00:04:26,140 --> 00:04:28,290
moștenit de toate aceste copii.

82
00:04:28,290 --> 00:04:32,370
Într-adevăr, să salvați fișierul și
aruncăm o privire într-un browser.

83
00:04:32,370 --> 00:04:34,650
Hai să reîncărcați în Chrome.

84
00:04:34,650 --> 00:04:37,540
Și acolo l-am, o mai frumos au
de start, initiala pentru John Harvard.

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