A linkek nagyon gyakoriak a weboldalakon, de sok internetes tervező nem ismeri el a CSS- sel rendelkezésükre álló erővel a kapcsolatok hatékony manipulálását és kezelését. Lehet meghatározni a kapcsolatokat a meglátogatott, lebegő és aktív állapotokkal. A határokkal és hátterekkel is dolgozhat, hogy a linkjeidet pizzazabbá tegye, vagy úgy, mintha gombok vagy akár képek lennének.
A legtöbb internetes tervező a stílust az "a" címkével határozza meg:
a {szín: piros; }Ez a link minden aspektusát stílusossá teszi (lebegés, meglátogatás és aktív). Az egyes részek külön-külön történő megmunkálásához a pszeudoosztályok használatát kell használni.
Link Pszeudo osztályok
Négy alapvető típusú pszeudoosztály létezik:
- : link - ez a link alapértelmezett stílusa
- : meglátogatott - miután egy linkre kattintott
- : lebegés - mint egy egér egy hivatkozáson keresztül (kattintás előtti)
- : aktív - jobb, ahogy a hivatkozás kattint
Ha egy pszeudoosztály hivatkozást szeretne létrehozni, használja azt a c taggal a CSS választóban . Tehát, ha az összes link szürke színének meglátogatott színét megváltoztatja, írja:
a: visited {color: szürke; }Ha egy link pszeudoosztályt állít be, akkor jó ötlet, hogy mindegyiket stílusossá tegyük. Így nem fogsz lepődni az idegen eredménnyel. Tehát ha csak meg szeretné változtatni a látogatott színt szürkére, miközben a linkek összes többi pszeudo-tulajdonsága fekete marad, írja:
a: link, a: hover, a: aktív {szín: fekete; } a: visited {color: szürke; }Módosítsa a Link színeket
A linkek legkedveltebb módja a szín megváltoztatása, ha az egér fölé húzódik:
a {color: # 00f; } a: ugrás {color: # 0f0; }De ne felejtsük el, hogy hatással lehet arra, hogy a kapcsolat úgy néz ki, ahogyan rákattintanak rá: aktív tulajdonság:
a {color: # 00f; } a: aktív {color: # f00; }Vagy hogyan kapcsolódik össze a link, miután meglátogatta azt a: visited property:
a {color: # 00f; } a: látogatott {color: # f0f; }Összefogni:
a {color: # 00f; } a: látogatott {color: # f0f; } a: ugrás {color: # 0f0; } a: aktív {color: # f00; }Háttérképek elhelyezése a ikonokhoz vagy a golyók hozzáadásához
Háttérképet helyezhet el egy linkre, mint a Stílusos hátterek cikkében, de ha kicsit a háttérrel játszik, létrehozhat egy olyan linket, amelyhez hozzá van rendelve egy ikon. Válasszon egy olyan ikont, amely kicsi, kb. 15px 15px, hacsak a szöveged nem nagyobb. Helyezze a hátteret a hivatkozás egyik oldalára, és állítsa be az ismétlés opciót a nem ismétléshez. Ezután kapcsolja be a linket úgy, hogy a hivatkozáson belüli szöveg átkerüljen elég messzire a balra vagy jobbra az ikon megjelenítéséhez.
a {padding: 0 2px 1px 15px; háttér: #fff url (ball.gif) bal középen nem ismétlődő; szín: # c00; }Miután megkapta az ikont, beállíthat egy másik képet, mint a lebegés, az aktív és a meglátogatott ikonok a link megváltoztatásához:
a {padding: 0 2px 1px 15px; háttér: #fff url (ball.gif) bal középen nem ismétlődő; szín: # c00; } a: ugrás {háttér: #fff url (ball2.gif) bal középen nem-ismétlés; } a: aktív {background: #fff url (ball3.gif) bal középen nem-ismétlés; }Készítsen linkeket a gombok megjelenítéséhez
A gombok nagyon népszerűek, de amíg a CSS el nem jött, gombokkal kell létrehoznia a gombokat, így az oldalak hosszabb ideig töltődnek be. Szerencsére van egy határoló stílust, amely segítségével egyszerűen létrehozhat egy gombszerű hatásokat a CSS-ben.
egy {border: 4px kezdet; párnázottság: 2px; text-decoration: none; } a: aktív {border: 4px inet; }Ne feledje, hogy amikor a színeket a kezdetekre és a beágyazott stílusokra helyezi, a böngészők nem olyan valószínűek, mintha elvárnák őket. Tehát itt van egy kedvelt gomb színes határokkal:
a {border-style: szilárd; határszélesség: 1px 4px 4px 1px; text-decoration: none; párnázottság: 4px; határszín: # 69f # 00f # 00f # 69f; }És hatással lehet a gombok linkjének felfüggesztésére és aktív stílusaira is, csak használd ezeket az ál-osztályokat:
a: link {border-style: szilárd; határszélesség: 1px 4px 4px 1px; text-decoration: none; párnázottság: 4px; határszín: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }