| Formátovanie prvkov stránky | |||||||||||||||||||
| je vlastne určovanie vzhľadu jednotlivých prvkov stránky, ako napr. veľkosť a farba písma, zarovnanie, farba pozadia, obrázok pozadia, obtekanie textu, okraje, vzhľad tabuľky - farby, okraje, medzery a podobne. | |||||||||||||||||||
| Ak v našej stránke nezadáme pravidlá pre písmo a vzhľad stránky, o jej zobrazení rozhodne typ a nastavenie web prehliadača. Teda tú istú stránku môžme zobraziť na rôznych počítačoch rôzne. Aby sa to nestalo, je potrebné zadávať vlastnú podobu stránky = formátovanie. | |||||||||||||||||||
| Dá sa urobiť 4 spôsobmi: | |||||||||||||||||||
| 1. Priamo v tele stránky na mieste formátovaného prvku - individuálne štýly | |||||||||||||||||||
| už sme sa s ním stretli - pri texte a tabuľkách, napr.: | |||||||||||||||||||
| <h1 style="color: gray; font-size: 24px;">Toto je nadpis 1!</h1> | |||||||||||||||||||
| nastavujú len ten element, v ktorom sú uvedené. Je veľmi prácne a nevýhodné ich používať. | |||||||||||||||||||
| Používajú sa IBA ak chceme urobiť vynimku z pravidla, t.j. napr. jeden nadpis chceme aby bol iný, ako ostatné, tak vtedy ho zadáme takto. | |||||||||||||||||||
| 2. Vložením do hlavičky stránky - pred element </head> | |||||||||||||||||||
| Vkladajú sa do hlavičky a majú vplyv len na dokument, v ktorom sú uložené. Je dobré ich použiť pri príprave stránky a na konci práce ich vystrihnúť a vložiť do prázdneho .css dokumentu, čím vytvoríme najvýhodnejší typ 3. | |||||||||||||||||||
| Sú vždy v hlavičke, a najvýhodnejšie je ich dať pred jej koniec </head> | |||||||||||||||||||
| Začínajú sa <style type="text/css"> .... a končia </style> | |||||||||||||||||||
| <head> | |||||||||||||||||||
| <title> Práca so štýlmi </title> | |||||||||||||||||||
| <style type="text/css"> | v nasl. riadku sa zadá pozadie stránky na čierne a farba písma na bielu | ||||||||||||||||||
| body {background-color: black; color:white;} | |||||||||||||||||||
| h1 {font-size: 24px;} | tu sa zadá veľkosť písma nadpisu 1 na 24 pixelov | ||||||||||||||||||
| p {font-size: 12px;} | tu sa zadá veľkosť písma na 12 pixelov | ||||||||||||||||||
| </style> | |||||||||||||||||||
| </head> | |||||||||||||||||||
| 3. Pripojením externého súboru (v hlavičke) typu .css v ktorom sú všetky pravidlá formátovania | |||||||||||||||||||
| je najvýhodnejšie, lebo: | |||||||||||||||||||
| 1. Akúkoľvek zmenu urobíme rýchlo v prehľadne BEZ otvorenia samotnej stránky | |||||||||||||||||||
| 2. Zmena sa prejaví NARAZ vo všetkých stránkach pripojených na tento štýl | |||||||||||||||||||
| 3. Samotné stránky sú menšie a tým sa rýchlejšie načítajú | |||||||||||||||||||
| 4. Stránky sú prehľadnejšie a ľahšie sa upravujú | |||||||||||||||||||
| 5. Súbory .css ostávajú načítané v medzipamäti prehliadača, takže ich stále nanovo nesťahuje, takže stránky sú rýchlejšie zobrazené. | |||||||||||||||||||
| V hlavičke stránky sa urobí takýto odkaz: | |||||||||||||||||||
| <link rel="stylesheet" type="text/css" href="styly.css" media="all" /> | |||||||||||||||||||
| pričom styly.css je názov nášho súboru so štýlmi. Ten si dajte aký chcete, len musí byť správne uvedený aj v tomto riadku. | |||||||||||||||||||
| 4. Importovaním externého súboru .css do stránky | |||||||||||||||||||
| Je to kombinácia bodu 2 a 3: | |||||||||||||||||||
| 1. musíte mať súbor so štýlmi typu .css, napr. styly.css | |||||||||||||||||||
| 2. v hlavičke potom dáte príkaz | |||||||||||||||||||
| <style type="text/css"> @import url(styly.css); </style> | |||||||||||||||||||
| 3. príkazy súboru styly.css budú potom importované priamo do našej stránky tak, ako keby ste ich tam napísali (priamo do hlavičky, ako v bode 2) | |||||||||||||||||||
| Pravidlá CSS | |||||||||||||||||||
| sú jednoduché. Skladajú sa zo selektorov a aspoň jednej deklarácie. Príklad: | |||||||||||||||||||
| h1 {background-color: black; color:white;} | |||||||||||||||||||
| h1 je selektor - určuje čoho sa štýl týka (teraz nadpisu 1) | |||||||||||||||||||
| v zátvorkách sú 2 deklarácie. Najprv sa píše vlastnosť (farba pozadia) a za dvojbodku a medzeru hodnota (black). Jednotlivé deklarácie sú oddelené bodkočiarkou a medzerou!! (alebo aj novým riadkom) | |||||||||||||||||||
| Poznámky píšeme: | |||||||||||||||||||
| /* poznamka */ | |||||||||||||||||||
| Vytvorenie vlastnej triedy - vlastného štýlu | |||||||||||||||||||
| Používa sa stále častejšie. Ak chceme vytvoriť vlastné štýly s vlastným názvom, a tie potom ľubovoľne v dokumete použiť, postupujeme takto: | |||||||||||||||||||
| 1. V hlavičke zadefinujeme jeho názov a vlastnosti | |||||||||||||||||||
| .detailText { | názov je detailText | ||||||||||||||||||
| font:11px arial; | typ a veľkosť písma | ||||||||||||||||||
| color:#ffffff; | farba | ||||||||||||||||||
| line-height:16px; | výška riadka | ||||||||||||||||||
| letter-spacing:.1em; | medzera medzi písmenami | ||||||||||||||||||
| } | |||||||||||||||||||
| 2. Priamo v dokumente na mieste, kde chceme štýl pouťiť dáme class="nazov" | |||||||||||||||||||
| <p class="detailText">Dodatky</p> | |||||||||||||||||||