CSS - základy
Dedičnosť a kaskádovanie
Pri načítaní stránky klient postupne vytvára strom dokumentu podľa použitého objektového modelu (DOM). Počas tohto procesu každému prvku priradí hodnotu každej vlastnosti, ktorá je u daného prvku na danom médiu (obrazovka počítača, tlačiareň, zvukový výstup atď) použiteľná. Každá z týchto hodnôt prechádza tromi fázami výpočtu:
- najprv sa načíta definovaná hodnota - podľa pravidiel dedenie a kaskádovanie,
- potom sa táto hodnota, ak je to potrebné, prepočíta na absolútne jednotky - pixelmi pre obrazovku, metrické jednotky pre tlačiareň, farby sa konvertujú do jednotného farebného modelu atď
- na záver je prípadne upravená podľa možností výstupného média (zaokrúhlení na celé pixely, prispôsobenie farieb atď)
Dedičnosť v CSS
Niektoré vlastnosti sa môžu v rámci stromu dokumente dediť. To znamená, že ak nie je povedané inak, vlastnosť definovanú pre jeden prvok preberajú aj všetky objekty vo vnútri tohto prvku. Nededia sa ale všetky vlastnosti - každá vlastnosť má definované, či jej hodnota je alebo nie je dedičná.
Príklad:
<h1>Toto je <em>dôležitý</em> titulok</h1>
Ak nebude mať prvok em špecifikovanú vlastnost color, prevezme ju od rodičovského prvku h1 (z hľadiska stromu dokumentu je tu EM potomkom H1, pretože prvok EM je obsiahnutý vnútri prvku H1) - celý text titulku bude teda zobrazený rovnakou farbou textu.
Pravidlá pre určenie hodnôt CSS vlastností:
- Ak proces kaskády vráti nejakú hodnotu - t.j. vlastnosť je špecifikovaná nejakou definíciou štýlu, užívateľom atď - použije sa táto hodnota.
- Ak nie je vlastnosť explicitne určená kaskádou, hodnota sa dedí, t.j. použije sa hodnota, ktorá je definovaná pre rodičovský prvok (prvok nadradený v zmysle stromu dokumentu).
- Ak nie je možné túto vlastnosť zdediť (rodičovský prvok danú vlastnosť nemá definovanú, vlastnosť nie je dedičná, atď), použije sa predvolená hodnota. Každý prvok má definované predvolené hodnoty pre každú vlastnosť.
Hodnoty a jednotky
Ako už bolo uvedené v popise syntaxe pravidiel CSS, definície vlastností štýlov sa uvádzajú vo forme vlastnosť: hodnota. Tým sa danému prvku priradí vlastnosť s uvedenou hodnotou. Každá vlastnosť pritom môže nadobúdať len niektorých typov hodnôt, ktoré sú pre každú vlastnosť presne vymedzené: napr font-size (veľkosť písma) môže nadobúdať iba hodnoty určujúcich uplatniteľnú veľkosť písma - a napr hodnoty typu uhol, čas alebo farba tu nemajú zmysel.
Typy hodnôt a príslušné jednotky
Číselné hodnoty
- Rozoznávame celočíselné a reálne hodnoty. Celočíselné budeme označovať <celé číslo> a reálne čísla zápisom <číslo>
Veľkosti
- Relatívna veľkosť
- em - aktuálna veľkosť písma. Zodpovedá prepočítanej hodnote veľkosti písma v danom prvku. V samotnej definícii veľkosti písma (font-size) sa preberá veľkosť písma rodičovského prvku. Príklad: p (line-height: 1.5em) - výška riadku (prekladu) odsekov bude 1,5 násobok veľkosti písma v tomto odseku, naproti tomu p (font-size: 1.5em) - veľkosť písma v odseku bude 1,5 násobok veľkosti písma rodičovského prvku
- ex - zodpovedá približne výške malých znakov "bez nožičiek" (x, m, n). Pre jednoduchosť možno predpokladať, že ex je asi polovica em
- px - pixely - podľa daného zobrazovacieho zariadenia. Na bežnom monitore zodpovedá px jednému bodu obrazovky.
- Absolutne velkosti
- cm centimetre
- mm milimetre
- in palce
- pt "typografické body" - 1pt = 1/72 palca
- pc pica - 1px = 12pt
- Percentá
- Percentá sa uvádzajú v tvare <číslo>%
- URI
- Uniform Resource Identificator - platná webová adresa. Použité URI môže byť absolútny aj relatívny av definíciách CSS sa vždy zapisuje vo forme "funkcie": url (...) - napr: BODY (background: url ("/ img / pozadi.gif")), @ import url ( http://www.neco.cz/styly.css); atď
- Farby
- #rrggbb - Za znakom # nasledujú tri hexadecimálne čísla (00-FF), zodpovedajúce poporiadku hodnotám červenej (R), zelenej (G) a modrej (B) zložky farby.
- #rgb - Za znakom # nasledujú iba tri hexadecimálne číslice. Tento zápis sa prevádza na predchádzajúcu dlhší zápis v tvare #rrggbb
- rgb(r, g, b) - Zápis v tvare funkcie rgb (), ktorej parametre sú celé čísla 0-255.
- rgb (r%, g%, b%) - Parametre funkcie sú (reálna) čísla uvádzajúce percentuálny pomer RGB zložiek v rozmedzí 0.0% až 100.0%.
- Reťazce
- Skupina znakov uzavretá do jednoduchých alebo dvojitých úvodzoviek (značí sa <reťazec>).
