Html में लाइन कैसे ड्रा करे। HTML और CSS का उपयोग करके एक लाइन कैसे बनाएं। एक रूपरेखा का उपयोग कर लाइन में ब्लॉक
ऐसा लगता है, आपको चार तरीकों की आवश्यकता क्यों हो सकती है? आखिरकार, लगभग हर व्यक्ति एक विधि का उपयोग करता है, जिसके लिए वह आदी है। उदाहरण के लिए, मैंने कई बार Shift और "डैश" कुंजी दबाया, और यह एक क्षैतिज रेखा है।
लेकिन क्या होगा अगर यह एक बिंदीदार रेखा में परिणत होता है, लेकिन आपको एक ठोस की आवश्यकता है?
- सबसे अधिक संभावना है, कीबोर्ड पर Shift कुंजी दोषपूर्ण है। अन्य तरीके यहां बचाव के लिए आएंगे।
3.
4.
5.
शायद वर्ड में एक लाइन बनाने का सबसे आम तरीका कीबोर्ड पर कुछ कुंजियों का उपयोग करना है।
मैं पतली, मोटी, दोहरी, कीबोर्ड द्वारा धराशायी लाइन
नीचे एक अंग्रेजी के साथ कीबोर्ड का एक ड्राइंग है, लेकिन रूसी लेआउट के बिना, लेकिन इससे कोई फर्क नहीं पड़ता, क्योंकि हम केवल तीन चाबियों में रुचि रखते हैं: शिफ्ट, डैश और एंटर।
चित्र: 1. कीबोर्ड पर तीन कुंजी: वर्ड में एक सतत क्षैतिज रेखा के लिए शिफ्ट, डैश और एंटर
इन तीन कुंजियों के साथ, आप Word में एक सतत क्षैतिज रेखा खींच सकते हैं: बिंदीदार या ठोस, पतली या मोटी, लंबी या छोटी।
1) जब आप वर्ड एडिटर में कई बार "-" (डैश) कुंजी दबाते हैं, तो हमें किसी भी लम्बाई की बिंदीदार रेखा मिलती है।
करने के लिए पतला पृष्ठ की पूरी चौड़ाई में एक लंबी रेखा:
- हम कीबोर्ड पर "डैश" कुंजी ("1" के हरे फ्रेम में "शून्य" कुंजी के दाईं ओर पाते हैं)।
- वर्ड में एक नई (!) लाइन के साथ, इस कुंजी को कई बार दबाएं: -
- और फिर "एंटर" () कुंजी दबाएं। कई मुद्रित डैश अचानक पृष्ठ की पूरी चौड़ाई में एक निरंतर, क्षैतिज, पतली रेखा में बदल जाएंगे।
2) जब Shift और "-" (डैश) को एक साथ दबाया जाता है, तो डैश नहीं प्रिंट होता है, लेकिन _________ को रेखांकित करता है। इस प्रकार, आप दस्तावेज़ में कहीं भी मनमानी लंबाई की एक निरंतर रेखा बना सकते हैं।
चित्र: 2. वर्ड में पतली और मोटी क्षैतिज रेखा
अब हम छापते हैं मोटा संपूर्ण पृष्ठ की चौड़ाई भरने के लिए एक क्षैतिज रेखा:
- फिर से हमें वही डैश कुंजी मिलती है, साथ ही Shift कुंजी (बाएं या दाएं, जैसा आप चाहते हैं)। Shift दबाएं, दबाए रखें और जाने न दें।
- और अब एक नई (!) लाइन के साथ कई बार (उदाहरण के लिए, 3-4 बार) डैश पर प्रेस करें (शिफ्ट जारी नहीं करते समय): ___। रिलीज शिफ्ट।
- अब Enter की दबाएं। आपको एक मोटी क्षैतिज ठोस रेखा दिखाई देगी।
आइए तालिका के रूप में कुछ परिणामों को संक्षेप में प्रस्तुत करें:
(विस्तार करने के लिए क्लिक करें) कीबोर्ड का उपयोग करके वर्ड में लाइनें
तालिका का उपयोग करते हुए Word में II लाइन
एक सेल (1 × 1) की तालिका का उपयोग करके एक क्षैतिज रेखा प्राप्त की जा सकती है, जिसमें केवल ऊपरी या निचली सीमा रंगीन होती है (दिखाई जाएगी), और तालिका के अन्य तीन पक्षों में अनियंत्रित सीमाएं हैं (वे अदृश्य होंगे)।
हम कर्सर को उस स्थान पर रखते हैं जहां रेखा होनी चाहिए। Word के शीर्ष मेनू में, क्लिक करें:
- सम्मिलित करें (चित्र 3 में 1),
- तालिका (छवि 3 में 2),
- एक सेल (छवि 3 में 3)।
चित्र: 3. वर्ड में 1x1 टेबल कैसे डालें (एक सेल से)
परिणाम एक बड़ी सेल (1x1) की तालिका होगी:
यह 1x1 तालिका में तीन तरफ से सीमाओं को हटाने के लिए बनी हुई है। इसके लिए
- "होम" टैब पर जाएं (चित्र 4 में 1),
- फिर "फॉंट" के बगल में हम "पैराग्राफ" और सीमाएं (2 छवि 4 में) पाते हैं।
- "नो बॉर्डर" पर क्लिक करके सभी सीमाओं को हटा दें (चित्र 4 में 3),
- "ऊपरी सीमा" या "निचली सीमा" (छवि 4 में 4) का चयन करें।
चित्र: 4. वर्ड टेबल में सीमाओं के चयन को कैसे हटाएं (सीमाओं को अदृश्य बनाएं)
मैं इस वीडियो में (लेख के अंत में) स्पष्ट रूप से दिखाता हूं।
वैसे, अंजीर में। 3 से पता चलता है कि एक आसान तरीका है। आप कर्सर को वर्ड में लाइन की शुरुआत में रख सकते हैं और "क्षैतिज रेखा" (चित्र 4 में 5) पर क्लिक कर सकते हैं:
ड्राइंग में वर्ड में III लाइन
सम्मिलित करें (छवि 1 में 1) - आकृतियाँ (छवि 5 में 2) शब्द में एक क्षैतिज रेखा प्राप्त करने का एक और तरीका है।
लाइन को कड़ाई से क्षैतिज रखने के लिए, Shift कुंजी दबाए रखें और उसी समय रेखा खींचें।
चित्र: 5. वर्ड में एक लाइन कैसे ड्रा करें
ऑन-स्क्रीन कीबोर्ड का उपयोग करके वर्ड में IV लाइन
ऑन-स्क्रीन कीबोर्ड खोजने के लिए, खोज में, "ऑन-स्क्रीन कीबोर्ड" वाक्यांश दर्ज करें, विंडोज 7 के लिए और विंडोज 8 के लिए।
विंडोज 10 के लिए, आप सर्च बार में "ऑनस्क्रीन कीबोर्ड" टाइप करके ऑनस्क्रीन कीबोर्ड भी पा सकते हैं।
चित्र: 6. ऑन-स्क्रीन कीबोर्ड
हम उसी तरह एक क्षैतिज रेखा बनाएंगे जैसे कि एक नियमित कीबोर्ड के साथ पहले संस्करण में। ऑनस्क्रीन कीबोर्ड पर, आपको तीन बटन चाहिए: डैश, शिफ्ट और एंटर।
1 डैश और दर्ज करें
वर्ड में एक नई लाइन से, डैश पर कई बार (चित्र 6 में 1) पर क्लिक करें और एंटर दबाएं। यह एक पतली क्षैतिज रेखा बनाएगा।
2 शिफ्ट, डैश और एंटर
Word में एक नई पंक्ति से, पहले Shift (छवि 6 में 2) पर क्लिक करें, फिर डैश (चित्र 6 में 1)। नतीजा एक अंडरलाइन है। इसलिए हम 2 बार दोहराएंगे, और फिर Enter दबाएं। नतीजतन, हम एक मोटी क्षैतिज रेखा देखेंगे।
HTML पेज बनाते समय, लेआउट एक आवश्यक भूमिका निभाता है। खासकर जब हम विभिन्न प्रतीकों और सजावटी डिजाइन के बारे में बात कर रहे हैं: ये छोटी चीजें आपके पृष्ठ की "भाषा" को अधिक सुलभ और स्पष्ट बनाने में मदद करती हैं, इसके अलावा, वे सामान्य रूप से इसकी धारणा और उपस्थिति को बदलते हैं। डिजाइन के लिए सबसे महत्वपूर्ण तत्वों में से एक क्षैतिज रेखा है, और आगे हम अधिक विस्तार से जानेंगे कि इसके साथ कैसे काम करना है और एचटीएमएल में एक क्षैतिज रेखा कैसे बनाई जाए।
एक क्षैतिज रेखा क्या है और इसके लिए क्या है
Html में एक क्षैतिज रेखा एक पृष्ठ सजावट तत्व है जो कई कार्य करता है:
- सजावटी... पेज में आकर्षण जोड़ने में मदद करता है।
- डिवाइडिंग... विभिन्न अर्थों की जानकारी के प्रभावी पृथक्करण को बढ़ावा देता है।
- जोर देना या रेखांकित करना... आवश्यक और सबसे महत्वपूर्ण जानकारी के लिए पेज मेहमानों का ध्यान आकर्षित करता है।
यह क्षैतिज रेखा है जिसे कई कार्यों को लागू करने का सबसे सस्ती तरीका माना जाता है। इसे बनाना बहुत सरल है, लेकिन बाहरी रूप से यह बहुत लाभदायक लगता है। HTML- कोड में साधारण परिवर्तन करके, आप इसे समायोजित कर सकते हैं:
- लंबाई;
- चौड़ाई;
- रंग विशेषताओं;
- एक या दूसरे किनारे के लिए संरेखण।
ध्यान दें कि क्षैतिज रेखा तत्वों को ब्लॉक करने के लिए संदर्भित करती है। इसका मतलब यह है कि यह पृष्ठ पर एक नई रेखा रखता है, और इसके बाद का पाठ नीचे जाएगा।
HTML में एक क्षैतिज रेखा बनाएँ
आप एक सरल टैग का उपयोग करके एक पंक्ति सेट कर सकते हैं - त्रिकोण कोष्ठक में घंटा। यह "हॉरिज़ॉन्टल नियम" के लिए छोटा है और क्लासिक बाहरी मापदंडों को निर्धारित करता है। यह कई अन्य लोगों से अलग है कि इसे एक अंतिम टैग की आवश्यकता नहीं है और यह अपने दम पर मौजूद है। आप टैग में अतिरिक्त मानों का उपयोग करके किसी तत्व की बाहरी विशेषताओं को बदल सकते हैं:
- लंबाई... यदि आप नहीं चाहते कि लाइन की लंबाई पूरे पृष्ठ पर बढ़े, तो आप वांछित आकार को पिक्सेल या प्रतिशत में सेट कर सकते हैं। यह टैग में अतिरिक्त शब्द "चौड़ाई" और उद्धरणों में "\u003d" संकेत के बाद निर्दिष्ट संख्यात्मक लंबाई संकेतक का उपयोग करके किया जाता है।
यह इस तरह दिख रहा है। उदाहरण के लिए, यदि हम 100 पिक्सेल की लंबाई चाहते हैं, तो हम इस तरह एक टैग सेट करेंगे: hr की चौड़ाई \u003d "100"
- संरेखण... बाएं या दाएं किनारों पर संरेखण संभव है, और केंद्र में भी। यह सुविधा केवल तभी मान्य है जब आपने पहले ही चौड़ाई पैरामीटर निर्दिष्ट कर दिया है, क्योंकि एक पूर्ण-पृष्ठ पंक्ति को संरेखित नहीं किया जा सकता है। संरेखित करने के लिए, "संरेखित करें" टैग में एक अतिरिक्त विशेषता सेट करें और इसके लिए एक दिशा जोड़ें: केंद्र - केंद्र के लिए, बाएं - दाएं के लिए - दाएं संरेखण के लिए।
समाप्त टैग तो इस तरह दिखेगा। उदाहरण के लिए, यदि हमें 150 पिक्सेल की लंबाई के साथ क्षैतिज रेखा के लिए केंद्र संरेखण सेट करने की आवश्यकता है, तो समाप्त टैग इस तरह दिखाई देगा: hr संरेखित \u003d "केंद्र" चौड़ाई \u003d "150"।
ध्यान दें कि "संरेखित करें", संरेखण के लिए उपाय, स्थिति 1 में रखा गया है, भले ही विशेषता लंबाई माप चौड़ाई पर निर्भर है।
- चौड़ाई... वैकल्पिक रूप से, आप एक बोल्ड या पतली रेखांकन बनाते हुए, चौड़ाई भी निर्दिष्ट कर सकते हैं। यह मानदंड किसी भी चीज़ पर निर्भर नहीं करता है और इसे लंबाई या संरेखण को निर्दिष्ट किए बिना स्वतंत्र रूप से उपयोग किया जा सकता है। इसके लिए, हम टैग में आकार विशेषता और पिक्सेल में वांछित चौड़ाई के बराबर एक संख्यात्मक मान का उपयोग करते हैं। संख्या आकार विशेषता और "\u003d" प्रतीक के बाद उद्धरण में इंगित की गई है।
इस प्रकार, अगर हमें एक पंक्ति 15 पिक्सेल चौड़ी बनाने की आवश्यकता है, तो हमें निम्नलिखित टैग बनाने की आवश्यकता है: hr आकार \u003d "15"।
- रंग... इसे एक स्वतंत्र संकेतक के रूप में भी सेट किया गया है। इसे बदलने के लिए, कोड के रूप में या अंग्रेजी में रंग नाम के साथ संयोजन में रंग विशेषता का उपयोग करें। रंग "\u003d" प्रतीक के बाद उद्धरण में इंगित किया गया है।
इस प्रकार, एक मानक सफेद रेखा के लिए टैग को दो तरीकों से लिखा जा सकता है: hr color \u003d "#FFFFFF" या hr रंग: "ब्लैक"
कोड # 000000 का उपयोग करके काला बनाया जा सकता है।
- हटाना साया... यदि आपको एक ऐसे तत्व की आवश्यकता है जिसमें छाया नहीं है, तो टैग में नोशेड विशेषता का उपयोग किया जाना चाहिए। इसका उपयोग अकेले या अन्य तत्वों के संयोजन में किया जा सकता है। इसका उपयोग करने वाली एक मानक रेखा का टैग इस तरह दिखेगा: hr noshade
वीडियो का उपयोग करके एक क्षैतिज रेखा बनाएं
और यदि आप अधिक दृश्य प्रारूप में जानकारी प्राप्त करना चाहते हैं, तो अगले वीडियो का संदर्भ लें, जिसमें क्षैतिज रेखा के साथ काम करने की संभावनाओं का विस्तार से वर्णन है।
क्षैतिज रेखा के आवश्यक आयामों को निर्धारित करने के बाद, आप साइट के पृष्ठों को इस तरह से डिज़ाइन कर सकते हैं कि जानकारी संरचित और नेत्रहीन रूप से नामांकित हो। यह आगंतुकों को प्रस्तुत की गई जानकारी को आसानी से समझने और आपकी साइट को दूसरों से अलग करने में मदद करता है।
हैलो! आज मैं आपको html का उपयोग करके एक क्षैतिज रेखा बनाने का तरीका बताऊंगा।
वास्तव में, क्षैतिज रेखा बनाने की आवश्यकता अक्सर होती है, उदाहरण के लिए, जब आपको पाठ के एक हिस्से को दूसरे से अलग करने की आवश्यकता होती है।
सीएसएस के साथ क्षैतिज और ऊर्ध्वाधर लाइनें
यह सीएसएस का उपयोग करके किया जा सकता है। ऐसा करने के लिए, मैं div टैग का उपयोग करके ब्लॉक में पाठ के आवश्यक क्षेत्र को संलग्न करता हूं, और फिर style.css फ़ाइल में या सीधे html कोड में, हम इस ब्लॉक के लिए बॉर्डर-टॉप और बॉर्डर-बॉटम का उपयोग करके शीर्ष या नीचे की सीमा के लिए गुण लिखते हैं। यहाँ एक उदाहरण है:
इस मामले में, मैंने html कोड से सीधे सीएसएस के साथ स्टाइल सेट किया, और शीर्ष सीमा को एक ठोस रेखा और नीचे की तरफ एक धराशायी रेखा बना दिया।
यह पेज पर इस तरह दिखेगा:
सीएसएस का उपयोग करके क्षैतिज रेखा।
इस विधि के अपने फायदे हैं:
- सेटिंग्स की एक विस्तृत श्रृंखला जो आपको लगभग किसी भी प्रकार की लाइन सेट करने की अनुमति देती है;
- आप क्षैतिज और ऊर्ध्वाधर दोनों लाइनें बना सकते हैं। ऊर्ध्वाधर रेखाएं बनाने के लिए, आपको बॉर्डर-टॉप को बॉर्डर-लेफ्ट और बॉर्डर-बॉटम से बॉर्डर-राइट में बदलने की आवश्यकता है।
नुकसान में कोड की सापेक्ष थोकता शामिल है।
हालांकि, जैसा कि यह निकला, आप HTML का उपयोग करके पाठ में एक क्षैतिज रेखा भी डाल सकते हैं। इसी समय, सीएसएस में जाना भी आवश्यक नहीं है। ऐसा करने के लिए, टैग का उपयोग करें
.
HTML टैग का उपयोग करके क्षैतिज रेखा
इस टैग की पहली विशेषता यह है कि इसमें मिलान अंत टैग नहीं है। इसका उपयोग टैग के बीच html कोड में कहीं भी किया जा सकता है
तथा.इस टैग में निम्नलिखित विशेषताएं हैं:
- चौड़ाई - पिक्सेल या प्रतिशत में हमारी क्षैतिज रेखा की लंबाई निर्धारित करता है;
- रंग - लाइन रंग को परिभाषित करता है;
- संरेखित - लाइन के संरेखण को सेट करता है - दाएं, बाएं से - बाएं, केंद्र तक - केंद्र;
- आकार - पिक्सल में लाइन की चौड़ाई।
यहाँ एक उदाहरण HTML कोड है।
मूल रूप से, साइट के HTML पृष्ठों को सजाने के लिए क्षैतिज रेखाओं का उपयोग किया जाता है, जिससे उन्हें अधिक आकर्षक रूप दिया जाता है। लेकिन वे इसे पढ़ते समय पाठकों के लिए सुविधा को जोड़ते हुए, पड़ोसी वर्गों से भी जानकारी प्राप्त कर सकते हैं। सामान्य तौर पर, क्षैतिज रेखाएँ खींचें जहाँ आपको इसकी आवश्यकता है, बस इतना ही।
मैं एक क्षैतिज रेखा कैसे खींचूं?
HTML में क्षैतिज रेखाएँ खींचने के लिए एक विशेष टैग है
... इसके अलावा, वह है ब्लॉक टैग, अर्थात्, यह लाइन ब्रेक को पहले और बाद में बनाता है, इसलिए लाइन हमेशा एक अलग लाइन पर प्राप्त की जाती है। तदनुसार, यह केवल उन टैग के अंदर निर्दिष्ट किया जा सकता है जिनमें ब्लॉक तत्व शामिल हो सकते हैं, उदाहरण के लिए या
... लेकिन स्व
इसमें सामग्री नहीं हो सकती है, क्योंकि इसमें केवल एक अंतिम टैग नहीं है, अर्थात यह खाली है।HTML में क्षैतिज रेखाएँ खींचने का एक उदाहरण
क्षैतिज रेखाएँ खींचें
अनुच्छेद।
अनुच्छेद।
अनुच्छेद।
ब्राउज़र में परिणाम
अनुच्छेद।
अनुच्छेद।
अनुच्छेद।
जैसा कि आप देख सकते हैं, लाइनें बहुत पतली हैं, नॉन्डस्क्रिप्ट हैं और पूर्ण उपलब्ध चौड़ाई के लिए तैयार हैं, इसलिए अब हम सीखेंगे कि उन्हें और अधिक आकर्षक बनाने के लिए उन्हें कैसे बदलना है।
मैं क्षैतिज रेखाओं के रंग, मोटाई और चौड़ाई को कैसे बदलूं?
HTML के पुराने संस्करणों में, टैग
विशेष विशेषताएं थीं, जिनके साथ क्षैतिज रेखाओं के रंग, मोटाई और चौड़ाई को बदलना संभव था। ये क्रमशः रंग, आकार और चौड़ाई हैं। लेकिन नए संस्करणों में वे कैस्केडिंग स्टाइल शीट्स (सीएसएस) के पक्ष में खोदे गए हैं, इसलिए, आपने अनुमान लगाया, हम फिर से अपनी पसंदीदा शैली विशेषता का उपयोग करेंगे। सामान्य वाक्यविन्यास है:
शैली \u003d "पृष्ठभूमि: रंग"\u003e - लाइन रंग (या इसकी पृष्ठभूमि)।
शैली \u003d "ऊँचाई: आकार"\u003e - रेखा मोटाई।
शैली \u003d "चौड़ाई: आकार"\u003e - रेखा की चौड़ाई।
शैली \u003d "पृष्ठभूमि: रंग; ऊँचाई: आकार; चौड़ाई: आकार"> - लेकिन आप एक ही बार में सभी मापदंडों को निर्दिष्ट कर सकते हैं, बस अर्धविराम (;) के बारे में मत भूलना।एक रंग को अंग्रेजी में उसके नाम या रंग के HEX- कोड द्वारा निर्दिष्ट किया जा सकता है, जो हैश (#) से पहले होता है। ठीक है, आप पहले से ही इस सबक के बारे में जानते हैं पाठ और पृष्ठभूमि का रंग बदलना.
लेकिन हम अधिक विस्तार से आकार देने के बारे में बात करेंगे। क्या आपको याद है? फोंट बदलने पर ट्यूटोरियलसीएसएस में लगभग दस इकाइयाँ हैं, लेकिन रेखा की चौड़ाई केवल पिक्सल (px) और प्रतिशत (%), और में निर्दिष्ट किया जा सकता है मोटाई आम तौर पर केवल पिक्सेल में। यदि आप माप की अन्य इकाइयों की आपूर्ति करते हैं, तो यह एक त्रुटि नहीं होगी, लेकिन ब्राउज़र बस उन्हें अनदेखा करेंगे।
यदि आप पिक्सेल में आयाम निर्दिष्ट करते हैं, तो लाइन की मोटाई और चौड़ाई मॉनिटर के रिज़ॉल्यूशन पर निर्भर करेगी, जिस पर आपकी साइट देखी जाती है (स्क्रीन रिज़ॉल्यूशन जितना अधिक होता है, उतना ही पतला और संकीर्ण होता है)।
जैसा कि मैंने कहा, केवल प्रतिशत के रूप में लाइन की चौड़ाई निर्दिष्ट की जा सकती है। प्रतिशत आकार हमेशा पर निर्भर करता है और मूल कंटेनर तत्व के आकार के आधार पर गणना की जाती है जिसके अंदर टैग स्थित है
... इस मामले में, माता-पिता का आकार 100% के रूप में लिया जाता है। उदाहरण के लिए, यदि हम टैग लगाते हैं
शैली \u003d "चौड़ाई: 50%"\u003e तत्व के अंदर, फिर कोई फर्क नहीं पड़ता कि हम ब्राउज़र विंडो या मॉनिटर रिज़ॉल्यूशन का आकार कैसे बदलते हैं - लाइन की चौड़ाई हमेशा ब्लॉक की आधी चौड़ाई होगी.क्षैतिज रेखाओं के रंग, मोटाई और चौड़ाई को बदलने का एक उदाहरण।
क्षैतिज रेखाओं का रंग, मोटाई और चौड़ाई बदलें।
ब्राउज़र में परिणाम
क्षैतिज रेखाओं की स्थिति बदलना
जब आप एक क्षैतिज रेखा की चौड़ाई बदलते हैं, तो यह स्पष्ट रूप से दिखाई देता है कि ब्राउज़र हमेशा इसे केंद्र में रखते हैं। यदि आप इसकी स्थिति बदलना चाहते हैं, तो बस अंदर का उपयोग करें
निम्नलिखित मानों के साथ विशेषता संरेखित करें:
- केंद्र - लाइन केंद्रित है (डिफ़ॉल्ट मान)।
- बाएं - बाएं किनारे के खिलाफ दबाया जाता है।
- सही - दाहिने किनारे के खिलाफ दबाया।
क्षैतिज रेखाओं को संरेखित करने का एक उदाहरण।
क्षैतिज रेखाओं की स्थिति बदलें।
ब्राउज़र में परिणाम
मैं रेखा के चारों ओर की सीमा को कैसे निकालूं?
इस ट्यूटोरियल के पहले उदाहरण पर एक नज़र डालें। आपको क्या लगता है कि इन लाइनों में क्या रंग है? और यह गलत है। वे किसी भी पृष्ठ तत्वों की तरह पारदर्शी होते हैं, जिनमें पृष्ठभूमि का रंग नहीं होता है! मुझे विश्वास नहीं है? फिर एक उदाहरण देखें जहां हमने लाइनों का रंग बदल दिया है। पहले एक के लिए, हमने रंग निर्धारित नहीं किया, लेकिन केवल इसका आकार बढ़ाया और क्या यह रेखा पारदर्शी नहीं है? इसलिए कि!
अभी समझाता हूँ। डिफ़ॉल्ट रूप से, ब्राउज़र लाइनों के चारों ओर सीमाएं खींचते हैं, जो तीन आयामी प्रभाव पैदा करते हैं। इसलिए, जब हम क्षैतिज रेखाओं की मोटाई नहीं बढ़ाते हैं, तो ब्राउज़र हमें केवल ये फ़्रेम दिखाते हैं, क्योंकि लाइन की मोटाई 0px है।
रेखा के चारों ओर की सीमा को हटाने के लिए, जो अक्सर केवल उपस्थिति को खराब करती है, हम शैली की विशेषता को फिर से लागू करेंगे। और इसे इस तरह लिखा जाता है:
घर का पाठ।
- लेख, अनुभाग और उप-शीर्षक बनाएँ। उन सभी को केंद्र में रखें।
- हेडर के लिए एरियल और कूरियर के लिए पूरे पृष्ठ को सेट करें।
- पूरे पृष्ठ के लिए फ़ॉन्ट आकार डिफ़ॉल्ट ब्राउज़र आकार का 85% होना चाहिए। और शीर्षक में पृष्ठ पर फ़ॉन्ट आकार क्रमशः 145%, 125% और 110% है।
- पहली हेडिंग के नीचे एक पैराग्राफ, दूसरे के नीचे एक लंबा उद्धरण और तीसरे के नीचे एक कविता लिखें। और कविता को पृष्ठ पर केंद्रित होने दें।
- अपनी बोली में बोल्ड में तीन शब्दों को हाइलाइट करें।
- लेख के शीर्षक के तहत, पृष्ठ की पूरी चौड़ाई में तीन-पिक्सेल लाल क्षैतिज रेखा खींचें।
- कविता के ऊपर और नीचे, एक पिक्सेल काली रेखाएँ खींचें। शीर्ष पंक्ति की चौड़ाई कविता की चौड़ाई के बराबर होती है, और नीचे की रेखा आधी से अधिक होती है।
- लाइनों से अनावश्यक फ्रेम निकालें।
सभी पाठकों को नमस्कार। समय-समय पर, विज़ार्ड को HTML का उपयोग करके या सीएसएस का उपयोग करके एक क्षैतिज या ऊर्ध्वाधर रेखा बनाने की समस्या का सामना करना पड़ता है। यह मैं आज आपको बताऊंगा।
सीएसएस में लाइनें
लाइनें खींचने के कई तरीके हैं। ऐसा ही एक तरीका CSS का उपयोग कर रहा है। बॉर्डर की मदद से और अधिक सटीक। एक उदाहरण लेते हैं।
और यहाँ परिणाम क्या होगा।
सीएसएस का उपयोग करके क्षैतिज और ऊर्ध्वाधर रेखा।
CSS में बॉर्डर स्टेटमेंट का उपयोग करके लाइनें खींची जा सकती हैं। यदि आप बस एक निश्चित सीमा चौड़ाई के साथ एक आयत चाहते हैं, तो आप बस इस ऑपरेटर का उपयोग कर सकते हैं और इसके लिए एक मूल्य निर्धारित कर सकते हैं। उदाहरण के लिए सीमा: 5px ठोस # 000000; इसका मतलब होगा कि ब्लॉक की सीमाएं काले रंग में 5 पिक्सेल चौड़ी हैं।
हालांकि, यदि आपको सभी सीमाओं को निर्धारित करने की आवश्यकता नहीं है, लेकिन केवल कुछ, तो आपको यह लिखने की आवश्यकता है कि किन सीमाओं की आवश्यकता है, और उनमें से प्रत्येक का क्या मूल्य होगा। ये ऑपरेटर हैं:
- सीमा-शीर्ष - शीर्ष सीमा का मूल्य निर्धारित करता है
- बॉर्डर-बॉटम - बॉटम बॉर्डर का मान सेट करता है
- बॉर्डर-लेफ्ट - लेफ्ट बॉर्डर का मान सेट करता है
- बॉर्डर-राइट - सही बॉर्डर का मान सेट करता है।
HTML में लंबवत और क्षैतिज रेखा
आप HTML में भी लाइनें बना सकते हैं। ऐसा करने के लिए, आप hr टैग का उपयोग कर सकते हैं।
इस मामले में, एक क्षैतिज रेखा खींची जाएगी, एक पिक्सेल ऊँची और पूरी चौड़ाई।
लेकिन यह टैग, आप कुछ मान सेट कर सकते हैं।
- चौड़ाई - लाइन की चौड़ाई का मान सेट करता है।
- रंग - लाइन का रंग सेट करता है।
- संरेखित - बाईं, केंद्र, दाईं ओर संरेखण सेट करता है
- आकार - पिक्सल में लाइन की चौड़ाई निर्धारित करता है।
Hr टैग के साथ, आप एक वर्टिकल लाइन भी सेट कर सकते हैं। लेकिन इस मामले में, आपको फिर से शैलियों का सहारा लेना होगा।
इस स्थिति में, एक ऊर्ध्वाधर रेखा एक सौ पिक्सेल ऊँची, एक पिक्सेल मोटी, और इंडेंटेड पाँच पिक्सेल खींची जाएगी।
निष्कर्ष।
खैर, अब आप जानते हैं कि आप एक ऊर्ध्वाधर और क्षैतिज रेखा कैसे सेट कर सकते हैं। लाइनें HTML का उपयोग करके नियमित साइटों पर दोनों सेट की जा सकती हैं, और एक साइट पर सेट की जा सकती हैं जो उदाहरण के लिए, CMS का उपयोग करता है, वर्डप्रेस, लेकिन इस मामले में, आपको HTML मोड पर स्विच करना होगा।
खैर, अगर आपके कोई और प्रश्न हैं, तो उन्हें टिप्पणियों में पूछें।