Zobrazenie zdroja stránky CSS - základy

{{Navigacne menu - webovske technologie}}
==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:
<source lang="html4strict">
  <h1>Toto je <em>dôležitý</em> titulok</h1>
</source>

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ť <nowiki><celé číslo></nowiki> a reálne čísla zápisom <nowiki><číslo></nowiki>

'''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 <nowiki><číslo>%</nowiki>
*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: <nowiki>BODY (background: url ("/ img / pozadi.gif")), @ import url ( http://www.neco.cz/styly.css)</nowiki>; atď
*Farby
** '''<nowiki>#rrggbb</nowiki>''' - Za znakom <nowiki>#</nowiki> nasledujú tri hexadecimálne čísla (00-FF), zodpovedajúce poporiadku hodnotám červenej (R), zelenej (G) a modrej (B) zložky farby.
** '''<nowiki>#rgb</nowiki>''' - Za znakom <nowiki>#</nowiki> nasledujú iba tri hexadecimálne číslice. Tento zápis sa prevádza na predchádzajúcu dlhší zápis v tvare <nowiki>#rrggbb
</nowiki>
** '''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 <nowiki><reťazec></nowiki>). 

<source lang="html4strict">
</source>