CSS link és lista formázások

A mai napon a linkek és listán formázásával fogunk kicsit részletesebben megismerkedni. 


LINKEK FORMÁZÁSA:


Mindenek előtt meg kell ismerkednünk néhány elemmel:

• a:link - egy normális, még meg nem látogatott link
• a:visited - meglátogatott link
• a:hover - link, melyen éppen rajta van a kurzor
• a:active - kattintás pillanatában a link

Mindegyiket tudjuk külön formázni a CSS legtöbb tulajdonságával (background, color, font-family...)

a:link {color:#FF0000;}      /* még nem látogatott link */
a:visited {color:#00FF00;}  /* már meglátogatott link */
a:hover {color:#FF00FF;}  /* kurzor alatti link */
a:active {color:#0000FF;}  /* kiválasztott link */

Ilyenkor a még nem látogatott link piros, a meglátogatott zöld, a kurzor alatti lila, a kiválasztott pedig kék. 

Itt megnézhetitek működés közben.

Van néhány szabály is, melyeket be kell tartani:

• a:hover-t mindig az a:link és az a:visited után kell megadnunk.
• a:active-t mindig az a a:hover után kell megadni.

LINK DEKORÁLÁSA:

Linkeknél is, úgy mint a szövegeknél, meg tudjuk adni, hogy legyen vagy ne legyen dekorálva a szövegrészünk, linkünk. Ugyan azokat az elemeket, tulajdonságokat használjuk, mint a szövegek esetén. 

a:link {text-decoration:none;}     /* még nem látogatott link */

a:visited {text-decoration:none;} /* meglátogatott link */

a:hover {text-decoration:underline;}   /* kurzor alatti link */

a:active {text-decoration:underline;}  /* kiválasztott link */

Ilyenkor a látogatatlan és a meglátogatott linken nincsen semmi dekorálás, míg a kurzor alatti és a kiválasztott link alá van húzva. Lehetséges értékeit itt megnézhetitek.

LINK HÁTTÉRSZÍNE:

Megadhatjuk a link háttérszínét. Itt is ugyanazokat az elemeket, tulajdonságokat használjuk mint szövegeknél. 

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

Ilyenkor a látogatatlan link színe világoszöld, a látogatotté sárga, a kiválasztott és kurzor alatti pedig pirosas.

Ezek voltak a leggyakrabban használt link formázások, de mint mondtam, a legtöbb szöveg formázás alkalmazható linkeknél, szóval ezeken kívül rengeteg lehetőségünk van.

---

LISTAFORMÁZÁSOK:
A listák tanulásánál megbeszéltük, hogy kétféle lista van.

• rendezett: a listaelemek számokkal vannak jelölve
• rendezetlen: a listaelemek egyforma karakterekkel vannak jelölve

A CSS-ben a listánkat sokkal részletesebben formázhatjuk. A leggyakrabban használtakat fogjuk most megnézni.

KÜLÖNBÖZŐ LISTAELEM JELÖLŐK:

Az CSS Alapok leckében megbeszéltük az ID-k és CLASS-ok használatát. A listák esetében úgy tudunk különböző jelölőket beállítani, hogy a HTML-kódban az <ul>, <ol> illetve <li> tageknek különböző id-ket állítunk be. A jelölőket pedig a a list-style-type segítségével változtathatjuk. 

Nézzünk meg két lista HTML kódját:

<ul>

      <li>elem1</li>

      <li>elem2</li>

</ul>

<ul>

      <li>elem1</li>

      <li>elem2</li>

</ul>

Ha az szeretnénk, hogy az első lista jelölői ne körök, hanem négyzetek legyenek, akkor a második listának adjunk egy "negyzet" id-t.

<ul>

      <li>elem1</li>

      <li>elem2</li>

</ul>

<ul id="masodik">

      <li>elem1</li>

      <li>elem2</li>

</ul>

A CSS kódunk pedig így fog kinézni:

ul#masodik{

list-style-type:square;

}

Nézzük meg itt az első sort. Ugye az <ul> tagen belül vagyunk. De ilyenkor mindkét felsorolásra érvényes lenne a formázás. Az CSS Alapok leckében megnéztük, hogy az id-re # segítségével hivatkozunk. Tehát az  masodik id-jű <ul> felsorolásra vonatkozik. 

Ezt megtehetjük a listaelemeknél

Eredmény

KÉP BEÁLLÍTÁSA JELÖLŐKÉNT:

A list-style-image segítségével tehetjük meg.

ul
{
list-style-image: url('sqpurple.gif');
}

EREDMÉNY (W3-AS SZERKESZTŐVEL)

Eredmény

LIST-STYLE-POSITION:

Segítségével megadhatjuk a jelölő elhelyezkedését. Értéke kétféle leheT:

outside:

• Coffee
• Tea
• Coca-cola

inside:

• Coffee
• Tea
• Coca-cola

Értékeit itt kipróbálhatjátok.


VÍZSZINTES LISTA


A display tulajdonság inline értékével tehetjük meg.

li{
display:inline;
}

Ezzel végeztünk is mára. Holnap megnézzük a táblázatok formázását, mellyel elérkezünk a w3-as tananyag formázás részének a végéhez. Utána pedig belevágunk a dobozmodellbe, ami egy kicsit nehezebb lesz mint az eddigiek...