एंकर (लिंक) के लिए अंडरलाइन कैसे निकालें?

312

वैसे भी (सीएसएस में) पृष्ठ में पेश किए गए पाठ और लिंक के लिए अंडरलाइन से बचने के लिए है ..?

html css underline

8

<penantic> आप कभी भी यह नहीं मान सकते हैं कि कोई ब्राउज़र आपके HTML को कैसे प्रस्तुत करेगा। एक टैग एक एंकर को प्रस्तुत करता है जिसे ब्राउज़र डिफ़ॉल्ट रूप से रेखांकित करने के लिए चुनता है। यू केवल अंडरलाइन टैग है। नीचे दिए गए जवाब सीएसएस के जवाब हैं </ pendantic>

— मृत खाता

44

विडंबना यह है कि किसी को यह टिप्पणी करने के लिए पर्याप्त नहीं है, लेकिन शब्द को सही ढंग से वर्तनी (या लगातार भी!) करने के लिए पर्याप्त नहीं है।

— टेक्निटियम

नीचे दिए गए जवाबों के अलावा, हैंडलिंग पर a:hoverभी विचार किया जाना चाहिए, सबसे लोकप्रिय ब्राउज़रों को हॉवरिंग पर एंकरों पर एक अंडरलाइन दिखाना होता है।

— Fr0zenFyr

517

सीएसएस का उपयोग करें। यह तत्वों aऔर uतत्वों को हटाता है :

a, u {
    text-decoration: none;
}

कभी-कभी आपको तत्वों के लिए अन्य शैलियों को ओवरराइड करने की आवश्यकता होती है, जिस स्थिति में आप !importantअपने नियम में संशोधक का उपयोग कर सकते हैं :

a {
    text-decoration: none !important;
}

— एमिल विकासस्ट्रम
स्रोत

1

अगर color: black !important;इसमें जोड़ा bodyजाएगा, तो क्या एंकर सहित सभी तत्वों को सेट किया जाएगा, एंकरों का दौरा किया जाएगा, होवर किए गए एंकर हमेशा काले होंगे?

— .मेगा

Ωmega Δ, जाहिरा तौर पर नहीं, और आपको यह इंगित करने के लिए धन्यवाद कि मुझे समग्र रूप से शरीर के नियम में एक त्रुटि मिली। मैंने अपना उत्तर अपडेट कर दिया है।

— एमिल विकासस्ट्रम

मैंने पाया कि यदि आप तत्व के text-decoration: none !important;लिए शैली सेट करते हैं body, तो यह केवल एंकर के लिए काम करता है जब आप तत्वों के text-decoration: inherit;लिए स्पष्ट रूप से शैली सेट करते aहैं।

— .मेगा

7

!importantशैलियों को ओवरराइड करने के लिए विशिष्टता और कार्डिनैलिटी से बचने और !importantउनका उपयोग करने के लिए आम तौर पर बेहतर है , अन्यथा आप संरचना की किसी भी समझ के बिना पूर्ण स्टाइलशीट के साथ समाप्त हो सकते हैं जो इसे आवश्यक बनाता है। यह एक कोड गंध IMO है।

— माइक लियोन

!importantएक परमाणु होने की तरह है। लेकिन एक बार जब आप शुरू हो जाते हैं और !importantअन्य तत्वों का उपयोग करने के लिए फुसलाते हैं, तो इसे (nuke) प्राप्त कर सकते हैं और लाभ एक गतिरोध के पक्ष में जाता है, जो दुनिया के लिए बहुत अच्छा है, क्योंकि MUD शांति सुनिश्चित करता है, लेकिन सीएसएस की दुनिया में, ऐसी शांति इसका मतलब है कि आप कुछ लाभ नहीं दे सकते।

— जेसनजेनएक्स

27

सीएसएस है

text-decoration: none;

तथा

text-decoration: underline;

— Dandan
स्रोत

16

यह आपके रंग के साथ-साथ एंकर टैग के साथ मौजूद अंडरलाइन को हटा देगा

 a {
     text-decoration: none ;
  }
a:hover
  {
    color:white;
    text-decoration:none;
    cursor:pointer;
   }

— अश्विन शाही
स्रोत

11

सबसे सरल विकल्प यह है:

<a style="text-decoration: none">No underline</a>

बेशक, सीएसएस को HTML (यानी इनलाइन सीएसएस) के साथ मिलाना एक अच्छा विचार नहीं है, खासकर जब आप aसभी जगह टैग का उपयोग कर रहे हों ।
इसलिए इसे स्टाइलशीट में जोड़ने के लिए एक अच्छा विचार है:

a {
    text-decoration: none;
}

या जेएस फाइल में भी यह कोड:

var els = document.getElementsByTagName('a');

for (var el = 0; el < els.length; el++) {
    els[el].style["text-decoration"] = "none";
}

— XLogic
स्रोत

Iphone / Android अच्छे बेंचमार्क नहीं हैं क्योंकि वे जीमेल या आउटलुक के बैकवर्ड HTML प्रतिपादन का प्रतिनिधित्व नहीं करते हैं।

— स्टुअर्ट

@XLogic: बहुत बहुत धन्यवाद

— मोनिका पटेल

6

text-decorationS को हटाने के लिए CSS का उपयोग करें ।

a {
    text-decoration: none;
}

— एलन हाग्गै अलवी
स्रोत

6

आपके लिए सबसे अच्छा विकल्प यदि आप केवल लंगर लिंक से अंडरलाइन को हटाना चाहते हैं-

    #content a{
                text-decoration-line:none;
                }

इससे अंडरलाइन निकल जाएगी।

