Štýly CSS
Pseudoelement: po
Tento pseudoelement možno použiť na vloženie obsahu za element. V nasledujúcom príklade je za každý prvok vložený obrázok
Pseudoelementy CSS
| : po | Pridajte obsah za položku |
| : Predtým | Pridajte obsah pred položku |
| : Prvé písmeno | Pridajte štýl k prvému písmenu textu |
| : Prvá línia | Pridá štýl do prvého riadku textu |
24. Navigačná lišta
Pre web je veľmi dôležité, aby mal ľahko použiteľný navigačný systém. S CSS môžete zmeniť nudné ponuky HTML na dobre vyzerajúce navigačné lišty. Navigačná lišta je vlastne zoznam odkazov. V príklade zostavíme navigačnú lištu zo štandardného zoznamu HTML.
Teraz zo zoznamu odstránime značky, okraje a výplne:
- list-style-type: none - odstraňuje značky; na navigačnej lište sa nevyžadujú
- nehnuteľnosť marže a vypchávka majú hodnotu 0 na odstránenie predvoleného nastavenia prehliadača
Kód v nasledujúcom príklade je štandardný kód používaný na vytvorenie vertikálnych alebo horizontálnych navigačných pruhov.
Vertikálny navigačný panel
Ak chcete vytvoriť vertikálnu navigačnú lištu, musíme prvky štýlovať:
- displej: blok - zobrazením odkazov ako blokov je možné ovládať celú oblasť myšou, nielen text, a určiť šírku
- šírka: 60px - prvky bloku zaberajú celú dostupnú šírku, preto je zadaná požadovaná šírka
Vodorovná navigačná lišta
Navigačnú lištu môžeme vytvoriť dvoma spôsobmi, a to pomocou položiek v rade alebo plavák. Obidva spôsoby sú dobré, ale ak chcete, aby mali odkazy rovnakú veľkosť, musíte použiť položky ako plavák.
Vložené položky
Jedným zo spôsobov, ako vytvoriť vertikálny navigačný panel, je deklarácia položiek zo zoznamu odkazov ako položiek v rade:
Vysvetlenie:
- zobrazenie: vložené - predvolene prvky
- sú blokové prvky. Konce riadkov pred a po odstránení každej položky sa zobrazili na rovnakom riadku.
- ak nastavíte polstrovanie pre položky
- (a nie pre), odkazy sa presunú mimo položku. Z tohto dôvodu bolo pre prvok ul špecifikované horné a spodné polstrovanie.
položky plavák
V predchádzajúcom príklade majú odkazy rôzne šírky. Aby všetky odkazy mali rovnakú šírku, prvky musí byť deklarovaný ako plavák a šírka prvkov musí byť uvedená:
- plavák: vľavo - float sa používa na pohyb blokových prvkov vedľa seba
- displej: blok - zobrazením odkazov ako blokových prvkov je možné ovládať celú oblasť (nielen text) pomocou myši a určiť šírku každej oblasti
- šírka: 60px - pretože prvky bloku zaberajú celú dostupnú šírku, nemôžu sa pohybovať vedľa seba. Z tohto dôvodu je zadaná požadovaná šírka odkazov.
Príklady ponúk:
Príklad 1: Horizontálne menu s tromi úrovňami
Príklad 2: Horizontálne menu so štyrmi úrovňami