Stilizarea listelor folosite în nav
Pentru navigare în site, HTML5 introduce elementul nav. În cazul site-urilor simple, în nav va fi plasat un element ul în care fiecare intrare în listă va fi un element a.
Dacă nav afişează elementele pe verticală, într-o coloană alăturată elementului main, atunci stilizarea presupune doar suprimarea marcatorilor impliciţi (buline negre) şi adaptarea elementelor a. Codul corespunzător este prezentat în continuare.
Dacă nav afişează elementele pe verticală, într-o coloană alăturată elementului main, atunci stilizarea presupune doar suprimarea marcatorilor impliciţi (buline negre) şi adaptarea elementelor a. Codul corespunzător este prezentat în continuare.
Selectorii poziţionali folosiţi se bazează pe reprezentarea internă a paginii pe care browser-ul o realizează după citirea acesteia. Această reprezentare este cunoscută sub denumirea de DOM (Document Object Model) şi cuprinde atât elementele din pagină cât şi raporturile dintre ele. În imagine s-a reprezentat o parte din modelul intern al paginii realizate.
În cazul barelor de navigare orizontale va trebui specificată dispunerea în linie (eng. inline) a elementelor li iar elementele a vor trebui declarate de tip "bloc" şi dimensionate.
Stilizarea hiperlegăturilor
CSS permite o stilizare diferită a unei hiperlegături, în funcţie de starea acesteia. Pentru a specifica starea la care se referă un stil, la stilizarea hiperlegăturilor se folosesc pseudoclase. Corespunzător celor patru stări posibile ale unei legături, pseudoclasele definite în CSS sunt următoarele:
- a:link - pentru selectarea legăturilor nevizitate;
- a:visited - pentru selectarea vizitate;
- a:hover - pentru a evidenția o legătură peste care se află cursorul mous-ului;
- a:active - pentru o legătură în momentul selectării (clic).
Exemplu:
