CSS3 stíluslapok készítése

CSS3 linkek

A linkek segítségével navigálunk weboldalaink között, és elérhetővé teszünk külső oldalakat. Stíluslapok felhasználásából egy egyszerű kék szöveg helyett dekoratív nyomógombként jeleníthetjük meg őket.

Programozott tananyag:

Linkek állapottól függő megjelenítése

Változtathatjuk egy-egy hivatkozás megjelenítési formáját különböző állapotaiban.

Inline link-gombok

A szövegben elhelyezett linkeket (a elemeket) osztályba sorolva közösen formázhatjuk. Beállíthatjuk a háttérszínt, feliratszínt. Adhatunk hozzá keretet, árnyékolhatjuk és lekerekíthetjük sarkait.

Fájlformátum dinamikus jelölése

A jellemzőérték-vége kijelölő felhasználásával automatikusan a link href tuladonságában megadott fálj típusától függő képet illeszthetünk a linkfelirat elé a :before álelem vagy mögé az :after álelem segítségével.

Linkgomb háttérképekkel

Az :a:link és :a:visited álelem kijelölőhöz egy közös, plusz az :a:hover és az :a:active álelem kijelölőkhöz egy-egy külön háttérképet rendelve egyszerűen készíthetünk linkből nyomógombot.

Linkgomb nyújtható háttérképpel

A link-felirat hosszától függően változó szélességű nyomógombokra lehet szükség. Ekkor nem érdemes a képeket minden méretben elkészíteni. Csak a legnagyobb szélességhez tartozó képeket készítjük el.

CSS3 linkgomb (LinkButton) készítése

Csupán CSS3 stílusdeklarációk felhasználásával is készíthetünk egy linkből nyomógombot.

Linkbe ágyazott kép

Hasznos lehet, ha a látogató egy-egy termék képére kattintva is eljuthat a terméket bemutató oldalra.

Linkben kép és link-felirat

Ha a kép nevét is megjelenítjük, és a felhasználó akár a képre, akár a link-feliratra kattintva eljusson a linkhez tartozó oldalra, akkor az egyik lehetőség az általános tárolóelemek (div-ek) használata.