Loturak oso ohikoak dira web orrialdeetan, baina web diseinatzaile askok ez dute konturatzen CSSren boterea modu eraginkorrean kudeatzeko eta kudeatzeko. Esteka, bisitatu, estutu eta estatu aktiboekin estekak definitu ditzakezu. Mugak eta atzealdeak ere lan ditzakezu zure estekak pizzaz gehiagorako edo botoiak edo irudiak bezalako itxura emateko.
Web diseinatzaile gehienek "a" etiketa bat definitzen dute:
a {kolorea: gorria; }Honek estekaren alderdi guztiak estilizatuko ditu (pasatzen, bisitatu eta aktibo). Estilo bakoitza bereizita egiteko, esteka sasi-klaseak erabili behar dituzu.
Lotu pseudo klaseak
Badira lau oinarrizko sorta motako sasi-klaseak definitzeko:
- esteka: hau da estekaren estilo lehenetsia
- : bisitatu - estekan klik egin ondoren
- : pasatzean - sagu bat estekan kokatuta dagoenean (aurrez egin klik)
- : aktiboa - eskuineko estekan klik eginez gero
Esteka pseudo-klase bat definitzeko, erabili CSS hautatzailearen etiketa batekin. Beraz, zure esteken kolorea grisez bisitatutako kolorea aldatzeko, idatzi:
a: bisitatu {color: gris; }Esteka pseudo-klase bat baldin baduzu, ideia ona da horiek guztiak estilatzea. Horrela ez zaizu harrituko emaitza estraneatuekin. Beraz, bisitatutako kolorea grisarekiko aldatu nahi baduzu, zure esteken pseudo-propietate guztiak beltzez mantentzen diren bitartean, idatzi:
a: esteka, a: pasatzean, a: aktiboa {kolorea: beltza; } a: bisitatu {color: gray; }Aldatu esteka koloreak
Estiloko esteken modu ezagunena kolorea aldatzea sagua gainetik pasatzen denean da:
a {color: # 00f; } a: pasatzean {kolorea: # 0f0; }Hala ere, ez ahaztu lotura estekan nola eragiten duten eragina izan dezakezula: propietate aktiboa:
a {color: # 00f; } a: aktiboa {color: # f00; }Edo nola esteka bisitatu ondoren bisitatu duzun: bisitatutako jabetza:
a {color: # 00f; } a: bisitatu {color: # f0f; }Elkarrekin jartzea:
a {color: # 00f; } a: bisitatu {color: # f0f; } a: pasatzean {kolorea: # 0f0; } a: aktiboa {color: # f00; }Loturak atzeko planoak ikonoak edo balak gehitzeko
Estekaren atzeko planoko atzeko planoan atzeko planoan jarri dezakezu, baina atzeko planoan apur bat jarrita, lotutako ikonoa duen esteka bat sor dezakezu. Aukeratu txiki bat ikonoa, 15px inguruan 15px-ra, zure testua handiago izan ezean. Kokatu atzeko planoa lotura baten alde batera eta errepikatu aukera ez errepikatzeko. Ondoren, estekatu esteka estekaren testua ezkerrera edo eskuinera mugitu arte ikonoak ikusteko.
a {padding: 0 2px 1px 15px; atzeko planoa: #fff url (ball.gif) ezkerreko erdigunea ez errepikatu; kolorea: # c00; }Zure ikonoa lortu ondoren, beste irudi bat ezar dezakezu zure pasahitza, ikono aktiboak eta bisitatu esteka estekatzeko:
a {padding: 0 2px 1px 15px; atzeko planoa: #fff url (ball.gif) ezkerreko erdigunea ez errepikatu; kolorea: # c00; } a: pasatzean {background: #fff url (ball2.gif) ezkerreko erdigunea ez errepikatu; } a: aktibo {background: #fff url (ball3.gif) ezkerreko erdigunea ez errepikatu; }Egin zure estekak Begiratu botoiak
Botoiak oso ezagunak dira, baina CSSra iritsi arte, irudiak erabiliz botoiak sortu behar dituzu, zure orriak kargatzeko denbora gehiago hartzen du. Zorionez, badago mugako estilo bat, modu errazean botoi-itxurako efektua sortzeko CSS erabilita.
a {mugartea: 4px hasiera; betegarria: 2 px; testu-dekorazioa: none; } a: aktibo {border: 4px inset; }Kontuan izan kolore eta diseinu lehenetsiak jartzen dituzunean, arakatzaileek ezingo dituzte espero bezala errendatu. Beraz, hona hemen koloretako mugak dituzten fancier botoia:
a {mugako estiloa: ona; mugako zabalera: 1px 4px 4px 1px; testu-dekorazioa: none; betegarria: 4 px; mugako kolorea: # 69f # 00f # 00f # 69f; }Botoiaren estekaren gaineko estekak eta aktiboak ere eragin ditzakezu, pseudo-klaseak erabili:
a: esteka {mugako estiloa: ona; mugako zabalera: 1px 4px 4px 1px; testu-dekorazioa: none; betegarria: 4 px; mugako kolorea: # 69f # 00f # 00f # 69f; } a: pasatzean {border-color: #ccc; }