दिलचस्प पोस्ट
आईओएस 6: मैं कुछ दृश्यों को चित्रित करने और दूसरों को घुमाने के लिए कैसे रोकूं? क्या मुझे जैक्सन के ऑब्जेक्टमैपर को एक स्थिर क्षेत्र के रूप में घोषित करना चाहिए? jQuery के AJAX सफलता कॉलबैक फ़ंक्शन परिभाषा महीना वर्ष दिखाने के लिए केवल jQuery UI DatePicker एंड्रॉइड रिकॉर्डिंग इनकमिंग और आउटगोइंग कॉल वर्तमान जीएमटी विश्व समय प्राप्त करना जावा-आधारित एप्लिकेशन के उपयोग के लिए लाइव वीडियो डिवाइस से छवियों को कैद करने का सबसे अच्छा तरीका क्या है? JSON और JSONP के बीच अंतर क्या हैं? जावा के लिए फास्ट ट्रांसएंडेंड / त्रिकोणमितीय फ़ंक्शन Google Apps स्क्रिप्ट में किसी अन्य HTML पृष्ठ से लिंक करना क्या आप समापन समझा सकते हैं (जैसा कि वे पायथन से संबंधित हैं)? पीएनजी फ़ाइल के लिए HTML5 कैनवास रूबी में कक्षा के नाम से पहले डबल कॉलन? खिड़की के ओपन इवेंट की जांच करते हुए window.open के साथ खोला गया स्ट्रिंग से आईपीवी 4 पता पाने का सबसे तेज़ तरीका

एक घंटा तत्व का रंग बदलना

मैं सीएसएस का उपयोग कर अपने hr टैग का रंग बदलना चाहता हूं। मैंने नीचे दिए गए कोड को काम करने के लिए नहीं लगता है:

 hr { color: #123455; } 

वेब के समाधान से एकत्रित समाधान "एक घंटा तत्व का रंग बदलना"

मुझे लगता है कि आपको border-color बजाए border-color उपयोग करना चाहिए, यदि आपका इरादा <hr> टैग द्वारा उत्पादित लाइन का रंग बदलना है।

यद्यपि, यह टिप्पणियों में बताया गया है कि, यदि आप अपनी लाइन का आकार बदलते हैं, तो सीमा अब भी उतनी ही व्यापक होगी जितनी कि आप शैली में निर्दिष्ट करते हैं, और रेखा को डिफ़ॉल्ट रंग से भर दिया जाएगा (जो कि वांछित प्रभाव नहीं है पहर)। तो ऐसा लगता है कि इस मामले में आपको background-color को भी निर्दिष्ट करना होगा (@ आईबू ने अपने जवाब में सुझाव दिया है)।

एचटीएमएल 5 बॉयलरप्लेट प्रोजेक्ट में इसकी डिफ़ॉल्ट स्टाइलशीट निम्नलिखित नियम निर्दिष्ट करती है:

 hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } 

हाल ही में साइटपॉइंट द्वारा प्रकाशित "12 छोटे-ज्ञात सीएसएस तथ्यों" शीर्षक वाले एक लेख में यह उल्लेख किया गया है कि यदि आप hr { border-color: inherit } निर्दिष्ट करते हैं hr { border-color: inherit } तो <hr> इसकी border-color अपने माता border-color पिता के color सेट कर सकता है।

क्रोम और सफारी में border-color काम करता है
फ़ायरफ़ॉक्स और ओपेरा में background-color काम करता है
color IE7 + में काम करता है

मुझे लगता है कि यह उपयोगी हो सकता है यह साधारण सीएसएस चयनकर्ता था

 hr { background-color: red; height: 1px; border: 0; } 
 hr { height: 1px; color: #123455; background-color: #123455; border: none; } 

इसे इस तरह से करने से आपको ऊँचाई बदलनी पड़ती है यदि ज़रूरत हो। सौभाग्य। स्रोत: सीएसएस के साथ शैली एचआर कैसे करें

एफएफ, ऑपेरा, यानी, क्रोम और सफारी में परीक्षण किया गया

 hr{ border-top: 1px solid red; } 

बेला देखें http://jsfiddle.net/HPSjU/

 hr { height:0; border:0; border-top:1px solid #083972; } 

यह क्षैतिज नियम 1px मोटी रखता है, जबकि इसके रंग भी बदलता रहता है

रंग के साथ सीमा-शीर्ष केवल अलग रंग में लाइन बनाने के लिए पर्याप्त है।

 hr{ border-top: 1px solid #ccc; } 
  घंटा
 {
 रंग: # एफ 00;
 पृष्ठभूमि रंग: # एफ 00;
 ऊंचाई: 5 पिक्सेल;
 }

मैं IE, Firefox और Chrome May 2015 पर परीक्षण कर रहा हूं और यह वर्तमान संस्करणों के साथ सबसे अच्छा काम करता है। यह मानव संसाधन को केन्द्रित करता है और इसे 70% चौड़ा बनाता है:

 hr.light { width:70%; margin:0 auto; border:0px none white; border-top:1px solid lightgrey; } 
 <hr class="light" /> 

आपको सीमा चौड़ाई को 0 में सेट करना चाहिए; यह फ़ायरफ़ॉक्स और क्रोम में अच्छी तरह से काम करता है

 hr { clear: both; color: red; background-color: red; height: 1px; border-width: 0; } 
 <hr /> This is a test <hr /> 

अगर आप सीएसएस वर्ग का उपयोग करते हैं तो यह सभी 'एचआर' टैग्स द्वारा लिया जाएगा, लेकिन यदि आप एक विशेष 'एचआर' के लिए चाहते हैं तो नीचे कोड का प्रयोग करें, इनलाइन सीएसएस

 <hr style="color:#99CC99" /> 

अगर यह क्रोम में काम नहीं कर रहा है तो नीचे कोड की कोशिश करें:

 <hr color="red" /> 

मेरा मानना ​​है कि यह सबसे प्रभावी तरीका है:

 <hr style="border-top: 1px solid #ccc; background: transparent;"> 

या यदि आप सभी एचआर तत्वों पर यह करना चाहते हैं तो आप इसे सीएसएस पर लिखें:

 hr { background-color: transparent; border-top: 1px solid #ccc; } 
 hr { background-color: #123455; } 

पृष्ठभूमि आप को बदलने की कोशिश करनी चाहिए

आप सीमाओं के रंग के साथ भी काम कर सकते हैं मुझे यकीन नहीं है कि मुझे लगता है कि इसके साथ क्रॉसब्रॉसर मुद्दे हैं। आपको इसे अलग-अलग ब्राउज़र में जांचना चाहिए

कुछ ब्राउज़र color विशेषता का उपयोग करते हैं और कुछ background-color विशेषता का उपयोग करते हैं। सुरक्षित रहने के लिए:

 hr{ color: #color; background-color: #color; } 

चूंकि मेरे पास टिप्पणी करने के लिए प्रतिष्ठा नहीं है, इसलिए मैं यहां कुछ विचारों को बताऊंगा।

यदि आप सीएसएस चर ऊंचाई चाहते हैं, तो सभी सीमाओं को दूर करें और पृष्ठभूमि का रंग दें।

  hr{ height:2px; border:0px; background:green; margin:0px;/*sometimes useful*/ } /*Doesn't work in ie7 and below and in Quirks Mode*/ 

अगर आप केवल एक शैली चाहते हैं जिसे आप जानते हैं कि काम करेगा (उदाहरण: किसी सीमा को बदलने के लिए: अधिकांश ईमेल क्लाइंट के लिए तत्व से पहले या

  hr{ height:0px; border:0px; border-top:2px solid blue; margin:0px;/*useful sometimes*/ } 

दोनों तरीकों से, यदि आप चौड़ाई निर्धारित करते हैं, तो इसका हमेशा आकार होगा

display:block; सेट करने की कोई जरूरत नहीं है display:block; इसके लिए।

पूरी तरह से सुरक्षित होने के लिए, आप दोनों मिश्रण कर सकते हैं, क्योंकि कुछ ब्राउज़रों की height:0px; साथ भ्रमित हो सकते हैं height:0px; :

  hr{ height:1px; border:0px; background:blue; border-top:1px solid blue; margin:0px;/*useful sometimes*/ } 

इस विधि से आप यह सुनिश्चित कर सकते हैं कि इसकी ऊंचाई कम से कम 2px होगी

यह एक पंक्ति अधिक है, लेकिन सुरक्षा सुरक्षा है।

यह आपको लगभग सभी चीजों के साथ संगत होने के लिए उपयोग करना चाहिए।

याद रखें: Gmail केवल इनलाइन सीएसएस का पता लगाता है और कुछ ईमेल क्लाइंट पृष्ठभूमि या सीमाओं का समर्थन नहीं कर सकते हैं। यदि कोई विफल रहता है, तो आपके पास अब भी 1px लाइन होगा कुछ नहीं से बेहतर।

बुरे मामलों में, आप color:blue; जोड़ने का प्रयास कर सकते हैं color:blue;

सबसे खराब मामलों में, आप <font color="blue"></font> टैग का उपयोग करने की कोशिश कर सकते हैं और इसे अपने अनमोल <hr/> टैग में डाल सकते हैं। यह <font></font> टैग रंग का वारिस होगा

इस पद्धति के साथ, आप ऐसा करना चाहते हैं: <hr width="50" align="left"/>

उदाहरण:

  <span> awhieugfrafgtgtfhjjygfjyjg <font color="#42B3E5"><hr width="50" align="left"/></font> </span> <!--Doesn't work in ie7 and below and in Quirks Mode--> 

यहां आपके लिए एक लिंक है: http://jsfiddle.net/sna2d/

यहां सभी उत्तरों पढ़ने के बाद, और वर्णित जटिलता को देखते हुए, मैंने मानव संसाधन के साथ प्रयोग करने के लिए एक छोटा मोड़ पर सेट किया। और, निष्कर्ष यह है कि आप अपने द्वारा लिखे गए अधिकांश बंदरबंद सीएसएस को फेंक सकते हैं, इस छोटे प्राइमर को पढ़ सकते हैं और सिर्फ शुद्ध सीएसएस की इन दो पंक्तियों का उपयोग करें:

 hr { border-style: solid; border-color: cornflowerblue; /* or whatever */ } 

यही आपको अपने एचआर को स्टाइल करने की ज़रूरत है

  • क्रॉस-ब्राउज़र, क्रॉस-डिवाइस, क्रॉस-ओएस, क्रॉस-इंग्लिश-चैनल, क्रॉस-एज्स काम करता है।
  • नहीं "मुझे लगता है कि यह काम करेगा …" , "आपको सफ़ारी / आईई को ध्यान में रखना होगा …" आदि।
  • कोई अतिरिक्त सीएसएस नहीं – कोई height , width , background-color , color आदि शामिल नहीं है।

बस बुलेटप्रूफ रंगीन एचआरएस यह सरल टीएम है


बोनस: एचआर को कुछ ऊंचाई H देने के लिए, बस border-width H/2 रूप में सेट करें।

यह सरल और मेरा पसंदीदा है

 <hr style="background-color: #dd3333" /> 

आप एक अलग रंग के साथ एक पंक्ति बनाने के लिए सीएसएस का उपयोग कर सकते हैं, उदाहरण उस तरह होगा:

 border-left: 1px solid rgb(216, 216, 216); border-right: medium none; border-width: medium medium medium 2px; border-style: none none none solid; border-color: -moz-use-text-color -moz-use-text-color -moz-use-text-color rgb(216, 216, 216); 

वह कोड खड़ी ग्रे लाइन प्रदर्शित करेगा।

ठीक है, मैं एचटीएमएल, सीएसएस और जावा में नया हूँ, परन्तु मैंने अपने रास्ते की कोशिश की जो सभी ब्राउज़रों में मेरे लिए काम करती थी। मैंने सीएसएस के बजाय जेएस का उपयोग किया है जो कुछ ब्राउज़रों के साथ काम नहीं करता है

सबसे पहले मैंने id="myHR" को एचआर तत्व में दिया है और इसे जावा स्क्रिप्ट में प्रयोग किया है।
यहां कोड है

 x = document.getElementById("myHR"); y = x.style.width = "600px"; y = x.style.color = "white"; y = x.style.height = "2px"; y = x.style.border = "none"; y = x.style.backgroundColor = "lightgrey"; 
  1. कोड काम पुराने IE के लिए
  2. कई रंगों के लिए कोशिश की

     <hr color="black"> <hr color="blue"> 

क्षैतिज नियमों को संशोधित करने के लिए फ़ॉन्ट रंगों का उपयोग करना उन्हें अधिक लचीला और उपयोग में आसान बनाता है।

color संपत्ति डिफ़ॉल्ट रूप से विरासत में नहीं मिली है, इसलिए रंग विरासत को अनुमति देने के लिए एचआर के लिए निम्नलिखित की आवश्यकता है:

 /* allow hr to inherit color */ hr { border: 1px solid;} /* reusable colour modifier */ .fc_-alpha { color: crimson;} 
 normal hr: <hr> hr with <span class="fc_-alpha">colour modifier</span>: <hr class="fc_-alpha"> 

आप यह कर सकते हैं:

 hr { border: 1px solid red; } 
 <hr /> This sa test <hr /> 

आप <hr noshade> टैग दे सकते हैं और अपनी सीएसएस फ़ाइल पर जा सकते हैं और जोड़ सकते हैं:

 hr { border-top:0; color: #123455; } 
 <hr noshade /> This sa test <hr noshade /> 

उदाहरण के लिए आप फ़ॉन्ट टैग भी उपयोग कर सकते हैं

 <font color="red"><hr></font>