Môj blog používa "layout" Simple Blue, takže CSS, ktoré je tu prezentované je CSS, ktoré riadi tento blog. Samozrejmosťou je, že zatiaľ som ho ešte nijako nemodifikoval (ak nepočítam veci, ktoré som zmenil dotiahnutím iých CSS a JavaScriptov).
Pozrime sa teda na to, čo robí tento "môj" blog takým, aký je. V prvom rade si povedzme o tom, že si teraz opíšeme všetky deklarácie a definície, ktoré sú v súbore style.css, takže sa tento príspevok možno dosť roztiahne, prípadne ho skúsim nejako rozsekať na niekoľko častí, uvidíme.
Opäť základná definícia celého HTML dokumentu a jeho tela (body). Tu vidíme, že opäť stránka nemá vôbec žiadne okraje a odsadenia, veľkosť fontu je tu nastavovaná v súvislosti s fontom, čo znamená, že sa stratávame s novou mierkou - em.
Tu mi napadá, že by sme si mohli predstaviť základné možnosti určovania veľkostí fontov. Najpoužívanejšie sú pixely, ktoré rozhodujú o veľkosti fontu bez náväznosti na to, čo ich zobrazuje. Ďalej poznáme em ktorá určuje veľkosť fontu na viazanosť s veľkosťou používaného fontu. To znamená, že ak originálny font, ktorý sa volá na stránke (v mojom prípade Lucida Grande) má pôvodnú veľkosť 16 pixelov, tak veľkosť .82em (0,82) zmenší font o približne 20%, takže vo výsledku je veľkosť fontu približne 12 pixelov. Rovnako používanou mierkou sú inche (in). Tu je 1 in relevantný k veľkosti 2.54 cm. V HTML sa môžeme však stretávať viac s veľkosťou fontu, ktorú určujú pointy (pt). Od definície štýlov v CSS2 sa veľkosť 1 bodu zhoduje veľkosti 1/72 z 1 in.
Prejdime však ďalej. Pozadie opäť biele, farba fontu sivá. Použité fonty sú trošku atypické "Lucida Grande", "Lucida Sans Unicode", Verdana, Geneva a sans-serif. Pri definícii fontu si mnusíme uvedomiť pár základných vecí. Na stránkach môžeme použiť akýkoľvek font, no musíme brať do úvahy fakt, že nie všetci môžu mať taký font, aký máte vy v počítači a tak sa mu nemusí stránka zobrazovať úplne presne ako Vám. Z toho dôvodu sa určuje - v zápise - aké fonty sa majú použiť.
Ako prvý font je použitý primárny font. Ak ho systém obsahuje, zobrazí sa, ak nie, prechádza sa na 1. alternatívny font. V tomto prípade na Lucida Sans Unicode. Ak ho počítač nemá, prejde na font, ktorý systém (aspoň myslím) už určite obsahuje - Verdana. V prípade, že ste si tento font odstránili, prejde systém na font Geneva. Font sans-serif je font, ktorý je defaultný font pre systém Macintosh, takže tento (aj keď ho možno máte vo svojom windows-e) nie je štandardom pre Windows. V konečnom dôsledku mám pocit - no možno sa mýlim - je font sans-serif zhodný s fontom typu Arial.
Súbor style.css ďalej deklaruje zobrazenie formulárov (form) a headingu - h1.
Ako vidíte, nie je tu zadefinované nič, čo by nejako radikálne ovplyvnilo formát daných objektov. Jediné, čo im CSS prikazuje je to, že nemajú mať žiaden okraj - margin.
V ďalšej definícii máme definície jednotlivých objektov, ktoré už majú väčší vplyv na vzhľad.
Ako prvý objekt, ktorý sa definuje je objekt main. Tu vidíme, že mu CSS určuje, že má obsahovať horný rámček (border-top), ktorý má 3 pixely, je plnej čiary (solid) a tejto farby #6590DF. Dôležité je vedieť, že objekty sa definú cez základné príkazy, ktoré si teraz trošku vysvetlíme.
Objekty, ktoré sú používané na stránke sa delia do identifikátorov a do tried. Identifikátory sú objekty, ktoré majú svoje vlastné ID, na ktoré sa môže naviazať niekoľko ďaľších vlastností a tried.
Príklad:
V tomto príklade sme si vytvorili objekt, ktorého obsahom je "Obsah objektu". Identifikátor je objekt1 a sú v ňom použité ešte aj triedy trieda, trieda2 a trieda3. Dôvod, prečo som sa rozhodol pre takúto definíciu objektu nie je náhodná. Ak budeme chcieť, aby mal náš objekt - objekt1 - čierne pozadie, môžeme použiť niekoľko spôsobov. Môžeme mu to prikázať priamo cez určenie css na daný objekt, alebo to môžeme prikázať niektorej triede, ktorú daný objekt obsahuje. Preto tieto zápisy v CSS:
Príklad:
Príklad 2:
Všimnite si rozdiel v týchto zápisoch. Pri deklarácii pre objekt som použil pred názov objektu mriežku (#), pri deklarácii triedy som použil bodku (.). Toto je jedno zo základných pravidiel v CSS, ktoré si je treba uvedomiť. To znamená, že ak budeme chcieť v budúcnosti meniť nejaké objekty, musíme vedieť, či meníme objekt, alebo len triedu. V prípade, že by sme použili takýto zápis:
Príklad:
alebo
Naše CSS by vôbec nevedelo, čo má ovplyvniť. V prípade, že by sme však niekde v html použili napríklad
ovplyvnili by sme tým tento objekt bez toho, aby sme to možno chceli. Tu by sa zmenilo pozadie na čierno, presne tak ako sme to deklarovali vyššie, pretože v predošlej deklarácii sme z objektu spravili triedu, ktorú môžeme použiť kdekoľvek.
Prejdime ale ďalej v našom CSS, aby sme si to vysvetlili...
Ďalej sa deklarujú objekty top a blog-title. Podľa toho, ako som videl HTML blogov, tak objekt blog-title je dokonca použitý v H1 čo je vlastne heading (nadpis) s najväčšou veľkosťou písma. Objekt TOP nemá žiadne okraje (margin), šírka je 955 pixelov (width) má taktiež horný a spodný rám - (border-top a border-bottom) pričom horný rám má výšku 20 pixelov a má rovnakú farbu ako mal objekt main. Spodný rám má výšku 1 pixelu a je sivý. Ďalej sa definuje nadpis blogu (blog-title). Tento má použitý font "Times New Roman", veľkosť je 3.3 em. Tu sa stretávame s novou definíciou pre font - font-weight. Táto definícia určuje či má byť font normálny, alebo hrubý (bold). V tomto pípade ide o normálny font (font-weight: normal;). Farba fontu je #555 a vidíme tu opäť niečo nové - letter-spacing. Táto definícia určuje, aké majú byť medzery medzi jednotlivými znakmi (písmenami). V tomto prípade vidíme, že ide o zúženie medzier zadaním -1px. Tu už môžeme vidieť aj definíciu pdsadenia od okraju - padding. Použitý je padding 20 pixelov a 0. Toto zadanie znamená, že je nadpis odsadený 20 pixelov z hora, pričom ostatné odsadenia nie sú zadané. Ďalej je zadefinovaný okraj 20 pixelov pre spodný okraj, s plnou sivou čiarou. Text-align je nová definícia, ktorá určuje, kde má byť text zarovnaný. V tomto prípade je náš nadpis vycentrovaný - text-align: center;. Medzi dostupné možnosti ešte patrí left, right a justify.
Toľko by možno stačilo k prvej časti.
Komentáre