>> SPEAKER: Ukazuje se, že HTML není jediný jazyk, můžete použít uvnitř
z webové stránky.
Můžete použít něco jako CSS, nebo Cascading Style Sheets, stejně.
CSS umožňuje určit mnohem více právě estetika web
strana, včetně rozložení a velikosti a barvy a písma a mnohem více.
Například, pojďme vytvořit webovou stránku sem zavolal css0, který představuje
domácí stránka pro, řekněme, John Harvard.
>> Na této stránce, budeme mít John Harvard je název, pod kterým bude
pěkná zpráva pro jeho návštěvníky, pod který bude zápatí, s
říci, nějaké informace o autorských právech.
Chcete-li to provést, pojďme definovat tři divize na stránce pomocí tagu
volal div.
Otevřete držák div, John Harvard, zavřít držák div, další otevřený držák div,
a teď budeme specifikovat něco jako, vítejte na mé domovské stránce!
A pojďme uzavřít tento div, stejně.
>> A teď třetí a poslední div, autorských práv.
Jen být fantazie, dovolte mi, abych nyní používat HTML subjekt, symbol, který představuje
znak, který by se jinak psát na klávesnici.
Zejména budu dělat ampersand, libra, 169, středník.
Ukázalo se, že je číselný kód pro symbol autorských práv.
Tak pojďme zadat John Harvard zde ve spodní části.
Pojďme zavřít div a soubor uložte.
>> A teď, co je to div tag?
Tag div jednoduše definuje rozdělení stránky, což je v podstatě
obdélníkové oblasti.
Takže v této chvíli, mám tři obdélníkové oblasti, jedna na
na straně druhé.
Takže teď, efekt je téměř stejně když jsem měl tři odstavce.
Ale nebudeme vidět tak moc bílý prostor mezi nimi.
>> Pojďme si tento soubor uložit, změnit jeho oprávnění, a podívejte se na
moment v Chrome.
Chmod + r CSS0.html.
Pojďme nyní otevřít Chrome a návštěva http://localhost.CSS0.html.
Opravdu, tady je domovská stránka pro John Harvard.
Pojďme se stylizovat ji trochu víc právě pomocí některé CSS.
>> Zpět na gedit, pojďme do toho první div tag a přidat styl
atribut určující, že bych chtěl velikost písma, řekněme, 36 bodů, nebo px.
A já bych váhu tohoto písma být odvážný, spíše než výchozí,
, což je normální.
U druhé div, pojďme specifikovat další atribut styl, který má
velikost písma 24 bodů, takže trochu menší.
Zavřít odpovědnosti za středníkem.
>> Konečně, v tomto třetím div, pojďme dělat styl se rovná velikosti citát, písma, a
řekněme 12 bodů tentokrát.
Close quote po středníkem.
Všimněte si, pak jsem Zdá se, že uvedeno trochu stylizace pro
každý z těchto tří tagy Div použití, Ukazuje se, že CSS.
Ve skutečnosti, syntaxe, které vidíte v mezi těmito uvozovkách je CSS,
konkrétně CSS vlastnosti s hodnotami.
A ten první značku, kde jsem měl dva takové vlastnosti, velikost písma a
hmotnost písmo, jsem prostě oddělit je středníkem.
>> Nyní, jen kvůli stylu je, myslím, také zahrnuty středníky na
konec každého řádku.
Ale to není nezbytně nutné, zvláště když máte jen jeden
vlastnost definovaná.
Pojďme se nyní soubor uložte a znovu v Chrome, a vidět to, co
Čistý efekt je.
Zpět v prohlížeči Chrome tady, pojďme na tlačítko Načíst znovu.
>> Nyní máme něco zajímavější domácí stránka pro Jana
Harvard, přičemž první řádek s jeho název, který je uvnitř, který
první div, je 36 pixelů vysoký a také tučné písmo, přičemž druhý řádek,
která je v tomto druhém div, je 24 pixelů vysoký, ale ne tučné písmo.
A kdy třetí řádek v této třetině div je 12 pixelů vysoký a také
ne tučným písmem.
Ale předpokládejme, že teď bych chtěl posunout všechny tohoto textu přes
tak, že je na střed.
>> Mohl bych sladit každý jednotlivce Divs jako je střed.
Ale snadněji, mohl bych zabalit ty tři divs uvnitř čtvrtého div,
rodič div, abych tak řekl, a určit, že div a všechny jeho
potomci by měly být Text zarovnaný centrum?
Pojďme se podívat.
>> Uvnitř gedit, vraťme se k mému tělo a přidat nový div up top s
div, styl rovná citace konec citátu Text Zarovnat na střed, v blízkosti
cituji po středníkem.
A teď, pojďme do toho a odrážka všechny z těch řádků, které jsme zadali dříve.
A pod touto třetí dílek, pojďme zavřete tento nový div.
>> Jinými slovy, protože ty tři původní divs jsou nyní děti, aby se
mluví, nové mateřské div a já jsem stanoveno, že bych chtěl sladit
Text této mateřské div ve středu stránky, bude tato vlastnost bude
dědí všechny ty děti.
Ostatně, pojďme soubor uložte a podívejte se na prohlížeči.
Pojďme znovu do Chrome.
A tady to máme, ještě hezčí domácí stránka pro Johna Harvarda.