Kako oblikovati veze u CSS-u

Programiranje

Veze za oblikovanje

Linkovi se mogu oblikovati s bilo CSS imovine, kao što su color, font-family, font-size, i padding. Evo jednostavnog primjera:

a { color: hotpink; }

Uz to, veze se mogu različito stilizirati, ovisno o tome u kakvom su stanju.

Veze također imaju 4 stanja, a mnogi programeri svaku državu stiliziraju drugačije. Četiri države su:

  • a:link: ne posjećena, nekliknuta veza
  • a:visited: posjećena, kliknuta veza
  • a:hover: veza kada je miš korisnika iznad nje
  • a:active: veza kad se klikne

Nekretnine je odgovoran za stvaranje URL-ove i može se mijenjati pomoću nekoliko CSS styling svojstava, iako ima nekoliko po defaultu:

  1. Naglasiti
  2. Plava boja

Možete promijeniti te dodavanjem mijenja colori text-decorationsvojstva.

 color: black; text-decoration: none;

Također možete stilizirati vezu na temelju interakcije pomoću ovih svojstava, poznatih i kao stanja veze:

  • a: link - normalna, ne posjećena veza
  • a: posjetio - veza koju je korisnik posjetio
  • a: hover - veza kad korisnik miša preko nje pređe
  • a: active - veza u trenutku kada se klikne

Evo nekoliko primjera CSS-a koji koristi 4 stanja:

a:link { color: red; } a:visited { color: blue; } a:hover { color: green; } a:active { color: blue; }

Imajte na umu da postoje neka pravila redoslijeda kada postavljate stil za stanja veza.

  • a:hoverMORA doći nakon a:linkia:visited

a:active MORA doći poslije a:hover

a: link - normalna, ne posjećena veza a: posjetio - veza koju je korisnik posjetio: hover - veza kad korisnik miša preko nje a: aktivan - veza u trenutku kada se klikne

/* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: blue; }

Više o stylingu u CSS-u:

  • Kako stilizirati HTML oznaku izravno u CSS
  • Kako oblikovati popise pomoću CSS-a
  • Kako oblikovati gumbe s CSS-om