Počas tejto série už bolo viackrát upozornené na štýlové súbory. Tieto štýlové súbory umožňujú striktné oddelenie rozloženia a dizajnu. HTML prvky sú vďaka CSS zodpovedné výlučne za logický alebo sémantický popis webového dokumentu.
Zvyčajne je na začiatku užitočné vedieť, ako štýlový súbor vlastne vyzerá. Pozrite sa na prvý príklad.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
p {
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#0066FF;
}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<p>dein Grafik-, Web- & Fotoportal</p>
</body>
</html>V prehliadači vyzerá dokument takto:
V časti body v HTML súbore boli definované dva prvky:
• nadpis
• odsek textu
Tieto dva prvky sú formátované pomocou CSS. Na tento účel je v časti head definovaná oblasť štýlového súboru pomocou elementu style. V rámci tejto oblasti sa uskutočňuje formátovanie prvkov.
Tu je ešte raz definícia pre nadpis h1:
h1 {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
Pomocou uvedenej syntaxe sú nastavené dve veci:
• Rodina písma je určená.
• Veľkosť písma je definovaná.
V tejto chvíli sa budeme zaoberať všeobecne použitou syntaxou. Každý CSS príkaz sa zásadne skladá z dvoch častí - selektoru a CSS deklarácie. Selektorom sa určuje prvok, ktorý sa má formátovať. Formátovanie jednotlivých prvkov určuje CSS deklarácia. Selektor je vždy na ľavej strane, CSS deklarácia je na pravej strane v zložených zátvorkách.
Skutočná CSS deklarácia sa zase skladá z dvoch prvkov, a to vlastnosti a hodnoty. Vlastnosť a hodnota sú oddelené dvojbodkou. Za hodnotou nasleduje bodkočiarka.
Selektor {
Vlastnosť: Hodnota;
}Zahrnutie štýlových súborov
Existuje mnoho rôznych spôsobov, ako zahrnúť štýlové súbory do webových stránok. Po prvé, môžete priamo priradiť štýlové inštrukcie k HTML značke. Príklad:
<h1 style="color: #0033CC;">PSD-Tutorials.de</h1>
V tomto príklade je nadpis zobrazený modrou farbou.
Môžete pridať viacero štýlových inštrukcií k jednej HTML značke.
<h1 style="color: #0033CC; background-color: #99FF66">PSD-Tutorials.de</h1>
Stačí ich jednoducho zapísať za sebou, oddelené bodkočiarkou.
V zásade sú tieto takzvané inline štýly užitočné len v prípade, že sa jednotlivé oblasti na stránke majú formátovať individuálne. Zvyčajne by ste sa však mali snažiť túto formu priameho formátovania vyhnúť, pretože tým sa kód HTML stáva neprehľadným.
CSS inštrukcie presunúť
Určite najpraktickejšou možnosťou definovania CSS je presunutie štýlov do externého súboru. Takto môže na ľubovoľný počet HTML súborov odkazovať rovnaký CSS súbor. To jednoducho umožňuje jednotnú formátovanie všetkých súborov patriacich k webovému projektu. Neskôr možné zmeny, ktoré sa majú týkať všetkých stránok, je tak možné realizovať bezproblémovo.
<link rel="stylesheet" type="text/css" href="css/styles.css">
V hlavičke HTML súboru je definovaný prvok link. Najskôr sa uvedie kombinácia atribút–hodnota rel="stylesheet". Potom nasleduje type="text/css". Atribútu href sa priradí príslušný CSS súbor. Dôležité je, podobne ako pri vkladaní obrázkov, správne nastavenie cesty. V aktuálnom príklade sa predpokladá, že sa CSS súbor styles.css nachádza v priečinku css, ktorý je opäť na rovnakej úrovni ako samotný HTML súbor.
Odkazovaný CSS súbor je bežný textový súbor s príponou css. V externej CSS súbore sa definujú príslušné CSS inštrukcie.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
Alternatívou k zobrazenému linku je možné tiež importovať štýly. Aj tu sa CSS príkazy nachádzajú v externom súbore. Pre túto účel je použitá nasledujúca syntax:
<style type="text/css">
@import url("css/styles.css");
</style>
V zátvorkách je uvedená cesta k CSS súboru, ktorý sa má importovať. Mimochodom, @import je CSS syntax. Preto môže byť @import príkaz použitý aj v rámci CSS súborov. To umožňuje z jedného štýlu volať iné štýly, čo umožňuje lepšiu organizáciu štýlov.
Zostáva otázka, či by sme mali používať link alebo @import. Zásadne uprednostňujem link, pretože táto možnosť je jednoducho rýchlejšia, teda výkon stránky je lepší.
Štýly pre rôzne média
Štýly je možné definovať pre rôzne média, ako sú napríklad tlačiarne alebo obrazovka. Na to sa používa atribút media. Môžete tiež priradiť jeden štýl viacerým médiam oddeleným čiarkou.
<link rel="stylesheet" media="screen" href="css/styles.css"> <link rel="stylesheet" media="print " href="css/druck.css">
V tomto prípade boli volané dva štýly, jeden pre obrazovku a druhý pre prípad, že stránka bude vytlačená. CSS súbor druck.css sa teda načíta pri volaní tlačovej funkcie prehliadača. Celkovo sú k dispozícii nasledujúce hodnoty pre media:
• all – Platí pre všetky výstupné média.
• aural – CSS súbor je určený pre výstupné hlasové systémy.
• braille – CSS súbor je určený pre bodové tlačiarne s haptickou spätnou väzbou, ktoré môžu vytvárať tzv. "slepecké písmo".
• embossed – Týmto sa obránia bodové tlačiarne.
• handheld – Určené pre prenosné zariadenia.
• print – CSS súbor platí pre tlač na papier. Prehliadače by mali automaticky pristupovať k tomuto súboru, keď je volaná tlačová funkcia.
• projection - Tento variant je určený pre projekčné prezentácie.
• screen – Určené pre zobrazenie na obrazovke.
• tty – CSS súbor platí pre médiá, ktoré používajú pevnú znakovú mriežku. Môžu to byť napríklad dialničné tlačiarne a terminály.
• tv – Adresované tvarom podobným televízii. Predpokladá sa, že tieto zariadenia majú nízke rozlíšenie a sú obmedzene posúvací.
Okrem uvedenej HTML syntaxe pomocou elementu link existujú aj špeciálne varianty CSS. Používa sa @import alebo @media.
<style type="text/css">
@media screen, projection {
/* Formáty pre obrazovku */
}
@media print {
/* Formáty pre tlač */
}
</style>
V rámci elementu style sa definuje pomocou @media oblasť pre definície formátov, ktoré sú určené pre konkrétne výstupné médium. Za @media sa musí vždy uviesť jeden z už opísaných typov médií oddelený medzerou. Viaceré typy médií sa zapisujú oddelené čiarkou.
