SPEAKER: Ukazuje sa, že HTML nie je jediný jazyk, môžete použiÅ¥ vo vnútri z webovej stránky. Môžete použiÅ¥ nieÄo ako CSS, alebo Cascading Style Sheets, rovnako. CSS umožÅuje urÄiÅ¥ oveľa viac práve estetika web strana, vrátane rozloženia a veľkosti a farby a pÃsma a oveľa viac. NaprÃklad, poÄme vytvoriÅ¥ webovú stránku sem zavolal css0, ktorý predstavuje domáce stránka pre, povedzme, John Harvard.
Na tejto stránke, budeme maÅ¥ John Harvard je názov, pod ktorým bude pekná správa pre jeho návÅ¡tevnÃkov, pod ktorý bude päty, s povedaÅ¥, nejaké informácie o autorských právach. Ak to chcete vykonaÅ¥, poÄme definovaÅ¥ tri divÃzie na stránke pomocou tagu volal div. Otvorte držiak div, John Harvard, zavrieÅ¥ držiak div, ÄalÅ¡Ã otvorený držiak div, a teraz budeme Å¡pecifikovaÅ¥ nieÄo ako, vitajte na mojej domovskej stránke! A poÄme uzavrieÅ¥ tento div, rovnako.
A teraz tretà a posledný div, autorských práv. Len byÅ¥ fantázie, dovoľte mi, aby som teraz použÃvaÅ¥ HTML subjekt, symbol, ktorý predstavuje znak, ktorý by sa inak pÃsaÅ¥ na klávesnici. Najmä budem robiÅ¥ ampersand, libra, 169, bodkoÄiarku. Ukázalo sa, že je ÄÃselný kód pre symbol autorských práv. Tak poÄme zadaÅ¥ John Harvard tu v spodnej Äasti. PoÄme zavrieÅ¥ div a súbor uložte.
A teraz, Äo je to div tag? Tag div jednoducho definuje rozdelenie stránky, Äo je v podstate obdĺžnikové oblasti. Takže v tejto chvÃli, mám tri obdĺžnikové oblasti, jedna na na strane druhej. Takže teraz, efekt je takmer rovnako keÄ som mal tri odseky. Ale nebudeme vidieÅ¥ tak moc biely priestor medzi nimi.
PoÄme si tento súbor uložiÅ¥, zmeniÅ¥ jeho oprávnenie, a pozrite sa na moment v Chrome. Chmod + r CSS0.html. PoÄme teraz otvoriÅ¥ Chrome a návÅ¡teva http://localhost.CSS0.html. Naozaj, tu je domovská stránka pre John Harvard. PoÄme sa Å¡tylizovaÅ¥ ju trochu viac práve pomocou niektorej CSS.
Späť na gedit, poÄme do toho prvý div tag a pridaÅ¥ Å¡týl atribút urÄujúci, že by som chcel veľkosÅ¥ pÃsma, povedzme, 36 bodov, alebo px. A ja by som váhu tohto pÃsma byÅ¥ odvážny, skôr ako predvolené, , Äo je normálne. U druhej div, poÄme Å¡pecifikovaÅ¥ ÄalÅ¡Ã atribút Å¡týl, ktorý má veľkosÅ¥ pÃsma 24 bodov, takže trochu menÅ¡ie. ZavrieÅ¥ zodpovednosti za bodkoÄiarkou.
Napokon, v tomto treÅ¥om div, poÄme robiÅ¥ Å¡týl sa rovná veľkosti citát, pÃsma, a povedzme 12 bodov tentoraz. Close quote po bodkoÄiarkou. VÅ¡imnite si, potom som Zdá sa, že uvedené trochu Å¡tylizácia pre každý z týchto troch tagy Div použitie, Ukazuje sa, že CSS. V skutoÄnosti, syntaxe, ktoré vidÃte v medzi týmito úvodzovkách je CSS, konkrétne CSS vlastnosti s hodnotami. A ten prvý znaÄku, kde som mal dva také vlastnosti, veľkosÅ¥ pÃsma a hmotnosÅ¥ pÃsmo, som jednoducho oddeliÅ¥ je bodkoÄiarkou.
Teraz, len kvôli Å¡týlu je, myslÃm, tiež zahrnuté bodkoÄiarky na koniec každého riadku. Ale to nie je nevyhnutne nutné, najmä keÄ máte len jeden vlastnosÅ¥ definovaná. PoÄme sa teraz súbor uložte a znovu v Chrome, a vidieÅ¥ to, Äo Äistý efekt je. Späť v prehliadaÄi Chrome tu, poÄme na tlaÄidlo NaÄÃtaÅ¥ znova.
Teraz máme nieÄo zaujÃmavejÅ¡ie domáce stránka pre Jana Harvard, priÄom prvý riadok s jeho názov, ktorý je vo vnútri, ktorý prvý div, je 36 pixelov vysoký a tiež tuÄné pÃsmo, priÄom druhý riadok, ktorá je v tomto druhom div, je 24 pixelov vysoký, ale nie tuÄné pÃsmo. A kedy tretà riadok v tejto tretine div je 12 pixelov vysoký a tiež nie tuÄným pÃsmom. Ale predpokladajme, že teraz by som chcel posunúť vÅ¡etky tohto textu cez tak, že je na stred.
Mohol by som zladiÅ¥ každý jednotlivca Divs ako je stred. Ale ľahÅ¡ie, mohol by som zabaliÅ¥ tie tri divs vnútri Å¡tvrtého div, rodiÄ div, aby som tak povedal, a urÄiÅ¥, že div a vÅ¡etky jeho potomkovia by mali byÅ¥ Text zarovnaný centrum? PoÄme sa pozrieÅ¥.
Vnútri gedit, vráťme sa k môjmu telo a pridaÅ¥ nový div up top s div, Å¡týl rovná citácie koniec citátu Text ZarovnaÅ¥ na stred, v blÃzkosti citujem po bodkoÄiarkou. A teraz, poÄme do toho a zarážka vÅ¡etky z tých riadkov, ktoré sme zadali predtým. A pod touto treÅ¥ou dielik, poÄme zatvorte tento nový div.
Inými slovami, pretože tie tri pôvodné divs sú teraz deti, aby sa hovorÃ, novej materskej div a ja som stanovené, že by som chcel zladiÅ¥ Text tejto materskej div v stredu stránky, bude táto vlastnosÅ¥ bude dedà vÅ¡etky tie deti. Ostatne, poÄme súbor uložte a pozrite sa na prehliadaÄi. PoÄme znova do Chrome. A tu to máme, eÅ¡te krajÅ¡Ã domáce stránka pre Johna Harvard.