લિંક અંડરલાઈન્સ દૂર કરો અથવા ડૅશ ડટ, અથવા ડબલ અધોરેખિત લિંક્સ બનાવો
ડિફૉલ્ટ રૂપે, વેબ બ્રાઉઝર્સ ચોક્કસ CSS શૈલીઓ ધરાવે છે જે તેઓ વિશિષ્ટ HTML તત્વો પર લાગુ થાય છે. જો તમે તમારી સાઇટની પોતાની શૈલી શીટો સાથે આ ડિફોલ્ટો પર ફરીથી લખતા નથી, તો ડિફોલ્ટ્સ લાગુ થશે. હાયપરલિંક્સ માટે, ડિફોલ્ટ ડિસ્પ્લે સ્ટાઇલ એ છે કે કોઈ લિંકવાળા ટેક્સ્ટ વાદળી અને રેખાંકિત હશે. બ્રાઉઝર આવું કરે છે જેથી સાઇટના મુલાકાતીઓ સરળતાથી જોઈ શકે છે કે કઈ ટેક્સ્ટ જોડાય છે. ઘણાં વેબ ડીઝાઇનરો આ ડિફૉલ્ટ સ્ટાઇલની કાળજી લેતા નથી, ખાસ કરીને તે નીચે લીટીઓ. Thankfully, સીએસએસ તે underlines ના દેખાવ બદલવા અથવા તેમને સંપૂર્ણપણે દૂર કરવા માટે બનાવે છે.
ટેક્સ્ટ લિંક્સ પર નીચે લીટીને દૂર કરી રહ્યું છે
બિન-અન્ડરલાઇન કરેલી ટેક્સ્ટને વાંચવા માટે રેખાંકિત ટેક્સ્ટ વધુ પડકારજનક હોઈ શકે છે. વધુમાં, ઘણા ડિઝાઇનરો અંડરલાઈન ટેક્સ્ટ લિંક્સના દેખાવ માટે માત્ર કાળજી લેતા નથી. આ કિસ્સામાં, તમે કદાચ આ અંડરલાઈન્સને એકસાથે દૂર કરવા માંગો છો.
ટેક્સ્ટ લિંક્સમાંથી નીચે લીટીઓને દૂર કરવા માટે, તમે સીએસએસ પ્રોપર્ટી ટેક્સ્ટ-શણગારનો ઉપયોગ કરશો. અહીં તે સીએસએસ છે જે તમે આમ કરવા લખો છો:
એક {text-decoration: none; }
તે લીટીના CSS સાથે, તમે બધા ટેક્સ્ટ લિંક્સમાંથી નીચે લીટીને દૂર કરશો. તેમ છતાં આ એક ખૂબ જ સામાન્ય શૈલી છે (તે તત્વ પસંદગીકારનો ઉપયોગ કરે છે), તે મૂળભૂત બ્રાઉઝર શૈલીઓ કરતાં વધુ વિશિષ્ટતા ધરાવે છે. કારણ કે તે ડિફૉલ્ટ શૈલીઓ છે જે અંડરલાઇન્સથી શું શરૂ કરે છે, તે એટલા માટે છે કે તમારે ઓવરરાઇટ કરવાની જરૂર છે.
અન્ડરલાઇન્સ દૂર કરવા પર સાવધાન
દેખીતી રીતે, નીચે લીટીઓ દૂર કરવું તે બરાબર હોઈ શકે કે તમે શું પૂર્ણ કરવા માંગો છો, પણ જ્યારે તમે આ પ્રમાણે કરો ત્યારે તમારે સાવધ રહેવું જોઈએ. તમે રેખાંકિત લિંક્સના દેખાવને પસંદ કરો છો કે નહી, તમે એવી દલીલ કરી શકતા નથી કે તે કઇ ટેક્સ્ટ જોડાયેલ છે અને જે નથી તે સ્પષ્ટ બનાવે છે. જો તમે નીચે લીટીઓ કે ડિફૉલ્ટ વાદળી રંગનો રંગ બદલો છો, તો તમારે ખાતરી કરવી જોઈએ કે તમે તેમને શૈલીઓ સાથે બદલો છો જે હજુ પણ કડી થયેલ ટેક્સ્ટને બહાર નીકળવાની મંજૂરી આપે છે. આ તમારી સાઇટના મુલાકાતીઓ માટે વધુ અંતર્ગત અનુભવ માટે કરશે.
બિન-લિંક્સને નીચે આપશો નહીં
લિંક્સ અને અધોક્ષણો પરની બીજી સાવધાની, ટેક્સ્ટને નીચે આપતા નથી કે જે તેને પર ભાર આપવાના માર્ગ તરીકે લિંક નથી. લોકો રેખાંકિત ટેક્સ્ટની લિંકની અપેક્ષા રાખતા આવ્યા છે, તેથી જો તમે ભાર ઉમેરવા માટે (તેને બોલ્ડ અથવા ઇટાલિક બનાવવાના બદલે) સામગ્રીને નીચે લીટી કરો તો, તમે ખોટી સંદેશ મોકલો છો અને સાઇટ વપરાશકર્તાઓને મૂંઝવણમાં મૂકે છે.
બિંદુઓ અથવા ડેશ માટે અંડરલાઇન બદલો
જો તમે તમારી ટેક્સ્ટ લિંકને નીચે લીટી રાખવા માગો છો, પરંતુ ડિફૉલ્ટ દેખાવમાંથી રેખાંકિત શૈલીની શૈલીને બદલો, જે "soldi" રેખા છે, તો તમે આ પણ કરી શકો છો તે નક્કર રેખાને બદલે, તમે તમારી લિંક્સ નીચે લીટી કરવા માટે બિંદુઓ વાપરી શકો છો. આ કરવા માટે, તમે હજી પણ નીચે લીટીને દૂર કરશો, પરંતુ તમે સરહદ-તળિયાની શૈલીની મિલકત સાથે તેને બદલશો:
એક {text-decoration: none; સીમા-તળિયું: 1 પીએક્સ ડોટેડ; }કારણ કે તમે પ્રમાણભૂત રેખાંકિત દૂર કર્યું છે, ડોટેડ એક જ દેખાય છે તે એક જ છે.
તમે ડેશ મેળવવા માટે સમાન વસ્તુ કરી શકો છો. સરહદ-તળિયાની શૈલીને માત્ર ડૅશ પર બદલો:
એક {text-decoration: none; સીમા-તળિયું: 1 પૅક્સ ડૅશ; }અંડરલાઈન રંગ બદલો
તમારા લિંક્સ પર ધ્યાન દોરવાનો બીજો રસ્તો નીચે લીટીના રંગને બદલવાનો છે. ફક્ત ખાતરી કરો કે રંગ તમારી રંગ યોજના સાથે બંધબેસે છે.
એક {text-decoration: none; સીમા-નીચે: 1 પીએક્સ ઘન લાલ; }ડબલ અન્ડરલાઇન્સ
ડબલ રેખાંકનોનો ઉપયોગ કરવા માટેની યુક્તિ એ છે કે તમારે સરહદની પહોળાઈ બદલવા પડશે. જો તમે 1 પીએક્સની વિશાળ સરહદ બનાવો છો, તો તમે ડબલ રેખાંશ સાથે સમાપ્ત થશો જે એક જ રેખા નીચે દેખાય છે.
એક {text-decoration: none; સરહદ-નીચે: 3px ડબલ; }અન્ય લક્ષણો સાથે બેવડું રેખાંકિત કરવા માટે તમે હાલની રેખાંકિતાનો પણ ઉપયોગ કરી શકો છો, જેમ કે રેખાઓમાંની કોઈ એક, જે ડોટેડ હોય છે:
એક {સરહદ તળિયું: 1 પીએક્સ ડબલ; }લિંક સ્ટેટ્સ ભૂલી જાઓ નહીં
તમે વિવિધ લિંક્સ જેવા સરહદ-તળિયાની શૈલીને તમારા લિંક્સમાં ઉમેરી શકો છો જેમકે: હોવર, સક્રિય, અથવા: મુલાકાત લીધી આ મુલાકાતીઓ માટે સરસ "રોલઓવર" શૈલી અનુભવ બનાવી શકે છે જ્યારે તમે "હોવર" સ્યુડો ક્લાસનો ઉપયોગ કરો છો. જ્યારે તમે લિંક પર હૉવર કરો છો ત્યારે બીજો ડોટેડ રેખાંકિત દેખાય છે:
એક {text-decoration: none; } a: હોવર (સરહદ-નીચે: 1 પીએક્સ ડોટેડ; }જેનિફર કિનાન દ્વારા મૂળ લેખ. જેરેમી ગીરર્ડ દ્વારા સંપાદિત