URL v CSS
Zápis adresy. Používá se zejména pro načítání obrázkového pozadí, ale také u grafických odrážek.
Symbolický zápis
css-vlastnost: url("adresa_objektu");
Příklad zápisu
background-image: url("pozadi.gif");
uvozovky se dají nahradit apostrofy:
background-image: url('pozadi.gif');
v různých starších prohlížečích fungují také varianty:
background-image: url(pozadi.gif);
nebo (netestováno)
background-image: pozadi.gif;
URL v adrese může být i absolutní.
Příklad zápisu grafické odrážky
li {list-style-image: url("odrazka.gif");}
Oddělovače
Následující zápisy jsou co do efektu rovnocenné:
background-image: url('pozadi.gif');
background-image: url("pozadi.gif");
background-image: url(pozadi.gif);
Mají se psát uvozovky, apostrofy nebo nic?
- Bez vymezovačů by mohly vznikat chyby (zvláště u delších názvů s nejistými znaky).
- Uvozovky jsou správné, ale selhávají v in-line zápisu:
<p style="background-image: url("...
a to už je chyba. V in-line zápisu je potřeba uvozovky a apostrofy střídat. Toto je správný zápis:
<p style="background-image: url('pozadi.gif');">nebo též
<p style='background-image: url("pozadi.gif");'> - V praxi je tedy potřeba naučit se psát apostrofy. Na české klávesnici se dělají např. kombinací Alt + 39 nebo Shift s takovou divnou klapkou \.
- Doporučuju stanovit si svůj styl a ten dodržovat všude (např. všude jenom uvozovky a apostrofy pouze v in-line zápisu). Dodržováním stylu se předchází zbytečným chybám.
Import stylu
Styly se dají připojit tagem link, ale také zápisem @import. Zápis je následující:
<style>
@import url("soubor.css");
</style>
Podle toho, jak se při tom použijí nebo nepoužijí uvozovky či závorky, to různé verze prohlížeče IE 4 sežerou nebo nesežerou. Ale IE4 už se moc nevyskytuje, takže ani nevím, jak se to píše.
Zápis s @import je alternativou k zápisu tagu link:
<link rel="stylesheet" href="soubor.css">
Na zápisu @import je zajímavé, že v prohlížeči Internet Explorer nečeká prohlížeč s vykreslováním stránky na načtení celého stylu, jako v případě zápisu přes <link>. Takže s @import stránka při načítání jakoby "poskakuje", na druhou stranu je to rychlejší a uživateli se alespoň něco objeví velmi brzo.
Nejčastější chyby
Špatné odvození relativní adresy
V případě použití externího css souboru se relativní adresy vyhodnocují od tohoto externího css souboru, nikoliv od html stránky. Příklad:
Mám tři soubory:
/index.html
/obrazky/pozadi.gif
/styly/styl.css
Když budu chtít zadat obrázkové pozadí přímo do stránky, tak je to takhle:
<body style="background-image: url('obrazky/pozadi.gif');">
Ale když to budu psát do souboru styl.css (který je v jiném adresáři), tak ta adresa bude jiná:
background-image: url('../obrazky/pozadi.gif');
Velká / malá písmena
Někdy stránky ladíte na lokálním disku a fungují. Pak je hodíte na ostrý server a začne to být rozbité. Problém je často v malých a velkých písmenech.
- Zatímco systém Windows velká a malá písmena v adresách nerozlišuje,
- Linux velikost písmen rozlišuje.
Většina lokálních počítačů jsou Windows, naopak servery jedou většinou na systému Linux. Řešení je třeba všechny soubory přejmenovat na malá písmena a přepsat to tak i v css a html.
Reklama
