Scheme multiple in CSS pentru link-uri

Threaded Mode | Linear Mode

Scheme multiple in CSS pentru link-uri

Author Message

dojo
Administrator

Posts: 2,820
Group: Administrators
Joined: Nov 2006
Status: Offline
Reputation: 22
Lei: 7602.16

Post: #1

Scheme multiple in CSS pentru link-uri

Acesta este un tutorial mic pentru cei care doresc sa stie cum sa aiba link-urile "normale" cu anumite efecte si alt set de link-uri care sa arate altfel.

In fisierul CSS va trebui sa ii "spuneti" script-ului cum sa fie link-urile in general.

Iata un exemplu:

Code:

a:link {color: #000000; text-decoration: underline; font-weight:bold;}

a:visited {color: #333333; text-decoration: underline; font-weight:bold;}

a:hover {color: #CC0000; text-decoration: underline; font-weight:bold;}

a:active {color: #000000; text-decoration: underline; font-weight:bold;}

Asta ii va "spune" script-ului ca link-urile noastre vor fi negre (rosii cand trecem cursorul peste ele), subliniate si ingrosate.

Dar ce facem daca dorim si albe?

Va trebui sa construim un alt set de link-uri si sa le numim. In cazul meu le-am numit menu

Code:

a.menu:link {color: #FFFFFF; text-decoration: underline; font-weight:bold;}

a.menu:visited {color: #efefef; text-decoration: underline; font-weight:bold;}

a.menu:hover {color: #CC0000; text-decoration: underline; font-weight:bold;}

a.menu:active {color: #000000; text-decoration: underline; font-weight:bold;}

Acum va trebui sa specificari clasa in fiecare link (daca doriti sa folositi noul set). Daca nu specificati clasa, script-ul le va face sa arate ca si link-urile generale (din primul exemplu).

Daca aveti nevoie de un link "normal":

Code:

<a href="http://www.wtricks.com">Webmaster Tips & Tricks</a>

Daca doriti sa fie ca si clasa "menu":

Code:

<a href="http://www.wtricks.com" class="menu">Webmaster Tips & Tricks</a>

---
Articolul a fost publicat pe Wtricks.com How to have multiple link schemes with CSS

Domeniu si hosting GRATIS pentru situl tau
Nu trimiteti PM pentru a primi ajutor cu siturile. Exista forum pentru asta.
Postarea de articole FURATE de pe alte situri pe forum se "rasplateste" cu 20% warning pe FIECARE articol. Scrieti articole ORIGINALE sau abtineti-va. Merci

This post was last modified: 12-28-2006 02:06 AM by dojo.

12-28-2006 01:50 AM

disparut
Designer experimentat

Posts: 515
Group: Registered
Joined: Dec 2006
Status: Offline
Reputation: 0
Lei: 383.29

Post: #2

RE: Scheme multiple in CSS pentru link-uri

Dojo iti foarte multumesc pentru acest post.... mai trezit... vroiam sa fac modificari la o tema si cred ca jumate de ora am stat sa tot incerc tot felul de posibilitati sa pun sa fie linkul bold..... numa font-weight nam incercat.. !!! LOVE YAA ms mult de tot Big Grin

Marin Vasile-Webmaster http://www.curiozitati.net

12-28-2006 02:04 AM

valentin
De al casei

Posts: 66
Group: Registered
Joined: May 2007
Status: Offline
Reputation: 0
Lei: 251

Post: #3

RE: Scheme multiple in CSS pentru link-uri

Cred ca aici este cel mai nimerit loc ...

Aproape in orice pagina web textul contine un link catre alte zone de informatie. Link cu sau fara subliniere (underline) care, in starea "hover" (mouse "pe") face orice altceva, pentru a atrage atentia asupra rolului pe care il are - isi poate schimba culoarea fundalului, isi poate schimba caracterul, isi poate schimba culoarea fontului, etc., etc. Stilul link-ului si cum se comporta sunt stabilite in fisierul CSS.

Dar sunt si situatii speciale. Iau exemplul unui link "LogoDesign" (sa spunem ca este numele unei firme de design) care apare in footer-ul paginii web. Presupunand ca firma are drept culoare definitorie culoarea portocaliu (#ff9900) codul va fi :

Code:

<div class="footer">

<aÂ� Â� href="site_prorpiu.com" target="_blank">LogoDesign</a>

</div>

iar in fisierul CSS :

.footer a {color: #ff9900; text-decoration: none;}

.footer a:visited {color: #ff9900; text-decoration: none;}

.footer a:hover {color: #ff9900; text-decoration: underline;}

care inseamna link de culoare portocaliu, fara subliniere, care la pozitia "pe" a mouse-ului devine portocaliu si subliniat. Nimic deosebit ...

Dar daca logo-ul firmei nu este integral portocaliu ? Daca firma are drept culori definitorii negru si portocaliu ? Adica particula "Logo" este negru si particula "Design" este portocaliu ? Cum se face ca textul "LogoDesign" sa respecte coloratia standard atat in ceea ce priveste fontul cat si linia care subliniaza ? Eu am gasit urmatoarea rezolvare :

Code:

<div class="footer">

<aÂ� Â� href="site_prorpiu.com" target="_blank">Logo<span>Design</span></a>

</div>

iar in fisierul CSS :

.footer a {color: #000000; text-decoration: none;}

.footer a:visited {color: #000000; text-decoration: none;}

.footer a:hover {color: #000000; text-decoration: underline;}

a span {color: #ff9900; text-decoration: none;}

a:visited span {color: #ff9900; text-decoration: none;}

a:hover span {color: #ff9900; text-decoration: underline;}

Iar posibilitatile de a varia stilul sunt numeroase, ca de exemplu :

Code:

<div class="footer">

<aÂ� Â� href="site_prorpiu.com" target="_blank">&nbsp;Logo<span>Design&nbsp;</span></a>

</div>

(am adaugat si doua spatii "&nbsp;" - unul inainte de "Logo" si unul dupa "Design")

iar in fisierul CSS :

.footer a {color: #000000; background-color: #ffffff; font-weight: bold; text-decoration: none;}

.footer a:visited {color: #000000; background-color: #ffffff; font-weight: bold; text-decoration: none;}

.footer a:hover {color: #ffffff; background-color: #000000; font-weight: bold; text-decoration: none;}

a span {color: #ff9900; background-color: #ffffff; text-decoration: none;}

a:visited span {color: #ff9900; background-color: #ffffff; text-decoration: none;}

a:hover span {color: #ffffff; background-color: #ff9900; text-decoration: none;}

O mentiune : intotdeuna pun "target="_blank" in aceste cazuri, fiindca este un site diferit de cel pe care naviga vizitatorul.

05-06-2007 06:32 PM

« Next Oldest | Next Newest »

View a Printable Version
Send this Thread to a Friend
Subscribe to this Thread | Add Thread to Favorites

Forum Jump: