Ako to urobíme? Úplne jednoducho, stačí nám len CSS! Už v jednom z predošlých článkov som naznačil, že CSS je mocný nástroj a teraz vás o tom snáď aj presvedčím ;-) Všetko čo potrebujete je moderný prehliadač (Mozilla, Mozilla Firefox, Opera a podobne) a možnosť definovania si vlastného CSS v ňom. V Opere nepotrebujete žiadne ďalšie prídavné rozšírenia, pre Gecko prehliadače (Mozilla, Firefox a podobne) sa zíde rozšírenie Web Developer, ktoré je momentálne vo verzii 0.8. Stiahnuť si ho môžete z tejto stránky: http://update.mozilla.org
Alebo vyskúšajte rozšírenie EditCSS, ktoré obsahuje konkrétne len to, čo momentálne potrebujeme, teda jednoduché editovanie CSS, čo nám aj z názvu vyplýva ;) Toto rozšírenie zas stiahnete z tejto stránky: http://update.mozilla.org
Osobne by som, ale radšej odporučil rozšírenie Web Developer, keďže obsahuje viac užitočnejších funkcií, ktoré možno neskôr dosť často využijete a celkovo je to ohromný nástroj pre „web developerov“ (tvorcov stránok). Možno niečo také existuje aj pre Internet Explorer, ale to vôbec netuším, lebo ho nepoužívam, ale ak o nejakom podobnom plugine viete, tak to prosím spomeňte v komentároch.
V mojom príklade používam prehliadač Mozilla Firefox (používam anglickú verziu, takže si niektoré veci budete musieť preložiť alebo pohľadať, ak používate českú alebo slovenskú verziu ;-) a rozšírenie Web Developer a samozrejme stránka, ktorú ideme zmeniť, je http://blog.sme.sk ;-)
Takže si spustíme prehliadač, stlačíme klávesovú skratku CTRL + SHIFT + E, ktorá otvorí sidebar (bočný panel) rozšírenia Web Developer. Ak sa nám to nepodarilo, tak v hornom menu View, zvolíme z ponuky Sidebar položku Web Developer. Malo by sa nám zobraziť niečo takéto:
Predtým ako začneme vôbec robiť nejaké zmeny, v skratke sa naučíme niečo o CSS ;-) Predpokladom je logické myslenie, keďže do úplných detailov nemôžem zachádzať, keďže by to bolo najmenej na stostranovú knihu. Tí čo o CSS už niečo vedia alebo nemajú záujem o rýchly návod, tak prosím preskočte túto časť.
CSS je zoznam pravidiel ako sa má zobrazovať daná stránka. Pravidlo tvorí definícia, ktorá obsahuje zoznam vlastností. Tie môžeme definovať pre tzv. selektory (prvky), ktorými sú:
- elementy, ktoré tvorí väčšinou dvojica tagov (<div></div>, <h1></h1>, <table></table>), ale môže to byť aj jeden tag samotný, ktorý je ale ukončený takýmto lomítkom: / (<img />, <br />, <hr />). Takže pravidlo v CSS vyzerá napríklad takto: h1 {color: #ffffff;}
- triedy, tie musíte v html priradiť ku konkrétnym tagom a to napríklad takto: <h1 class=”nadpis”></h1>. Pričom pravidlo v CSS sa zapíše takto: h1.nadpis {text-align: left;}
- prvky s konkrétnym pomenovaním, resp. identifikátory, sú to tagy s konkrétnym pomenovaním, ktoré sa nemôže opakovať. Vyzerá to napr. takto: <h1 id=”nadpis”></h1>. V CSS sa pravidlo identifikátorov zapisuje takto: #nadpis {font-weight: bold;}
Selektorov je podstatne viac, jedná sa väčšinou o kombináciu týchto troch základných, napríklad body p , #nadpis.nadpis a podobne.
Treba si zapamätať, že pravidlo vytvárame v nasledovnom poradí: selektor {vlastnosť; vlastnosť;}. Napríklad: h1 {color: #ff0000; font-weight: bold;}. Tento konkrétny príklad spôsobí, že nadpis najvyššej úrovne h1 bude červenej farby a zvýraznený hrubým písmom.
Definícia sa vytvára v takomto poradí: {názov vlastnosti: hodnota vlastnosti;} Dôležité je si zapamätať, že každá vlastnosť musí mať za dvojbodkou určenú hodnotu a vždy musí byť ukončená bodkočiarkou! Napríklad: {color: #ff0000;} Táto vlastnosť určí, že písmo bude červenej farby.
Ďalej si treba uvedomiť, že v CSS najprv píšeme pravidlá pre elementy, potom pre triedy a nakoniec pre identifikátory. Farby v CSS sa definujú pomocou RGB kódu v 16kovej sústavy. A to konkrétne takto: #ČČZZMM, kde písmeno Č predstavuje 16kový výraz pre červenú farbu, písmeno Z predstavuje 16kový výraz pre zelenú farbu a písmeno M predstavuje 16kový výraz pre modrú farbu. Farby sa dajú ešte zadávať pomocou anglických výrazov pre farby, napríklad black, white, green a podobne.
Najdôležitejšou vlastnosťou CSS je dedičnosť, treba si pamätať, že to čo definujeme v nadradenom selektore (tzv. rodičovský prvok) ovplyvní všetky selektory pod ním (existujú výnimky ako anchor, teda element A, ktorý slúži na definovanie odkazu). To znamená, že ak pre telo HTML dokumentu <body></body> definujeme modré písmo, tak všetko v ňom bude modré, kým v ňom nejaký konkrétny tag nemá definovanú inú farbu písmu. Vysvetlíme si to na príklade.
HTML
<body>
<p> Ja som červené tučné písmo</p>
A prečo ja som potom modré tenké písmo?
</body>
CSS
body {color: #0000ff;}
p {color: #ff0000; font-weight: bold;}
Ďalšou dôležitou vlastnosťou CSS je, že ak pre konkrétny prvok existuje viacero definícii s niektorými podobnými vlastnosťami, tak platí posledná zadaná vlastnosť. Ukážeme si to na príklade.
HTML
<body>
<p> Ja som modrý text, i keď som bol pôvodne definovaný ako zelený </p>
</body>
CSS
body p {color: #00ff00;}
p {color: #0000ff;}
Teraz si spomenieme najčastejšie elementy s ktorými môžete prísť do styku:
- a je to element slúžiaci na definíciu odkazu, tzv. linku
- br slúži na okamžité ukončenie začatého riadku, odstavcu. Opätovným použitím sa posuniete vždy o riadok nižšie, teda vytvoríte prázdne riadky
- body je telo HTML dokumentu
- div je blok
- h1, h2, h3, h4, h5, h6 sú nadpisy rôznych úrovní, pričom h1 je najvyššej úrovne a h6 je najnižšej.
- hr je horizontálna čiara
- img slúži na zobrazenie obrázku
- p reprezentuje odstavec
- ul je zoznam a li predstavuje jeho položku
- table je tabuľka, td predstavuje bunku, tr predstavuje riadok
Rovnako si spomenieme aj najčastejšie vlastnosti, s ktorými sa v CSS môžete stretnúť:
- background , napríklad: {background: fixed #0000ff url(logo.gif) left no-repeat;} Vlastnosť background určuje aké pozadie bude mať daný selektor (teda element, trieda, identifikátor) Prvá hodnota určuje, či má byť “prilepenie“ obrázku v pozadí fixné alebo nie (fixed). Druhá hodnota určuje farbu pozadia (#0000ff = modrá farba), tretia hodnota určuje cestu k obrázku alebo jeho názov (hodnota url(logo.gif)). Štvrtá hodnota určuje zarovnanie obrázku v pozadí (hodnota left) a piata hodnota, či sa má opakovať a ak áno, tak ako konkrétne (hodnota no-repeat). V našom prípade táto definícia spôsobí, že pozadie daného selektoru bude modré, pričom sa napevno prilepí obrázok, ktorý bude zarovnaný naľavo a nebude sa opakovať.
- border, napríklad: {border: 1px solid #000000;} Prvá hodnota určuje hrúbku čiary (1px), druhá hodnota typ čiary (solid) a posledná hodnota je jej farba (#000000 = čierna farba). V našom prípade spôsobíme to, že okolo daného prvku sa vytvorí čiara hrubá 1 pixel a celá bude čiernej farby.
- color , napríklad {color: #000000;} Určí farbu písma. V našom prípade bude písmo čiernej farby.
- font-family, napríklad {font-family: ‘Verdana CE’, ‘Arial CE’, ‘Lucida Grande CE’, ‘Helvetica CE’, Verdana, Arial, lucida, sans-serif;} Táto hodnota určuje aký font, teda typ písma sa má použiť. Uvedená musí byť celá sada písiem zodpovedajúca fontu (keďže stránka bude zobrazovaná na rôznych platformách, kde daný font nemusí byť k dispozícii), ktorý chceme použiť. V našom prípade je to Verdana.
- font-size, napríklad {font-size: 12pt;}. Font-size určuje veľkosť písma. Veľkosť písma sa môže zadávať v pixeloch (px), pointoch (bodoch, pt) alebo pomocou atribútov small, medium, large a podobne. V našom prípade sme nastavili veľkosť písma na 12 bodov.
- font-weight, napríklad {font-weight: bold;}. Font-weight: určuje hrúbku písma. V našom prípade sme určili, že písmo bude tučné.
- margin, napríklad {margin: 5px 5px 5px 5px;} Margin nastavuje odstup daného prvku od iného prvku. Prvá hodnota je odstup od vrchu, druhá hodnota je odstup od pravého okraju, tretia hodnota od spodku a posledná od ľavého okraju. Ak je odstup rovnaký ako v našom prípade, tak sa dá tento zápis skrátiť: {margin: 5px;}
- padding, napríklad {padding: 5px 5px 5px 5px;} Padding nastavuje odstup od okraja daného prvku. O hodnotách platí to isté ako pri vlastnosti margin a to sa aj týka zápisu, ak je odstup rovnaký. V našom prípade je tento odstup 5 pixelov.
- text-align, napríklad {text-align: right;} Táto vlastnosť určuje zarovnanie textu. V našom prípade bude text zarovnaný na pravú stranu.
- text-decoration, napríklad {text-decoration: unline;} Táto vlastnosť určuje akou dekoráciou bude písmo ozdobené. V našom prípade bude písmo podčiarknuté.
- vertical-align, napríklad {vertical-align: bottom;} Táto vlastnosť určuje vertikálne zarovnanie textu alebo prvkov v danom prvku.
Na záver tohto krátkeho oboznámenia sa s CSS vám odporúčam pre lepšie pochopenie CSS prečítať knižku Kompletný sprievodca CSS od Petra Staníčka, keďže nie som si istý, či ste všetkému porozumeli ;-)
Ale konečne späť k zmenám stránok na svoj obraz. Takže v bočnom panely, ktorý sa nám objavil a v záložkách, ktoré nám ponúka, máme k dispozícii aktuálne CSS, ak nejaké stránka má. V našom prípade sú k dispozícii tri záložky a to main.css, opäť main.css a main_end.css
Tieto pravidlá definované v CSS môžete začať okamžite upravovať alebo ich úplne vymazať a vytvoriť si vlastné. V našom prípade nám stačí, ak prepneme do záložky main_end.css a tú pomocou ikony clear vyčistíme. Nejdem Vám tu popisovať všetky zmeny, ktoré sa dajú vykonať a ako, predsa len človek sa najviac naučí tak, keď sám objavuje nové veci. A tak si v novom okne alebo záložke prehliadača otvorte túto stránku: http://blog.sme.sk/blog/82/875/sme.html
Na tejto stránke stlačíme klávesovú skratku CTRL + A, aby sme si vybrali kompletne celý text a ten skopírujeme pomocou klávesovej skratky CTRL + C, po prípade cez menu Edit si zvolíme položku Copy. Prepneme sa opäť na okno s našou stránkou, ktorú chceme zmeniť a do záložky main_end.css vložíme text, ktorý sme kopírovali a to buď pomocou klávesovej skratky CTRL + V alebo z menu Edit zvolíme položku Paste. Stránka by sa vám mala okamžite zmeniť do vzhľadu, ktorý som vytvoril ja, a ktorý môžete vidieť na obrázkoch nižšie:
Nejedná sa o nič zložité a vytvorenie môjho CSS trvalo asi tak 50 sekúnd (i s editovaním dvoch obrázkov), keďže som zmenil len pár hodnôt. Vy sa môžete na tejto stránke oveľa viac vybúriť a pomôcť by vám mali aj základy CSS, ktoré som vám uviedol o niečo vyššie. Nezabudnite si takto pozmenené CSS uložiť pomocou ikony Save v bočnom panely, keďže okamžite ako zatvoríte tento panel, tak sa stránka vráti do pôvodného stavu a vy si svoj vzhľad stránky budete musieť vždy nahrávať pomocou ikony Load.
Táto „finta“ funguje aj na stránkach, ktoré CSS nemajú definované, len im CSS vytvoríte vy. Opäť platí to isté, že zmeny si musíte uložiť a potom opätovne loadnuť, keď stránku zasa niekedy navštívite. Dakedy v ďalších spotoch vám celkovo priblížim rozšírenie Web Developer, ktoré je naozaj užitočnou pomôckou. Dúfam, že už sa nebudete prispôsobovať webom, ale vy budete prispôsobovať weby sebe.
PS: CSS blog.sme.sk som iba upravoval, nie vytváral!!!
