<? print $_ASWC_['NAME'];?> - Tanulj, vagy taníts te is on-line!

<- Előző :: Nyomtatási nézet :: Üzenet az írónak :: Köv. ->

A listák weboldalaink felépítésében, arculatában fontos szerepet töltenek be.
A CSS is számtalan formázási lehetőséget nyújt számunkra. Egy lista betöltheti az oldal menüjének szerepét is különböző tulajdonságaik beállításával.
A listákat általában két dologra használják:

-a fent említett menük alapjaként
-eredeti rendeltetésére (lista, felsorolás)

Mielőtt belemennénk a listák tulajdonságaiba nézzük hogyan is hivatkozhatunk rájuk.
Előbb a HTML

<div id="list">
   <ul>
      <li><a href="#">Lista szöveg 1</li>
      <li><a href="#">Lista szöveg 2</li>
   </ul>
</div>

Nézzük az elérését:

#list ul{
      width: 400px;
      height: 300px;
      background-color: #D61818;
}

A fenti CSS példában kiválasztottuk és formáztuk a ul-tagot, azaz a renedzetlen listát.
A listaelemek:

#list ul li{
      width: 100px;
      background-image: url(valami.png) no-repeat;
      color: #FBFBFB;
}

Itt már a listaelemeket formázzuk, a list azonosítójú div-ben.
De mit kell tennünk, ha nem csak egy adott listára akarjuk alkalmazni beállításainkat?
A megoldás egyszerű. A lista általános elérése elhagyja az azonosítót a CSS-ben. Tehát:

ul li{
      width: 100px;
      background-image: url(valami.png) no-repeat;
      color: #FBFBFB;
}

Mostmár az oldalon megjelenő listák mindegyike a fenti kód szerint lesz formázva.
Kiegészítésül még csak annyit, hogy a listaelemen belüli (pl.: link) elemek elérése szintén lehetséges globálisan, de akár minden egyes listában külön-külön.

#lista ul li a:hover{
text-decoration: none;
color: #ECECEC;
}

A list azonosítójú elem (ez esetben DIV) listájának, linkjét (pszeudó osztállyal - a felhasználó egere a link fölött van) formáztuk.
Az eddigi leckékben fölsorolt tulajdonságok legtöbbje alkalmazható a listákra is, így ezeket itt nem ismertetem, csak az egyedi lista tulajdonságait.

1. A jelölők

A következő tulajdonságok a rendezelten listára (ul) vonatkoznak, tehát a szelektor ul.

1. A lista pontjai előtt általában van valamilyen jel (pont, kör, négyzet) ami a felhasználó beállításaitól is függ, de amit mi is megváltoztathatunk a list-style-type tulajdonsággal.
Értékei:

none: nincs semmilyen listajelölő
disc: korong
circle: kör
square: négyzet
decimal: decimális (arab) számok, a kezdőérték 1
decimal-leading-zero: decimális számok bevezető nullával
lower-roman: kisbetűs római számok
upper-roman: nagybetűs római számok
lower-alpha vagy lower-latin: a latin ábécé kisbetűi
upper-alpha vagy upper-latin: a latin ábécé nagybetűi

2. Ha a fenti listajelölők unalmasak lennének, ezért úgy döntesz, egy menüt készítesz és jó lenne, ha nem csak a fenti beállításokat alkalmazhatnád, akkor használd a list-style-type-ra a none értéket és állíts be listajelölőnek képet a list-style-image tulajdonsággal.
Szintakszisa:

list-style-type: url(valami.gif);

A kép mérete normális keretek között akármekkora lehet.

2. A listajelölő helyzetének meghatározása

Mindig a fődobozhoz képest történik.
Szintakszisa:

list-style-position:

Értékei:

outside: a jelölő a fődobozon kívül lesz
inside: a jelölő a fődoboz első soron belüli doboza, ezt követi a tartalom.

Nézzünk egy példát a fenitek sűrítésével.

#lista ul{
      list-style-type: none;
      list-style-type: url(jelolo/kep.gif);
      list-style-position: outside;
}

A listaelemek, jelölői ez esetben nem szimbólumok, hanem képek. A listaelekmek poziciója a fődoboz első soron belüli doboza lesz.

3. A tartalom

1. A böngésző által létrehozott tartalom.
A CSS lehetőséget ad arra hogy bizonyos elemeket a böngésző hozzon létre, illetve helyezze el. Az elhelyezkedést a :before, és az :after pszeudó osztályok határozzák meg. A tartalmat a content tulajdonság hozza létre.
Értékei:

szöveges tartalom
külső tartalom
számláló
open-qoute: a tartalom kezdő idézőjel lesz
close-qoute: a tartalom záró idézőjel lesz
attr( ): eredménye a szelektor elem (zárójel között) attribútumának értéke lesz

A böngészők közül sajnos még mindig nem támogatja mindegyik a fenti tulajdonságokat.
A :before, és :after pszeudo osztály a tartalom előtti illetve utáni helyzetet határozza meg.
Példa:

P:before{
content: url(kep.gif);
}

Minden P elem előtt a betöltött kep.gif fog szerepelni.

2. A számláló
Alkalmazásával rugalmasabbá tehetjük listáink számozását, de más helyzetben is hasznosak. Nem kell állandóan belenyúlni a HTML részbe, ha valami változás történik, hisz ezt elvégzi helyettünk a számláló. Azonban ez a lehetőség nem áll fent sem Internet Explorerben, sem Firefoxban, ezért csak kevésbé részletesen tárgyalom.
A műveleteket a counter tulajdonság counter() és counters() függvényei hajtják végre.
A számlálók módosítására a counter-increment és counter-reset tulajdonságok szolgálnak.
Értékei:

azonosító: a számláló neve
egész szám: a counter-increment esetében azt mutatja, hogy mennyivel kell növelni a
számlálót.
a counter-reset elemnél a szám azt jelzi, hogy milyen értékre kell állítani a számlálót az elem előfordulásai alkalmával

Példa:

H1:before {
      content: counter(cim) ". fejezet";
      counter-increment: cim;
      counter-reset: alcim;
}
H2:before {
      content: counter(cim) "." counter(alcim) " ";
      counter-increment: alcim;
}

Témaköreink

DumAblak

On-line

Statisztika

CSS -> Listák tulajdonságai

1. A jelölők

2. A listajelölő helyzetének meghatározása

3. A tartalom

Hello Vendég