CSS

CSS – cascade style sheet (kaskádový stylopis) udává styl elementů. Takže na webových stránkách vytovříme a rozmístíme elementy pomocí HTML a pomocí CSS pak řekneme jak mají vypadat.

CSS lze použít i na jiné jazyky (XML, XHTML), ale nejde použít samostatně – jelikož samo nic nevytváří. Naopak v kombinaci s HTML je základním stavebním kamenem každého webu a vším co je potřeba k vytvoření statické webové stránky. Definuje styly pro standardní elementy a uživatelem nadefinované třídy (.class) a identifikátory (#id).

Zapisuje se buď to značky <style> v rámci dokumentu HTML anebo se dává do externího souboru s koncovkou .css. Všechny styly se zapisují do složených závorek. Takže například p{color:green;} nastavuje všem odstavcům barvu písma na zelenou.

CSS upravuje povětšinou viditelné vlastnosti prvků – tedy jejich barvu, velikost, ohraničení, styl písma, pozadí aj. Důležitou součástí je i jejich rozmístění a velikost – můžeme jim zadat fixní šířku a výšku, můžeme nastavit obtékání textu – tedy fakticky jak se budou skládat vedle sebe, pod sebe a v rámci textu. Každá viditelná vlastnost lze nastavit a upravovat v CSS. Na druhé straně CSS nemůže budovat (i když CSS3 nabízí požnost tvorby pseudo prvků)

Aktuální verze CSS je 3, ale je zpětně kompatibilní se staršími verzemi. Je normální používat mix všech příkazů  ze všech verzí. Jako u HTML, rozpoznat a vytvořit dokument dle CSS dělá až prohlížeč na straně uživatele a výsledek se tak může lišit dle použitého prohlížeče a jeho verze (například v Internet Exploreru 6 nefunguje skoro nic). Takže opět existuje mnoho užitečných zápisů a doporučený standard, ale vždy musíme pracovat tak, aby ho většina uživatelů mohla zobrazit. Existují základní CSS, zvané reset.css, které upraví a vyrovnají rozdíly mezi prohlížeči, abychom nemuseli v každém projektu myslet na to, že firefox počítá jiné mezery, než IE.

CSS je kaskádový stylopis, takže styly se se mohou vrstvit (kaskádovat) přes sebe s tím, že je jasně určené, který bude mít prioritu a který se použije. Takže jedním příkazem nastavím barvu všem odstavcům, druhým barvu odstavců pouze v hlavičce a třetím třeba přímo konkrétnímu prvku. Pokud se kaskády používají chytře mohou ušetřit spoustu práce a zjednodušit stylování celého webu.

Stránka může mít připojeno neomezeně souborů s CSS, takže je třeba dávat pozor, aby se nám v názvu tříd neobjevovala stejná jména. Je dobré si třídy pojmenovávat přehledně, jasně a unikátně. Například .levySloupec, nebo #hlavniMenu.

Jelikož nastylovat všechny elementy je spousta práce, existují předdefinované frameworky, které nastavují styly základních elementů do moderní, použitelné podoby. Nejoblíbenější je jistě Bootstrap (getbootstrap.com) o kterém také přinášíme video tutoriály. Stejně jako o základním CSS

 

Mohlo by se vám líbit...

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *