>> 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.