CSS v externom súbore

Na začiatku sekcie jazyka CSS sme si povedali, že štýl môžeme zadávať tromi spôsobmi. Najprv sme si zadávali dizajn priamo v tagoch pomocou atribútu style a neskôr sme si ukázali, ako definovať štýl globálne pre celý súbor v hlavičke v tagu style. Na začiatku tejto sekcie sme si vysvetlili, že každá stránka a jej webstránka je v podstate jeden samostatný súbor, následne sme si naprogramovali stránku aj s jednou podstránkou, takže sa skladala z dvoch súborov. Predstavte si, že by sme tieto dve podstránky chceli aj naštýlovať. Webstránka ako taká má vo väčšine nejaký základný dizajn – šablónu, ktorý je spoločný pre všetky jej podstránky. V praxi sa zvykne meniť iba vzhľad samotného obsahu, čiže v strede stránky. Hlavička, pätička alebo bočné sekcie bývajú vo väčšine nezmenené. Dizajn pre naše dve stránky by sme s našimi vedomosťami definovali v hlavičke každého súboru. Keďže veľká časť dizajnu by bola rovnaká pre obe stránky, obsahovali by naše dva súbory veľkú časť rovnakého kódu.

Ako vieme, jedno z našich kardinálnych pravidiel je neopakovať zbytočne nejaké časti kódu. Aj z tohto dôvodu je najlepším a aj najpoužívanejším riešením definovať štýl v samostatnom súbore. Podobne, ako sme zadávali pravidlá pre typy elementov, pre triedy a pre elementy s konkrétnym id v tagu style v hlavičke súboru html, tak budeme definovať štýl v samostatnom súbore. Tento súbor môže mať ľubovoľný názov a príponu css, ktorá hovorí, že obsahuje kód jazyka CSS. V kapitole jazyka HTML, kde sme si preberali základnú štruktúru stránky, sme si spomenuli, že hlavička (head) slúži na zadávanie viacerých informácií o stránke a takisto v nej definujeme všetky súbory, ktoré chceme spolu s webstránkou načítať, resp. ktoré chceme na webstránke použiť (obsah daných súborov). A práve do hlavičky zadefinujeme načítanie – importovanie nášho súboru s dizajnom.

Vráťme sa k nášmu projektu (4-Projekt1), vytvorme si nový súbor a nazvyme ho global.css. Tento súbor bude predstavovať hlavný dizajn pre našu stránku. Takýto súbor sa zvykne nazývať slovom global (globálny), main (hlavný), basic (základný) a podobne. Niekedy, ak má stránka k dispozícií viacero dizajnov, zvykne sa nazývať nejakým kľúčovým slovom pre daný dizajn, napríklad design1, style_grey a podobne. Je dobré nazvať súbor výstižne, pretože ste správne pochopili, súborov s dizajnom môžeme mať viacej, k praktickému využitiu sa dostaneme neskôr aj my... Stránky nášho projektu (našej webstránky) obsahujú odkazy, ktoré zatiaľ nemajú dizajn. Zadefinujme si preto nejaký štýl pre naše odkazy, aby vyzerali ako položky menu. Môžeme použiť podobný dizajn, aký sme použili už dávnejšie, je to však samozrejme ľubovoľné, správanie stránky to nijak neovplyvní. Kód dizajnu vložíme do súboru global.css:

global.css:

.pretty{
    color: black;
    text-decoration: none;
    border: 3px solid green;
    background-color: white;
    text-align: center;
    padding: 10px 50px;
}

.pretty:hover{
    background-color: green;
    color: white;
    border: 3px solid blue;
}

.pretty:active{
    background-color: yellow;
    color: blue;
    border: 3px solid blue;
}

