Kako koristiti CSS za stiliziranje hiperveza na web stranicama
Ako znate HTML, znate da možete kontrolirati boju teksta i hiperveza na web stranici. No s kaskadnim tablicama stilova možete učiniti mnogo više. Određene oznake, poput oznake za sidrenje hiperveze imaju ono što se naziva pseudo-klasama povezano s različitim stanjima oznake. Na primjer, oznaka hiperveze ima četiri stanja; veza, posjećeni, lebdeći i aktivan.

Kad se veza ne koristi (nije odabrana), to je veza pseudo-klase ili države. posjetila stanje je nakon što je veza korištena. lebdjeti stanje je kada miš pređe preko veze i aktivan stanje je kad kliknete na vezu. Čarolija CSS-a je u tome što se svako stanje veze kontrolira neovisno putem pseudo-klasa. Tako možete postaviti različita svojstva za svaku državu. U CSS-u možete koristiti bilo koji entitet povezan s oznakom za sidrenje hiperveza.

U primjeru u nastavku postavit ćemo stanje veze na crveno, posjećeno stanje na ljubičasto (# 400040), lebdeći tijesto i aktivna stanja na crveno, podcrtano i kurzivo.



Bilješka--Strijela označava da je kôd zamotan u drugi redak i stvarno bi trebao biti sav u jednoj liniji.

Kao što vidite, svojstvo boje postavili smo crvenom za sva stanja, osim za posjećeno stanje, koje smo postavili na ljubičastu. Budući da samo želimo da se hiperveza podvuče za lebdeća i aktivna stanja, svojstvo uređenja teksta postavili smo na nijedno za druga dva stanja. Konačno, stil fonta postavili smo kurzivom za lebdeća i aktivna stanja, što će uzrokovati da tekst postane kurziv kad pređete ili kliknete vezu, a mi smo ukras teksta vratili na podvlačenje. Ovo je samo jednostavan primjer. Svoje stilove možete učiniti jednostavnim ili maštovitim kako želite. Međutim, morate zapamtiti nekoliko stvari.

Web preglednici se razlikuju u načinu na koji to rješavaju. Ako svojstvo postavite na određenu vrijednost, ono će ga naslijediti (prenijeti na) bilo koja stanja navedena nakon njega. U našem gornjem primjeru, prvo stanje navedeno u našem kodu bilo je stanje veze i svojstvo boje postavili smo crvenoj. Većinu vremena ovo bi se prenijelo na ostale tri države ako ga ne promijenimo kodom, kao što smo učinili za posjećenu državu. Također, da nismo vratili ukras teksta na podvlačenje, tekst za lebdeća i aktivna stanja ne bi bio podcrtan jer smo ga isključili u prvom stanju. Ali ne možete računati na sve preglednike koji će to učiniti. Stoga je najbolje postaviti sva svojstva za svako stanje pojedinačno.

Kada dizajnirate fantastične veze, ne uvodite velike promjene između država, poput drastičnog povećanja veličine teksta. Zbog toga će web preglednik ponovno učitati stranicu i vaši će se posjetitelji jako uznemiriti zbog vas.

Na redoslijed u kojem ste popisali kôd za ove pseudo-klase utječe kaskadni poredak. O redoslijedu kaskade govorit ćemo u kasnijem vodiču. Za sada samo zapamtite da, kako biste spriječili sukobe, šifrirajte države redoslijedom kojim smo gore bili. veza, posjećeni, lebdeći i aktivan.





Upute Video: Section 7 (Ožujak 2024).