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? 

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.

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

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.