इसके अलावा आप अन्य शैलियों में हेरफेर के लिए भी इसी तरह के सिंटैक्स का उपयोग कर सकते हैं-

                text-decoration: none;
                text-decoration-color: blue;
                text-decoration-skip: spaces;
                text-decoration-style: dotted;

उम्मीद है की यह मदद करेगा!

PS- यह मेरा पहला उत्तर है!

— कौशिक की प्रशंसा
स्रोत

4

मेरे मामले में एंकर द्वारा होवर-प्रभाव के बारे में एक नियम था, जैसे:

#content a:hover{
border-bottom: 1px solid #333;
}

बेशक, text-decoration:none;इस स्थिति में मदद नहीं कर सकता। और मैं बहुत समय बिताता हूं जब तक मुझे इसका पता नहीं चल गया।

तो: एक अंडरस्कोर को सीमा-तल के साथ भ्रमित नहीं होना है।

— हांग्जो खोमेन्को
स्रोत

4

शायद ही कभी यह कुछ यूआई सीएसएस प्रतिपादन द्वारा ओवरराइड करेगा। उपयोग करने के लिए बेहतर:

a.className {
    text-decoration: none !important;
}

— संजीब कर्मकार
स्रोत

1

यह एक भयानक विचार है। stackoverflow.com/questions/8360190/…

— बेंजामिन ग्रुएनबाम

2

समस्या को एक और परिप्रेक्ष्य प्रदान करने के लिए (मूल पद के शीर्षक / सामग्री से अनुमान के अनुसार):

यदि आप यह जानना चाहते हैं कि आपके HTML में दुष्ट अंडरलाइन क्या बना रहा है, तो डिबगिंग टूल का उपयोग करें। से चुनने के लिए बहुत सारे हैं:

फ़ायरफ़ॉक्स के लिए फ़ायरबग है;

ओपेरा के लिए वहाँ Dragonfly (टूल्स में "डेवलपर टूल" कहा जाता है-> उन्नत मेनू; डिफ़ॉल्ट रूप से ओपेरा के साथ आता है);

IE के लिए "इंटरनेट एक्सप्लोरर डेवलपर टूलबार" है, जो IE7 और उससे नीचे के लिए एक अलग डाउनलोड है, और IE8 (हिट F12) में एकीकृत है।

मुझे सफारी, क्रोम और अन्य अल्पसंख्यक ब्राउज़रों के बारे में कोई जानकारी नहीं है, लेकिन आपको अपने मशीन पर वैसे भी कम से कम तीन में से एक होना चाहिए।

— Vilx-
स्रोत

सफारी 3/4: macobserver.com/tmo/article/Safari_3.1_The_Magical_Develop_Menu

— mplungjan

1

जब आप जोड़ा स्टाइल के बिना एक लिंक के रूप में बस एक लंगर टैग का उपयोग करना चाहते हैं (जैसे कि होवर या नीले रंग पर रेखांकित) class="no-style"लंगर टैग में जोड़ें । फिर अपनी वैश्विक स्टाइलशीट में "नो-स्टाइल" क्लास बनाएं।

.no-style { text-decoration: none !important; }

इसके दो फायदे हैं।

यह सभी एंकर टैग को प्रभावित नहीं करेगा, बस "नो-स्टाइल" वर्ग वाले उन्हें जोड़ा गया।
यह किसी भी अन्य स्टाइल को ओवरराइड करेगा जो अन्यथा टेक्स्ट-डेकोरेशन को किसी को भी सेट करने से रोक सकता है।

— फ्रेडरिक जॉन
स्रोत

0

लिंक टैग का उपयोग करके या तो स्टाइलशीट को शामिल करना न भूलें

http://www.w3schools.com/TAGS/tag_link.asp

या अपने वेबपेज पर एक स्टाइल टैग के भीतर सीएसएस संलग्न करें।

<style>
  a { text-decoration:none; }
  p { text-decoration:underline; }
</style>

मैं लिंक के अलावा किसी भी चीज़ पर अंडरलाइन का उपयोग करने की सलाह नहीं दूंगा, आमतौर पर अंडरलाइन को कुछ के रूप में स्वीकार किया जाता है जो क्लिक करने योग्य होता है। अगर यह क्लिक करने योग्य नहीं है, तो इसे रेखांकित न करें।

CSS मूल बातें w3schools पर ली जा सकती हैं

— Jasons
स्रोत

0

<u>

एक पदावनत टैग है।

उपयोग...

<span class="underline">My text</span>

सीएसएस फ़ाइल युक्त ...

span.underline
{
    text-decoration: underline;
}

या केवल...

<span style="text-decoration:underline">My Text</span>

— Oundless
स्रोत

0

सीएसएस संपत्ति का उपयोग करें,

text-decoration:none;

लिंक से अंडरलाइन को हटाने के लिए।

— स्मिता कागवाडे
स्रोत

0

एक सीएसएस संपत्ति द्वारा पाठ सजावट नामक अंडरलाइन को हटाया जा सकता है।

<style>
a{
text-decoration:none;
}
</style>

यदि आप एक के अलावा अन्य तत्वों में मौजूद टेक्स्ट के लिए अंडरलाइन को हटाना चाहते हैं , तो निम्न सिंटैक्स का उपयोग किया जाना चाहिए।

<style>
element-name{
text-decoration:none;
}
</style>

कई अन्य पाठ-सजावट मूल्य हैं जो आपको लिंक डिजाइन करने में मदद कर सकते हैं।

— Sheraz
स्रोत

-1

मैं वेब प्रिंटिंग में इस समस्या से परेशान हूँ और हल कर रहा हूँ। सत्यापित परिणाम।

a {
    text-decoration: none !important;
}

यह काम करता हैं!।

— Incheol
स्रोत