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

2
00:00:00,290 --> 00:00:03,310
>> SPEAKER: Ukazuje sa, že HTML nie je
jediný jazyk, môžete použiť vo vnútri

3
00:00:03,310 --> 00:00:03,895
z webovej stránky.

4
00:00:03,895 --> 00:00:08,100
Môžete použiť niečo ako CSS, alebo
Cascading Style Sheets, rovnako.

5
00:00:08,100 --> 00:00:12,120
CSS umožňuje určiť oveľa viac
práve estetika web

6
00:00:12,120 --> 00:00:16,930
strana, vrátane rozloženia a veľkosti a
farby a písma a oveľa viac.

7
00:00:16,930 --> 00:00:20,820
Napríklad, poďme vytvoriť webovú stránku
sem zavolal css0, ktorý predstavuje

8
00:00:20,820 --> 00:00:22,740
domáce stránka pre, povedzme, John Harvard.

9
00:00:22,740 --> 00:00:25,480
>> Na tejto stránke, budeme mať John Harvard je
názov, pod ktorým bude

10
00:00:25,480 --> 00:00:28,500
pekná správa pre jeho návštevníkov, pod
ktorý bude päty, s

11
00:00:28,500 --> 00:00:30,590
povedať, nejaké informácie o autorských právach.

12
00:00:30,590 --> 00:00:34,650
Ak to chcete vykonať, poďme definovať tri divízie
na stránke pomocou tagu

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

14
00:00:35,670 --> 00:00:43,880
Otvorte držiak div, John Harvard, zavrieť
držiak div, ďalší otvorený držiak div,

15
00:00:43,880 --> 00:00:48,330
a teraz budeme špecifikovať niečo
ako, vitajte na mojej domovskej stránke!

16
00:00:48,330 --> 00:00:50,420
A poďme uzavrieť tento div, rovnako.

17
00:00:50,420 --> 00:00:53,700
>> A teraz tretí a posledný
div, autorských práv.

18
00:00:53,700 --> 00:00:58,250
Len byť fantázie, dovoľte mi, aby som teraz používať HTML
subjekt, symbol, ktorý predstavuje

19
00:00:58,250 --> 00:01:01,140
znak, ktorý by sa inak
písať na klávesnici.

20
00:01:01,140 --> 00:01:07,490
Najmä budem robiť
ampersand, libra, 169, bodkočiarku.

21
00:01:07,490 --> 00:01:10,620
Ukázalo sa, že je číselný kód
pre symbol autorských práv.

22
00:01:10,620 --> 00:01:14,260
Tak poďme zadať John Harvard
tu v spodnej časti.

23
00:01:14,260 --> 00:01:17,180
Poďme zavrieť div a súbor uložte.

24
00:01:17,180 --> 00:01:18,910
>> A teraz, čo je to div tag?

25
00:01:18,910 --> 00:01:21,970
Tag div jednoducho definuje rozdelenie
stránky, čo je v podstate

26
00:01:21,970 --> 00:01:23,310
obdĺžnikové oblasti.

27
00:01:23,310 --> 00:01:26,850
Takže v tejto chvíli, mám tri
obdĺžnikové oblasti, jedna na

28
00:01:26,850 --> 00:01:27,620
na strane druhej.

29
00:01:27,620 --> 00:01:30,610
Takže teraz, efekt je takmer rovnako
keď som mal tri odseky.

30
00:01:30,610 --> 00:01:33,490
Ale nebudeme vidieť tak moc
biely priestor medzi nimi.

31
00:01:33,490 --> 00:01:36,170
>> Poďme si tento súbor uložiť, zmeniť jeho
oprávnenie, a pozrite sa na

32
00:01:36,170 --> 00:01:37,990
moment v Chrome.

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

34
00:01:43,040 --> 00:01:52,440
Poďme teraz otvoriť Chrome a návšteva
http://localhost.CSS0.html.

35
00:01:52,440 --> 00:01:54,630
Naozaj, tu je domovská stránka
pre John Harvard.

36
00:01:54,630 --> 00:01:59,370
Poďme sa štylizovať ju trochu viac
práve pomocou niektorej CSS.

37
00:01:59,370 --> 00:02:03,510
>> Späť na gedit, poďme do toho
prvý div tag a pridať štýl

38
00:02:03,510 --> 00:02:11,060
atribút určujúci, že by som chcel
veľkosť písma, povedzme, 36 bodov, alebo px.

39
00:02:11,060 --> 00:02:15,650
A ja by som váhu tohto písma
byť odvážny, skôr ako predvolené,

40
00:02:15,650 --> 00:02:16,980
, Čo je normálne.

41
00:02:16,980 --> 00:02:21,170
U druhej div, poďme špecifikovať
ďalší atribút štýl, ktorý má

42
00:02:21,170 --> 00:02:25,550
veľkosť písma 24 bodov, takže
trochu menšie.

43
00:02:25,550 --> 00:02:28,410
Zavrieť zodpovednosti za bodkočiarkou.

44
00:02:28,410 --> 00:02:33,255
>> Napokon, v tomto treťom div, poďme robiť
štýl sa rovná veľkosti citát, písma, a

45
00:02:33,255 --> 00:02:35,340
povedzme 12 bodov tentoraz.

46
00:02:35,340 --> 00:02:37,280
Close quote po bodkočiarkou.

47
00:02:37,280 --> 00:02:40,200
Všimnite si, potom som Zdá sa, že
uvedené trochu štylizácia pre

48
00:02:40,200 --> 00:02:43,770
každý z týchto troch tagy Div použitie,
Ukazuje sa, že CSS.

49
00:02:43,770 --> 00:02:47,820
V skutočnosti, syntaxe, ktoré vidíte v
medzi týmito úvodzovkách je CSS,

50
00:02:47,820 --> 00:02:50,620
konkrétne CSS vlastnosti
s hodnotami.

51
00:02:50,620 --> 00:02:53,910
A ten prvý značku, kde som mal
dva také vlastnosti, veľkosť písma a

52
00:02:53,910 --> 00:02:57,290
hmotnosť písmo, som jednoducho oddeliť
je bodkočiarkou.

53
00:02:57,290 --> 00:02:59,940
>> Teraz, len kvôli štýlu je, myslím,
tiež zahrnuté bodkočiarky na

54
00:02:59,940 --> 00:03:00,880
koniec každého riadku.

55
00:03:00,880 --> 00:03:04,270
Ale to nie je nevyhnutne nutné,
najmä keď máte len jeden

56
00:03:04,270 --> 00:03:05,580
vlastnosť definovaná.

57
00:03:05,580 --> 00:03:08,370
Poďme sa teraz súbor uložte a znovu
v Chrome, a vidieť to, čo

58
00:03:08,370 --> 00:03:11,000
Čistý efekt je.

59
00:03:11,000 --> 00:03:13,470
Späť v prehliadači Chrome tu,
poďme na tlačidlo Načítať znova.

60
00:03:13,470 --> 00:03:15,800
>> Teraz máme niečo zaujímavejšie
domáce stránka pre Jana

61
00:03:15,800 --> 00:03:19,000
Harvard, pričom prvý riadok s
jeho názov, ktorý je vo vnútri, ktorý

62
00:03:19,000 --> 00:03:23,470
prvý div, je 36 pixelov vysoký a tiež
tučné písmo, pričom druhý riadok,

63
00:03:23,470 --> 00:03:27,340
ktorá je v tomto druhom div, je 24
pixelov vysoký, ale nie tučné písmo.

64
00:03:27,340 --> 00:03:31,500
A kedy tretí riadok v tejto tretine
div je 12 pixelov vysoký a tiež

65
00:03:31,500 --> 00:03:32,610
nie tučným písmom.

66
00:03:32,610 --> 00:03:35,380
Ale predpokladajme, že teraz by som chcel posunúť
všetky tohto textu cez

67
00:03:35,380 --> 00:03:36,650
tak, že je na stred.

68
00:03:36,650 --> 00:03:40,480
>> Mohol by som zladiť každý jednotlivca
Divs ako je stred.

69
00:03:40,480 --> 00:03:45,330
Ale ľahšie, mohol by som zabaliť tie
tri divs vnútri štvrtého div,

70
00:03:45,330 --> 00:03:49,360
rodič div, aby som tak povedal, a určiť,
že div a všetky jeho

71
00:03:49,360 --> 00:03:52,610
potomkovia by mali byť
Text zarovnaný centrum?

72
00:03:52,610 --> 00:03:54,120
Poďme sa pozrieť.

73
00:03:54,120 --> 00:03:58,510
>> Vnútri gedit, vráťme sa k môjmu
telo a pridať nový div up top s

74
00:03:58,510 --> 00:04:04,460
div, štýl rovná citácie koniec citátu
Text Zarovnať na stred, v blízkosti

75
00:04:04,460 --> 00:04:06,250
citujem po bodkočiarkou.

76
00:04:06,250 --> 00:04:10,280
A teraz, poďme do toho a zarážka všetky
z tých riadkov, ktoré sme zadali predtým.

77
00:04:10,280 --> 00:04:15,040
A pod touto treťou dielik, poďme
zatvorte tento nový div.

78
00:04:15,040 --> 00:04:18,829
>> Inými slovami, pretože tie tri
pôvodné divs sú teraz deti, aby sa

79
00:04:18,829 --> 00:04:22,110
hovorí, novej materskej div a ja som
stanovené, že by som chcel zladiť

80
00:04:22,110 --> 00:04:26,140
Text tejto materskej div v stredu
stránky, bude táto vlastnosť bude

81
00:04:26,140 --> 00:04:28,290
dedí všetky tie deti.

82
00:04:28,290 --> 00:04:32,370
Ostatne, poďme súbor uložte a
pozrite sa na prehliadači.

83
00:04:32,370 --> 00:04:34,650
Poďme znova do Chrome.

84
00:04:34,650 --> 00:04:37,540
A tu to máme, ešte krajší
domáce stránka pre Johna Harvard.

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