Všimnite si, že sublime nám opäť pekne zvýraznil a detekoval kód jazyka CSS. Keď už máme zadefinovaný dizajn, použime túto triedu na naše odkazy. Teraz nám ostáva už len importnúť súbor global.css do našich dvoch webstránok. Importovanie externých (vonkajších) súborov do webstránky sa vykonáva pomocou nepárového tagu link. Pomocou jeho atribútov určujeme, o aký súbor, a typ súboru sa jedná. Na určenie typu slúži atribút type (typ) a v našom prípade bude obsahovať hodnotu text/css. Atribút href slúži na zadefinovanie URL adresy súboru, čiže značí cestu k danému súboru, odkiaľ má byť načítaný. Okrem týchto dvoch atribútov budeme používať ešte jeden, ktorý je povinný a jeho názov je rel. Tento atribút určuje vzťah (relation – vzťah) medzi aktuálnym dokumentom a nalinkovaným dokumentom, v našom prípade bude jeho hodnota stylesheet (hárok so štýlom). Poďme si teda vyskúšať importovať tento súbor, kód súboru index.php by mal teda vyzerať nasledovne:

index.php:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="global.css">
    </head>

    <body>

        <h1>Vitajte na domovskej stranke!</h1>
        <a href="index.php" class="pretty">Domov</a>
        <a href="page2.html" class="pretty">Stranka 2</a>

    </body>
</html>

Kód súboru page2.html je takmer taký istý ako kód súboru index.php, rozdiel je len v texte v nadpise, aby sme okamžite vedeli, kde sa nachádzame. Možno sa vám stalo, že ste súbor naimportovali správne, prepli ste sa do prehliadača, klikli na jednu zo stránok cez menu a dizajn sa na stránke aj tak neprejavil. Je to preto, pretože dizajn stránok si prehliadač pamätá, resp. si pamätá obsah načítaných súborov. Pri práci s dizajnom a teda jazykom CSS musíte na toto myslieť, že pri zmenách v kóde je na ich prejavenie (skontrolovanie) nutné refrešnutie stránky pomocou tlačítka na to určeného (ikona skrútenej šípky v tvare kruhu), niekedy aj dvakrát.

Importnutie dizajnu z externého súboru má nespočetne veľa výhod. Napríklad zvyšuje to prehľadnosť kódu stránky, HTML a PHP je v jednom súbore a dizajn je v druhom. Zložitejšie webstránky a webové systémy sa skladajú z množstva zdrojových súborov (niekoľko desiatok) a keby bolo všetko krížom krážom, programátori by sa v tom stratili. Práve preto je zvykom takto oddeľovať kód do jednotlivých súborov. Okrem toho sa zvyknú v projekte vytvoriť samostatné adresáre pre súbory s dizajnom, pre obrázky, pre zdrojové súbory (HTML + CSS), aby bola aj celkovo štruktúra projektu prehľadnejšia, neskôr si to rozdelíme tak aj my. Ďaľšou výhodou je, že ako sme už spomenuli, dizajn môže byť rozdelený do viacerých súborov, môžeme napríklad kľudne aj importnúť do jednej webstránky desať rôznych CSS súborov, podľa potreby. Ak napríklad pracujeme na viacerých rôznych projektoch, ale máme časť dizajnu rovnaký pre všetky projekty, táto časť štýlu môže byť v jednom súbore, ktorý si importnú všetky projekty a konkrétny dizajn pre jednotlivé projekty môže byť zase v druhom. Týmto spôsobom môže mať programátor – dizajnér nejaké svoje často používané pomocné triedy štýlu, napríklad pre základné okraje elementov, orámovanie a podobne a môže ich ľahko pridať do všetkého, na čom pracuje a využívať, čo potrebuje.

Ďalšou výhodou je, ako sme už dávnejšie spomenuli, že v prípade práce na novom dizajne alebo na zmenách súčasného dizajnu, nemusí dizajnér vstupovať do súborov so zdrojovým kódom. Kľudne si môže pracovať na novom dizajne alebo meniť súčasný dizajn bez toho, aby vchádzal do súborov, kde je zdrojový kód stránky a na ktorom pracujú vývojári (web developeri). Často sa stáva, že stránka má nejaký svoj dizajn a rozhodne sa pre celkovú zmenu dizajnu. Počas práce na novom dizajne sa stále používa starý, ale dizajnér už pracuje na novom v novom súbore. Pomocou tagu link si striedavo nastavuje, ktorý dizajn sa používa a takisto pri testovaní nového dizajnu si môže prepínať medzi viacerými dizajnami – podobami stránky. Často majú stránky možnosť pre používateľa nastaviť nejaký vlastný štýl stránky, v praxi to znamená, že podľa nastavenia používateľa sa len načítava príslušný súbor css.