Ugrás a főoldalra!

Felhasználónév:

Jelszó:

 :: ".$_ASWC_['NAME']." ".$_ASWC_['VERSION']." ".$_ASWC_['STATUS'];?> - [Látogatók: 627656]  
Freelance Jobs

Témaköreink

 


On-line

Dev, Admin: 0
Lektorok, írók: 1
  ÷Magus|BOT
Felhasználók: 0
Vendégek: 1
Tegnap: 0
E havi:
 

Statisztika

Oktatóanyagok száma
 Publikus: 128

Legolvasottabb írónk
 outesticide 291298

Legszorgalmasabb írók
1. balymo 24
2. outesticide 20
3. tipli 19
4. adrob 18
5. akciolap 15

Legolvasottabb címek
1. CSS
Egyszerü vízszintes menü és vízszintes menü legördülő almenükkel [49405]
2. CSS
A pozícionálás, és a z-index [26226]
3. CSS
Függőleges menü, legördülő almenüvel [20637]
4. CSS
Függőleges menü készítése listából [20428]
5. CSS
Bevezetés a CSS alapjaiba [19628]
 

 

CSS -> Listák tulajdonságai

Író: outesticide ( outesticide@netoktato.hu )
  http://vajdasag.rs
Készült: 2005-05-10 19:51:54
Lektorálta: adrob
Lektorálva:
2005-10-01 13:28:21 [9115]
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;
}

* Minden további kérdéseddel fordulj az anyag írójához.

 

Hello Vendég

Az oktatóanyagok olvasásához be kell jelentkezned.

Szeretnék regisztrálni.

Elfelejtettem a jelszavam!
Kiküldöm magamnak!