CSS stílusok
Álelem: utána
Ez az ál-elem használható tartalom beillesztésére egy elem után. A következő példában minden elem után kép kerül beillesztésre
CSS ál-elemek
| : után | Tartalom hozzáadása egy elem után |
| : Korábban | Tartalom hozzáadása egy tétel elé |
| : Első levél | Stílust ad a szöveg első betűjéhez |
| : Első sor | Stílust ad a szöveg első sorához |
24. Navigációs sáv
Nagyon fontos, hogy egy weboldal könnyen kezelhető navigációs rendszerrel rendelkezzen. A CSS segítségével az unalmas HTML-menükből szép megjelenésű navigációs sávok készíthetők. A navigációs sáv valójában a hivatkozások listája. A példában felépítünk egy navigációs sávot egy szokásos HTML listából.
Most eltávolítjuk a jelölőket, margókat és kitöltéseket a listáról:
- list-style-type: nincs - eltávolítja a jelölőket; nem szükségesek a navigációs sávban
- tulajdonságait margók és párnázás 0 értékű az alapértelmezett böngészőbeállítások eltávolításához
Az alábbi példában szereplő kód a függőleges vagy vízszintes navigációs sávok felépítéséhez használt standard kód.
Függőleges navigációs sáv
A függőleges navigációs sáv felépítéséhez meg kell stílusozni az elemeket:
- kijelző: blokk - a hivatkozások blokkként való megjelenítésével az egérrel a teljes terület működtethető, nem csak a szöveg és a szélesség is megadható
- szélesség: 60px - a blokkelemek az összes elérhető szélességet elfoglalják, ezért a kívánt szélességet megadják
Vízszintes navigációs sáv
Kétféle módon hozhatunk létre navigációs sávot, elemek felhasználásával Sorban vagy úszó. Mindkét módszer jó, de ha azt szeretné, hogy a linkek azonos méretűek legyenek, akkor a következő elemeket kell használni: úszó.
Beillesztett elemek
A függőleges navigációs sáv felépítésének egyik módja az elemek deklarálása elemként a linkek listájáról Sorban:
Magyarázat:
- kijelző: sorban - alapértelmezés szerint az elemek
- blokkelemek. Az egyes tételek eltávolítása előtti és utáni sortörések ugyanazon a soron jelennek meg.
- ha beállítja az elemek párnázását
- (és nem), a linkek az elemen kívülre kerülnek. Emiatt az ul elemhez megadták a felső és az alsó párnázást.
elemeket úszó
Az előző példában a linkek szélessége különböző. Annak érdekében, hogy az összes link azonos szélességű legyen, az elemek néven kell deklarálni úszó és meg kell adni az elemek szélességét:
- balra lebeg - úszó a blokkelemek egymás melletti mozgatására szolgál
- kijelző: blokk - a hivatkozások blokkelemként történő megjelenítésével a teljes terület (nem csak a szöveg) működtethető az egérrel, és megadható az egyes területek szélessége
- szélesség: 60px - mivel a blokkelemek a teljes elérhető szélességet elfoglalják, nem mozoghatnak egymás mellett. Ezért megadja a linkek kívánt szélességét.
Példák a menükre:
1. példa: Vízszintes menü három szinttel
2. példa: Vízszintes menü négy szinttel