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.