વેબ પૃષ્ઠો પર લિંક્સ ખૂબ જ સામાન્ય છે, પરંતુ ઘણા વેબ ડીઝાઇનરોને તેમની શક્તિને ખ્યાલ નથી આવતી કે તેઓ સીએસએસને અસરકારક રીતે તેમના લિંક્સને ચાલાકી અને સંચાલિત કરે છે. તમે મુલાકાત લીધેલ, હૉવર અને સક્રિય સ્થિતિમાં લિંક્સને નિર્ધારિત કરી શકો છો. તમે લિંક્સને વધુ પિગઝ આપવા અથવા તેમને બટન્સ અથવા તો ઈમેજો જેવા દેખાવા માટે સરહદો અને બેકગ્રાઉન્ડ સાથે પણ કામ કરી શકો છો.
મોટાભાગના વેબ ડીઝાઇનરોએ "એ" ટેગ પર શૈલી વ્યાખ્યાયિત કરીને શરૂ કર્યું છે:
એક {રંગ: લાલ; }આ લિંકના તમામ પાસાઓને શૈલી બનાવશે (હોવર, મુલાકાત લીધી, અને સક્રિય). દરેક ભાગને અલગથી શૈલીમાં, તમારે કડી સ્યુડો-વર્ગોનો ઉપયોગ કરવો આવશ્યક છે.
લિંક સ્યુડો-વર્ગો
ચાર મુખ્ય પ્રકારની કડી સ્યુડો વર્ગો છે જે તમે વ્યાખ્યા કરી શકો છો:
- : લિંક - આ લિંક માટે મૂળભૂત સ્ટાઇલ છે
- : મુલાકાત લીધેલ - લિંક પછી ક્લિક કરવામાં આવી છે
- : હોવર - એક કડી પર માઉસ પૂર્વચિહ્ન છે (પૂર્વ ક્લિક કરો)
- : સક્રિય - લિંકને ક્લિક કરવામાં આવી રહી છે તે જમણી બાજુ
કડી સ્યુડો વર્ગને વ્યાખ્યાયિત કરવા માટે, તેને તમારા CSS પસંદગીકારમાં ટેગ સાથે ઉપયોગ કરો . તેથી, તમારા તમામ લિંક્સના ગ્રે રંગને બદલવા માટે, લખો:
a: મુલાકાત લીધી {color: gray; }જો તમે એક સ્યુડો-ક્લાસ લિંક કરો છો, તો તે બધાને શૈલીમાં રાખવું તે એક સારો વિચાર છે. આ રીતે તમને અપ્રગટ પરિણામો દ્વારા આશ્ચર્ય થશે નહીં. તેથી જો તમે મુલાકાતી રંગને ગ્રેમાં બદલવા માંગો છો, જ્યારે તમારા લિંક્સના અન્ય તમામ સ્યુડો-પ્રોપર્ટીઓ કાળી રહે છે, તમે લખો છો:
a: લિંક, a: હોવર, a: સક્રિય {color: black; } a: મુલાકાત લીધી {color: gray; }લિંક કલર્સ બદલો
સ્ટાઇલ લિંક્સનો સૌથી લોકપ્રિય માર્ગ એ રંગને બદલવાનો છે જ્યારે માઉસ તેની ઉપર ઉઠી જાય છે:
એક {color: # 00f; } a: હોવર {color: # 0f0; }પરંતુ ભૂલશો નહીં કે તમે કેવી રીતે તેના પર ક્લિક કરી રહ્યા છે તે લિંકને કેવી રીતે અસર કરી શકે છે: સક્રિય ગુણધર્મ:
એક {color: # 00f; } a: સક્રિય {color: # f00; }અથવા તમારી સાથે મુલાકાત લીધેલું લિંક કેવી રીતે જોવા મળે છે: મુલાકાત લીધેલ મિલકત:
એક {color: # 00f; } a: મુલાકાત લીધી {color: # f0f; }તે બધાને એકસાથે મૂકવા માટે:
એક {color: # 00f; } a: મુલાકાત લીધી {color: # f0f; } a: હોવર {color: # 0f0; } a: સક્રિય {color: # f00; }આઇકોન્સ અથવા બુલેટ્સ ઍડ કરવા માટે લિંક્સ પર બેકગ્રાઉન્ડ મૂકો
તમે સ્ટાઇલિશ બેકગ્રાઉન્ડ્સ લેખમાં લિંક પર બેકગ્રાઉન્ડ મૂકી શકો છો, પરંતુ થોડી પૃષ્ઠભૂમિ સાથે રમીને, તમે એક લિંક બનાવી શકો છો કે જેની સાથે સંકળાયેલ ચિહ્ન છે. જ્યાં સુધી તમારો ટેક્સ્ટ મોટો ન હોય ત્યાં સુધી, એક ચુસ્ત ચિહ્ન પસંદ કરો, જે 15px થી 15px ની આસપાસ હોય. બેકગ્રાઉન્ડને લિંકની એક બાજુએ મૂકો અને પુનરાવર્તિત વિકલ્પને કોઈ પુનરાવર્તન કરવા માટે સેટ કરો. પછી, લિંકને પેડ કરો જેથી લિંકમાંના ટેક્સ્ટને ડાબે અથવા જમણે ખસેડવામાં આવે છે જેથી આઇકન જોવા મળે.
એક {પેડિંગ: 0 2px 1px 15px; પૃષ્ઠભૂમિ: #fff url (ball.gif) ડાબી કેન્દ્ર કોઈ પુનરાવર્તન; રંગ: # c00; }એકવાર તમને તમારું ચિહ્ન મળી જાય તે પછી, તમે લિંકને બદલવા માટે તમારી હોવર, સક્રિય અને મુલાકાત લેવાયેલા આયકન્સ તરીકે એક અલગ છબી સેટ કરી શકો છો:
એક {પેડિંગ: 0 2px 1px 15px; પૃષ્ઠભૂમિ: #fff url (ball.gif) ડાબી કેન્દ્ર કોઈ પુનરાવર્તન; રંગ: # c00; } a: હોવર {background: #fff url (ball2.gif) ડાબી કેન્દ્ર કોઈ પુનરાવર્તન; } a: સક્રિય {background: #fff url (ball3.gif) ડાબી કેન્દ્ર કોઈ પુનરાવર્તન; }તમારી લિંક્સને બટન્સ જેવું લાગે છે
બટનો ખૂબ જ લોકપ્રિય છે, પરંતુ જ્યાં સુધી CSS આવી નથી, ત્યાં તમારે ઈમેજોનો ઉપયોગ કરીને બટનો બનાવવાનું રહેશે, જે તમારા પૃષ્ઠોને લોડ થવામાં વધુ સમય લાગી શકે છે. સદભાગ્યે, એક સરહદી શૈલી છે જે તમને CSS જેવી સરળતાથી બટન જેવી અસર બનાવવા માટે મદદ કરી શકે છે.
એક {સરહદ: 4 પીએક્સ શરૂઆત; પેડિંગ: 2 પીએક્સ; ટેક્સ્ટ-શણગાર: કોઈ નહીં; } a: સક્રિય {સરહદ: 4px inset; }નોંધ કરો કે જ્યારે તમે શરૂઆતમાં અને ઇનસેટ શૈલીઓ પર રંગો મૂકે છે, ત્યારે બ્રાઉઝર્સ તમે અપેક્ષા રાખી શકો તેમ તેમ તે રેન્ડર થવાની શક્યતા નથી. તેથી, અહીં રંગીન સરહદો સાથે ફેન્સી બટન છે:
એક {સરહદી-શૈલી: નક્કર; સરહદ-પહોળાઈ: 1 પીએક્સ 4px 4px 1px; ટેક્સ્ટ-શણગાર: કોઈ નહીં; ગાદી: 4 પીએક્સ; સરહદ રંગ: # 69f # 00f # 00f # 69f; }અને તમે બટન કડીના હોવર અને સક્રિય શૈલીઓને પણ અસર કરી શકો છો, ફક્ત તે સ્યુડો વર્ગોનો ઉપયોગ કરો:
a: લિંક {સરહદી-શૈલી: નક્કર; સરહદ-પહોળાઈ: 1 પીએક્સ 4px 4px 1px; ટેક્સ્ટ-શણગાર: કોઈ નહીં; ગાદી: 4 પીએક્સ; સરહદ રંગ: # 69f # 00f # 00f # 69f; } a: હોવર (સરહદ રંગ: # સીસીસી; }