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

2
00:00:00,290 --> 00:00:03,310
>> SPEAKER: Ukazuje se, že HTML není
jediný jazyk, můžete použít uvnitř

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

4
00:00:03,895 --> 00:00:08,100
Můžete použít něco jako CSS, nebo
Cascading Style Sheets, stejně.

5
00:00:08,100 --> 00:00:12,120
CSS umožňuje určit mnohem více
právě estetika web

6
00:00:12,120 --> 00:00:16,930
strana, včetně rozložení a velikosti a
barvy a písma a mnohem více.

7
00:00:16,930 --> 00:00:20,820
Například, pojďme vytvořit webovou stránku
sem zavolal css0, který představuje

8
00:00:20,820 --> 00:00:22,740
domácí stránka pro, řekněme, John Harvard.

9
00:00:22,740 --> 00:00:25,480
>> Na této stránce, budeme mít John Harvard je
název, pod kterým bude

10
00:00:25,480 --> 00:00:28,500
pěkná zpráva pro jeho návštěvníky, pod
který bude zápatí, s

11
00:00:28,500 --> 00:00:30,590
říci, nějaké informace o autorských právech.

12
00:00:30,590 --> 00:00:34,650
Chcete-li to provést, pojďme definovat tři divize
na stránce pomocí tagu

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

14
00:00:35,670 --> 00:00:43,880
Otevřete držák div, John Harvard, zavřít
držák div, další otevřený držák div,

15
00:00:43,880 --> 00:00:48,330
a teď budeme specifikovat něco
jako, vítejte na mé domovské stránce!

16
00:00:48,330 --> 00:00:50,420
A pojďme uzavřít tento div, stejně.

17
00:00:50,420 --> 00:00:53,700
>> A teď třetí a poslední
div, autorských práv.

18
00:00:53,700 --> 00:00:58,250
Jen být fantazie, dovolte mi, abych nyní používat HTML
subjekt, symbol, který představuje

19
00:00:58,250 --> 00:01:01,140
znak, který by se jinak
psát na klávesnici.

20
00:01:01,140 --> 00:01:07,490
Zejména budu dělat
ampersand, libra, 169, středník.

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

22
00:01:10,620 --> 00:01:14,260
Tak pojďme zadat John Harvard
zde ve spodní části.

23
00:01:14,260 --> 00:01:17,180
Pojďme zavřít div a soubor uložte.

24
00:01:17,180 --> 00:01:18,910
>> A teď, co je to div tag?

25
00:01:18,910 --> 00:01:21,970
Tag div jednoduše definuje rozdělení
stránky, což je v podstatě

26
00:01:21,970 --> 00:01:23,310
obdélníkové oblasti.

27
00:01:23,310 --> 00:01:26,850
Takže v této chvíli, mám tři
obdélníkové oblasti, jedna na

28
00:01:26,850 --> 00:01:27,620
na straně druhé.

29
00:01:27,620 --> 00:01:30,610
Takže teď, efekt je téměř stejně
když jsem měl tři odstavce.

30
00:01:30,610 --> 00:01:33,490
Ale nebudeme vidět tak moc
bílý prostor mezi nimi.

31
00:01:33,490 --> 00:01:36,170
>> Pojďme si tento soubor uložit, změnit jeho
oprávnění, a podívejte se 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
Pojďme nyní otevřít Chrome a návštěva
http://localhost.CSS0.html.

35
00:01:52,440 --> 00:01:54,630
Opravdu, tady je domovská stránka
pro John Harvard.

36
00:01:54,630 --> 00:01:59,370
Pojďme se stylizovat ji trochu víc
právě pomocí některé CSS.

37
00:01:59,370 --> 00:02:03,510
>> Zpět na gedit, pojďme do toho
první div tag a přidat styl

38
00:02:03,510 --> 00:02:11,060
atribut určující, že bych chtěl
velikost písma, řekněme, 36 bodů, nebo px.

39
00:02:11,060 --> 00:02:15,650
A já bych váhu tohoto písma
být odvážný, spíše než výchozí,

40
00:02:15,650 --> 00:02:16,980
, což je normální.

41
00:02:16,980 --> 00:02:21,170
U druhé div, pojďme specifikovat
další atribut styl, který má

42
00:02:21,170 --> 00:02:25,550
velikost písma 24 bodů, takže
trochu menší.

43
00:02:25,550 --> 00:02:28,410
Zavřít odpovědnosti za středníkem.

44
00:02:28,410 --> 00:02:33,255
>> Konečně, v tomto třetím div, pojďme dělat
styl se rovná velikosti citát, písma, a

45
00:02:33,255 --> 00:02:35,340
řekněme 12 bodů tentokrát.

46
00:02:35,340 --> 00:02:37,280
Close quote po středníkem.

47
00:02:37,280 --> 00:02:40,200
Všimněte si, pak jsem Zdá se, že
uvedeno trochu stylizace pro

48
00:02:40,200 --> 00:02:43,770
každý z těchto tří tagy Div použití,
Ukazuje se, že CSS.

49
00:02:43,770 --> 00:02:47,820
Ve skutečnosti, syntaxe, které vidíte v
mezi těmito uvozovkách je CSS,

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

51
00:02:50,620 --> 00:02:53,910
A ten první značku, kde jsem měl
dva takové vlastnosti, velikost písma a

52
00:02:53,910 --> 00:02:57,290
hmotnost písmo, jsem prostě oddělit
je středníkem.

53
00:02:57,290 --> 00:02:59,940
>> Nyní, jen kvůli stylu je, myslím,
také zahrnuty středníky na

54
00:02:59,940 --> 00:03:00,880
konec každého řádku.

55
00:03:00,880 --> 00:03:04,270
Ale to není nezbytně nutné,
zvláště když máte jen jeden

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

57
00:03:05,580 --> 00:03:08,370
Pojďme se nyní soubor uložte a znovu
v Chrome, a vidět to, co

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

59
00:03:11,000 --> 00:03:13,470
Zpět v prohlížeči Chrome tady,
pojďme na tlačítko Načíst znovu.

60
00:03:13,470 --> 00:03:15,800
>> Nyní máme něco zajímavější
domácí stránka pro Jana

61
00:03:15,800 --> 00:03:19,000
Harvard, přičemž první řádek s
jeho název, který je uvnitř, který

62
00:03:19,000 --> 00:03:23,470
první div, je 36 pixelů vysoký a také
tučné písmo, přičemž druhý řádek,

63
00:03:23,470 --> 00:03:27,340
která je v tomto druhém div, je 24
pixelů vysoký, ale ne tučné písmo.

64
00:03:27,340 --> 00:03:31,500
A kdy třetí řádek v této třetině
div je 12 pixelů vysoký a také

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

66
00:03:32,610 --> 00:03:35,380
Ale předpokládejme, že teď bych chtěl posunout
všechny tohoto textu přes

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

68
00:03:36,650 --> 00:03:40,480
>> Mohl bych sladit každý jednotlivce
Divs jako je střed.

69
00:03:40,480 --> 00:03:45,330
Ale snadněji, mohl bych zabalit ty
tři divs uvnitř čtvrtého div,

70
00:03:45,330 --> 00:03:49,360
rodič div, abych tak řekl, a určit,
že div a všechny jeho

71
00:03:49,360 --> 00:03:52,610
potomci by měly být
Text zarovnaný centrum?

72
00:03:52,610 --> 00:03:54,120
Pojďme se podívat.

73
00:03:54,120 --> 00:03:58,510
>> Uvnitř gedit, vraťme se k mému
tělo a přidat nový div up top s

74
00:03:58,510 --> 00:04:04,460
div, styl rovná citace konec citátu
Text Zarovnat na střed, v blízkosti

75
00:04:04,460 --> 00:04:06,250
cituji po středníkem.

76
00:04:06,250 --> 00:04:10,280
A teď, pojďme do toho a odrážka všechny
z těch řádků, které jsme zadali dříve.

77
00:04:10,280 --> 00:04:15,040
A pod touto třetí dílek, pojďme
zavřete tento nový div.

78
00:04:15,040 --> 00:04:18,829
>> Jinými slovy, protože ty tři
původní divs jsou nyní děti, aby se

79
00:04:18,829 --> 00:04:22,110
mluví, nové mateřské div a já jsem
stanoveno, že bych chtěl sladit

80
00:04:22,110 --> 00:04:26,140
Text této mateřské div ve středu
stránky, bude tato vlastnost bude

81
00:04:26,140 --> 00:04:28,290
dědí všechny ty děti.

82
00:04:28,290 --> 00:04:32,370
Ostatně, pojďme soubor uložte a
podívejte se na prohlížeči.

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

84
00:04:34,650 --> 00:04:37,540
A tady to máme, ještě hezčí
domácí stránka pro Johna Harvarda.

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