Home » Školení » Internetový design » Programming CSS

Programming CSS

… pro naformátování vzhledu šablon.


Formátování HTML

Každý text má obsah a formu. Když mluvím o formátu (formě) webových stránek, myslím tím třeba barvu a velikost písma, pozadí, zarovnání atd., prostě všechno, co nepatří do obsahu. To je formátování.

Protože se jazyk HTML vyvíjel, vznikaly časem různé způsoby, jak formátovat text. Proto dnes existují dva odlišné způsoby, jak v HTML třeba obarvit písmo nebo ztučnit text.
1. Starší způsob používá přímo HTML tagy. (Například kurzíva se dělá pomocí tagů <i> a </i>: <i>kurzíva</i>). Pomocí tagů se některé věci nedají udělat.
2. Novější způsob — CSS styly — používá tag <style> a obecný atribut „style“, kterému se přiřazuje nějaká definice. Je to složitější, ale užitečnější a všeobecné. Dají se s tím dělat různé fígle, které budu popisovat níže.

Co je CSS?

CSS vzniklo někdy kolem roku 1997. Je to kolekce metod pro grafickou úpravu webových stránek. Ta zkratka znamená Cascading Style Sheets, česky „kaskádové styly“. Kaskádové, protože se na sebe mohou vrstvit definice stylu, ale platí jenom ta poslední. To teď není důležité.

Už je na světě návrh CSS 2, vylepšené a složitější formy stylů, které ale v nejrozšířenějším prohlížeči Internet Exploreru moc nefungují.

Zařízení bez podpory

CSS zatím nepodporují mobilní zařízení, například prohlížeče Ipaqů. I v nich ale jde text přečíst. CSS nepodporují ani velmi staré prohlížeče (Explorer 2 a Navigator 3), které se však už nikde nevyskytují, a textové prohlížeče (lynx, links), v takových se text nezformátuje (zůstává čitelný).

Kdy používat CSS

V první řadě je potřebná znalost HTML (alespoň částečná). Pokud HTML ani trochu neznáte, není třeba číst dál. Ale i pak je pouze pět případů, kdy se opravdu vyplatí zajímat se o CSS styly:

  • buďto si chcete dát na stránku nějaký formátovací špek, který se nedá udělat normálně,
  • často píšete texty určené pro Internet a nechcete ztrácet čas složitým formátováním,
  • zabýváte se skriptováním, zejména Javascriptem
  • spravujete (či zatím jen plánujete) větší web s mnoha stránkami, které by měly vypadat podobně,
  • nebo prostě nechcete být mimo mísu, když se mluví o stavbě stránek.

Jinak se to asi nevyplatí.

Nástin možností CSS

Opravdu jenom nástin. (Kdyžtak vizte kompletní přehled.) Tak co třeba CSS dovedou:

  • Nastavit libovolnou a přesnou velikost písma, prokládání, kapitálky
  • Udělat odsazení prvního řádku odstavce, zvětšit řádkování
  • Zrušit nebo zvětšit prázdný prostor po odstavci
  • Automaticky formátovat nadpisy (například je všechny udělat zelené)
  • Zvýrazňovat odkazy po přejetí myší
  • Udělat automaticky grafické odrážky
  • Určité části textu zneviditelnit, zprůhlednit nebo nezobrazit
  • Předefinovat grafický význam běžných tagů (například všechno, co je kurzívou, udělat i tučně)
  • Nastavit pozadí čehokoliv, stránky, tabulky ale třeba i odstavce; pozadí se nemusí opakovat a může mít přesnou pozici!
  • Umístit nějaký objekt (třeba kus textu) kamkoliv do stránky, může se to i překrývat
  • Přidat k čemukoli rolovací lišty, oříznout to, orámovat, nastavit okraje
  • V kombinaci se skripty je dnes CSS nejmocnější zbraň pro „rozhýbání“ stránek.
  • Hlavní význam CSS spočívá v tom, že fungují hodně automaticky, přečemž se vzhled celého webu deklaruje jedním souborem.

Bylo by ale nefér, kdybych zamlčel, že CSS mají některé chyby a omezení, kvůli kterým jsou mnohými rejpaly zavrhovány. Jak přicházejí nové prohlížeče, tato omezení jsou stále menší.

Trojí použití CSS

Styl se může nadeklarovat třemi způsoby, níže uvádím příklady. Stačí, když se pro začátek naučíte naučíte jeden ze tří způsobů:

  1. Přímo v textu zdroje u formátovaného elementu pomocí atributu style=“…“. Tomu říkám přímý styl. Je to nešikovné, ale občas se to používá.
  2. Pomocí „stylopisu“ (angl. „stylesheet“) v hlavičce stránky. Stylopis je jakýsi seznam stylů. Je v něm obecně napsáno, co má být jak zformátováno, například že nadpisy mají být zelené. Do stránky se stylopis píše mezi tagy <style> a </style>.
  3. Použitím externího stylopisu — to je soubor *.css, na který se stránka odkazuje tagem <link>. V souboru je umístěný stylopis. Hlavní výhoda je v tom, že na jeden takový soubor se dá nalinkovat mnoho stránek, takže pak všechny vypadají podobně.

Samozřejmě stačí ovládnout jenom jeden způsob.

Text převzat z http://www.jakpsatweb.cz