Jak vytvořit styly s CSS

Odkazy jsou na webových stránkách velmi běžné, ale mnoho webových designérů si neuvědomuje, jakou sílu mají s CSS efektivně manipulovat a spravovat své odkazy. Můžete definovat odkazy s navštívenými, pohyblivými a aktivními stavy. Můžete také pracovat s hranicemi a pozadím, aby vaše odkazy více pizzaz, nebo aby vypadaly jako tlačítka nebo dokonce i obrázky.

Většina webových návrhářů začíná definováním stylu na tagu "a":

a {barva: červená; }}

To bude stylovat všechny aspekty odkazu (vznášet, navštívit a aktivní). Chcete-li stylovat jednotlivé části samostatně, musíte použít pseudotřídy odkazů.

Pseudotřídní odkazy

Existují čtyři základní typy odkazových pseudotříd, které můžete definovat:

Chcete-li definovat pseudo-třídu odkazu, použijte ji s značkou a ve voliči CSS . Chcete-li změnit navštívenou barvu všech odkazů na šedou, napište:

a: navštíveno {barva: šedá; }}

Pokud napíšete jeden pseudotřídový odkaz, je to dobrý nápad, jak je všechny stylovat. Tímto způsobem nebudete překvapeni cizími výsledky. Takže pokud chcete změnit navštívenou barvu na šedou, zatímco všechny ostatní pseudo-vlastnosti vašich odkazů zůstanou černé, měli byste napsat:

a: odkaz, a: vznášet se, a: aktivní {barva: černá; } a: navštíveno {barva: šedá; }}

Změňte barvy odkazu

Nejpopulárnější způsob, jak stylizovat odkazy, je změna barvy, když se myší pohybuje nad ním:

a {barva: # 00f; } a: podržte {color: # 0f0; }}

Ale nezapomeňte, že můžete mít vliv na to, jak odkaz vypadá, když kliknou na něj s: Aktivní vlastnost:

a {barva: # 00f; } a: aktivní {color: # f00; }}

Nebo jak se odkaz stará o to, že jste jej navštívili pomocí: navštíveného objektu:

a {barva: # 00f; } a: navštívil {color: # f0f; }}

To všechno dohromady:

a {barva: # 00f; } a: navštívil {color: # f0f; } a: podržte {color: # 0f0; } a: aktivní {color: # f00; }}

Umístěte pozadí na odkazy pro přidání ikon nebo odrážek

Můžete položit pozadí na odkaz, jak je to v článku Stylové pozadí, ale při malém přehrávání s pozadím můžete vytvořit odkaz, který má přidruženou ikonu. Vyberte ikonu, která je malá, kolem 15 pixelů až 15 pixelů, pokud text není větší. Umístěte pozadí na jednu stranu propojení a nastavte opakování na možnost opakovat. Poté vložte odkaz tak, aby se text uvnitř odkazu přesunul dostatečně daleko vlevo nebo vpravo pro zobrazení ikony.

{padding: 0 2px 1px 15px; pozadí: #fff url (ball.gif) left center no-repeat; barva: # c00; }}

Jakmile získáte ikonu, můžete nastavit jiný obrázek jako ikony vznášedla, aktivních a navštívených, abyste změnu odkazu provedli:

{padding: 0 2px 1px 15px; pozadí: #fff url (ball.gif) left center no-repeat; barva: # c00; } a: přejet {background: #fff url (ball2.gif) left center no-repeat; } a: aktivní {background: #fff url (ball3.gif) left center no-repeat; }}

Vytvářejte své odkazy jako tlačítka

Tlačítka jsou velmi populární, ale dokud se neobjeví CSS, musíte vytvořit tlačítka pomocí obrázků , díky nimž budou vaše stránky trvat déle. Naštěstí existuje hraniční styl, který vám pomůže s CSS snadno vytvořit efekt podobný tlačítkům.

{okraj: 4px počátek; polstrování: 2px; textová výzdoba: žádná; } a: aktivní {okraj: 4px vložka; }}

Všimněte si, že když vkládáte barvy na začátek a vkládané styly, prohlížeče nejsou tak pravděpodobné, že je budou vykreslovat tak, jak byste očekávali. Takže tady je fantazijní tlačítko s barevnými okraji:

{border-style: solid; šířka okraje: 1px 4px 4px 1px; textová výzdoba: žádná; polstrování: 4px; barva okraje: # 69f # 00f # 00f # 69f; }}

A můžete také ovlivnit vznášející se a aktivní styly tlačítka, ale použijte pouze tyto pseudo-třídy:

a: odkaz {border-style: solid; šířka okraje: 1px 4px 4px 1px; textová výzdoba: žádná; polstrování: 4px; barva okraje: # 69f # 00f # 00f # 69f; } a: podržte {border-color: #ccc; }}