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