CSS Tutoriál

obrazok obrazok
picture

U?etrite ve?a práce s CSS!

V mojom CSS tutoriáli sa nau?íte, ako pou?i? CSS, aby ste mali pod kontrolou ?týl a vzh?ad viacerých stránok v jednom súbore.


?o je CSS?

  • CSS znamená Cascading Style Sheets
  • ?týly definujú, ako zobrazi? HTML elementy
  • ?týly sa normálne ukladajú do Style Sheetov
  • ?týly boli do HTML 4.0 pridané,aby rie?ili problém
  • Externé Style Sheety vám u?ah?ia ve?a práce
  • Externé Style Sheety sa usklad?ujú v CSS súboroch
  • Násobné definície ?týlov budú kaskádova? do jednej

S CSS budú môc? by? va?e HTML dokumenty zobrazené, s pou?i?ím rôznych ?týlov


?týly rie?ia be?ný problém

HTML tágy boli originálne designované na definíciu obsahu dokumentu. Predpokladalo sa, ?e budp vravie?, ?e "Toto je hlavi?ka", "Toto je odstavec", "Toto je tabu?ka", pou?itím tágov, ako <h1>, <p>, <table>, at?... Vzh?ad dokumentu bol predpokladaný, aby bral oh?ad na browser, bez pou?itia formátovacích tágov.

Ke? sa dva hlavné browsery - Netscape a Internet Explorer - rozhodli, ?e budú pridáva? nové HTML tágy a atribúty (ako <font> tag a color atribút) do originálnej HTML ?pecifikácie, za?alo to by? ?ím ?alej, tým ?a??ie, vytvára? Webové stránky, kde obsah HTML dokumentu bol jasne oddelený od prezentácie jeho vzh?adu.

Na rie?enie tohto problému, World Wide Web Consortium (W3C) - neziskové spolo?enstvo, nastavujúc ?tandardy, zodpovedné za HTML ?tandartizovanie - vytvorilo ?TÝLY z dôvodu HTML 4.0

V?etky hlavné browsery podporujú CSSka.


Style Sheety mô?u u?ah?i? ve?a práce

Style Sheety definujú, ako majú by? HTML dokumenty zobrazené, asi tak, ako font tag a color atribút v HTML 3.2 formátujú text. ?týly sa normálne ukladajú v externých .css súboroch. Externé Style Sheety vám povolujú zmeni? vzh?ad viac stránok na va?om Webe Z JEDINÉHO CSS SÚBORU!

CSS je pokrokom vo Web designe, preto?e to developerom povoluje ma? ?týly a vzh?ad viacerých Webových stránok pod kontrolou, na jeden raz. Ako Web developer mô?ete definova? ?týl pre ka?dý HTML element a aplikova? to na to?ko stránok, ko?ko budete chcie?. Aby ste urobili globálnu zmenu, jednoducho zmeníte ?týl v CSS dokumente a v?etky elementy na va?om Webe sa automaticky update-nú.


Viaceré ?týly budú kaskádova? do jedného

Style sheety povolujú informácií o ?týle, aby bola ur?ená viacerými spôsobmi. ?týly mô?u by? ur?ené vnútri jednoduchého HTML elementu, vnútri <head> elementu nejakej HTML stránky alebo v externom CSS súbore. Aj ke? viaceré externé ?týly mô?u by? odkazované vnútri jedného HTML dokumentu. 

Poradie kaskádovania

Ktorý ?týl sa pou?ije, ke? je viacej ?týlov ?pecifikovaných pre nejaký HTML element?

V?eobecne povedané, v?etky ?týly budú "kaskádova? do nového, "virtuálneho" style sheetu, následujúcimi pravidlami, kde ?íslo 4 má najvä??iu prioritu:

  1. Browser default
  2. Externý Style sheett
  3. Interný Style sheet (vnútri <head> tágu)
  4. Inline ?týle (vnútri nejakého HTML elementu)

Tak?e, inline ?týl (vnútri HTML elementu) má najvä??iu prioritu, ?o znamená, ?e prepí?e ?týl, deklarovaný vnútri <head> tágu, v externom CSSku alebo v browseri (defaultné hodnota)a default value).


obrazok obrazok