यदि आपको अपनी वेबसाइटों पर क्षैतिज, विभाजक-शैली रेखाएं जोड़ने की आवश्यकता है, तो आपके विशिष्ट विकल्पों में आपके पृष्ठ पर उन पंक्तियों की छवि फ़ाइलों को जोड़ने की आवश्यकता होती है, लेकिन इसके लिए आपके ब्राउज़र को उन फ़ाइलों को पुनर्प्राप्त करने और लोड करने की आवश्यकता होगी, जो साइट पर नकारात्मक प्रभाव डाल सकते हैं प्रदर्शन। आप सीएसएस सीमा संपत्ति का उपयोग सीमाओं को जोड़ने के लिए भी कर सकते हैं जो शीर्ष पर या तत्व के नीचे लाइनों के रूप में कार्य करते हैं, प्रभावी ढंग से आपकी विभाजक रेखा बनाते हैं।
या - अभी तक बेहतर - क्षैतिज नियम के लिए HTML तत्व का उपयोग करें।
क्षैतिज नियम तत्व
क्षैतिज नियम रेखाओं की डिफ़ॉल्ट उपस्थिति आदर्श नहीं है। उन्हें अच्छे दिखने के लिए, इन तत्वों की दृश्य उपस्थिति को समायोजित करने के लिए सीएसएस जोड़ें ताकि आप अपनी साइट को कैसे देखना चाहते हैं।
एक मूल एचआर टैग प्रदर्शित होता है जिस तरह ब्राउज़र इसे प्रदर्शित करना चाहता है। आधुनिक ब्राउज़र आमतौर पर लाइन बनाने के लिए 100 प्रतिशत की चौड़ाई, 2 पिक्सेल की ऊंचाई और काले रंग में 3 डी सीमा के साथ अनस्टाइल एचआर टैग प्रदर्शित करते हैं।
चौड़ाई और ऊंचाई ब्राउज़र भर में लगातार हैं
वेब ब्राउज़र में लगातार एकमात्र शैलियों चौड़ाई और शैलियों हैं। ये परिभाषित करते हैं कि रेखा कितनी बड़ी होगी। यदि आप चौड़ाई और ऊंचाई को परिभाषित नहीं करते हैं, तो डिफ़ॉल्ट चौड़ाई 100 प्रतिशत है और डिफ़ॉल्ट ऊंचाई 2 पिक्सल है।
इस उदाहरण में चौड़ाई मूल तत्व का 50 प्रतिशत है (नीचे दिए गए इन उदाहरणों में इनलाइन शैलियों को शामिल करें। उत्पादन सेटिंग में, इन शैलियों को वास्तव में आपके सभी पृष्ठों में प्रबंधन की आसानी के लिए बाहरी स्टाइल शीट में लिखा जाएगा):
शैली = "चौड़ाई: 50%;">
और इस उदाहरण में ऊंचाई 2em है: शैली = "ऊंचाई: 2em;"> आधुनिक ब्राउज़रों में, ब्राउज़र सीमा समायोजित करके लाइन बनाता है। तो यदि आप शैली की संपत्ति के साथ सीमा को हटाते हैं, तो पृष्ठ पृष्ठ पर गायब हो जाएगी। जैसा कि आप देख सकते हैं (ठीक है, आप कुछ भी नहीं देखेंगे, क्योंकि लाइनें अदृश्य हो जाएंगी) इस उदाहरण में: शैली = "सीमा: कोई नहीं;">
सीमा आकार, रंग और शैली को समायोजित करने से लाइन अलग दिखाई देगी और सभी आधुनिक ब्राउज़रों में भी यही प्रभाव पड़ता है। उदाहरण के लिए, इस प्रदर्शन में सीमा लाल, धराशायी, और 1 पीएक्स चौड़ी है: शैली = "सीमा: 1 पीएक्स डैश # 000;">
लेकिन यदि आप सीमा और ऊंचाई बदलते हैं, तो शैली आधुनिक ब्राउज़र में बहुत पुराने ब्राउज़र में थोड़ा अलग दिखती है। जैसा कि आप इस उदाहरण में देख सकते हैं, यदि आप इसे आईई 7 और नीचे देखते हैं (एक ब्राउज़र जो दुर्भाग्य से पुराना है और अब माइक्रोसॉफ्ट द्वारा समर्थित नहीं है) वहां एक बेवल वाली आंतरिक रेखा है जो अन्य ब्राउज़रों (आईई 8 और ऊपर सहित) में प्रदर्शित नहीं होती है। : शैली = "ऊंचाई: 1.5 मीटर; चौड़ाई: 25em; सीमा: 1 पीएक्स ठोस # 000;">
उन पुरातन ब्राउज़र वास्तव में आज वेब डिज़ाइन में चिंता का विषय नहीं हैं, क्योंकि उन्हें बड़े पैमाने पर अधिक आधुनिक विकल्पों के साथ बदल दिया गया है। रंग के बजाय, आप अपने क्षैतिज नियम के लिए पृष्ठभूमि छवि को परिभाषित कर सकते हैं ताकि यह ठीक वैसे ही दिख सके जैसा आप चाहते हैं, लेकिन फिर भी आपके मार्कअप में अर्थात् प्रदर्शित करता है। इस उदाहरण में हमने एक ऐसी छवि का उपयोग किया जो तीन लहरों वाली रेखाओं में से एक है। पृष्ठभूमि छवि के रूप में इसे दोहराने के साथ सेट करके, यह उस सामग्री में एक ब्रेक बनाता है जो आपको पुस्तकों में लगभग दिखता है: शैली = "ऊंचाई: 20 पीएक्स; पृष्ठभूमि: # एफएफ यूआरएल (aa010307.gif) दोहराना स्क्रॉल केंद्र; सीमा: कोई नहीं;"> CSS3 के साथ, आप अपनी लाइनों को और अधिक रोचक बना सकते हैं। एचआर तत्व परंपरागत रूप से एक है क्षैतिज लाइन, लेकिन सीएसएस ट्रांसफॉर्म संपत्ति के साथ, आप बदल सकते हैं कि वे कैसे दिखते हैं। एचआर तत्व पर एक पसंदीदा परिवर्तन रोटेशन को बदलने के लिए है। आप अपने एचआर तत्व को घुमा सकते हैं ताकि यह थोड़ा सा विकर्ण हो: घंटा {-मोज़-ट्रांसफॉर्म: घुमाएं (10 डिग्री);-webkit-transform: घुमाने (10deg);-ओ-ट्रांसफॉर्म: घुमाएं (10 डिग्री);-एमएस-ट्रांसफॉर्म: घुमाएं (10 डिग्री);परिवर्तन: घुमाने (10deg);}
या आप इसे घुमा सकते हैं ताकि यह पूरी तरह लंबवत हो: घंटा {-मोज़-ट्रांसफॉर्म: घुमाएं (90 डिग्री);-वेबिट-ट्रांसफॉर्म: घुमाएं (90 डिग्री);-ओ-ट्रांसफॉर्म: घुमाएं (90 डिग्री);-एमएस-ट्रांसफॉर्म: घुमाएं (90 डिग्री);परिवर्तन: घुमाने (90 डिग्री);}
याद रखें कि यह तकनीक दस्तावेज़ में अपने वर्तमान स्थान के आधार पर एचआर को घुमाती है, इसलिए आपको इसे प्राप्त करने के लिए स्थिति को समायोजित करने की आवश्यकता हो सकती है। किसी डिज़ाइन में लंबवत रेखाएं जोड़ने के लिए इसका उपयोग करने की अनुशंसा नहीं की जाती है, लेकिन यह एक दिलचस्प प्रभाव प्राप्त करने का एक तरीका है। एक बात यह है कि एचआर तत्व का उपयोग करने के बजाय कुछ लोग अन्य तत्वों की सीमाओं पर भरोसा करते हैं। लेकिन कभी-कभी एचआरआर सीमाओं को स्थापित करने की कोशिश करने के बजाय उपयोग करने के लिए बहुत सुविधाजनक और आसान है। कुछ ब्राउज़रों के बॉक्स मॉडल के मुद्दे सीमा को स्थापित करने के लिए भी कर सकते हैं। सीमाओं को बदलना चुनौतीपूर्ण हो सकता है
एक पृष्ठभूमि छवि के साथ एक सजावटी रेखा बनाओ
एचआर तत्वों को बदलना
अपने पृष्ठों पर लाइनों को पाने का एक और तरीका
