जावास्क्रिप्ट लाइन ऊंचाई

| | | | | | | | | | | | | | | | | | | | | | | | | |

सीएसएस लाइन-ऊंचाई गुण विभिन्न HTML तत्वों की लाइन ऊंचाई निर्धारित करता है। यह आमतौर पर पाठ की पंक्तियों के बीच की दूरी को परिभाषित करने के लिए प्रयोग किया जाता है। लाइन की ऊंचाई शब्दों की सहायता से सेट की जा सकती है - कुंजी, प्रतिशत या संख्यात्मक मान।

सीएसएस लाइन-ऊंचाई संपत्ति डेवलपर्स को वेब पेज पर दो इनलाइन तत्वों के बीच की जगह सेट करने की अनुमति देती है। वेब पेज पर टेक्स्ट की पंक्तियों के बीच की दूरी को बढ़ाने या घटाने के लिए डेवलपर्स अक्सर CSS लाइन-ऊंचाई प्रॉपर्टी का उपयोग करते हैं।

यह ट्यूटोरियल बताता है कि CSS लाइन-ऊंचाई प्रॉपर्टी का उपयोग कैसे करें। आपको आरंभ करने के लिए हम एक उदाहरण का उल्लेख करेंगे। जब तक आप इस ट्यूटोरियल को पढ़ना समाप्त कर लेंगे, तब तक आपको अपने कोड में लाइन-ऊंचाई प्रॉपर्टी का उपयोग करने की अच्छी समझ हो जाएगी।

लाइन-ऊंचाई सीएसएस

लाइन-ऊंचाई सीएसएस प्रॉपर्टी एक पंक्ति बॉक्स की ऊंचाई को परिभाषित करता है। रेखा क्षेत्र वे रेखाएँ हैं जो CSS क्षेत्र में एक बनाती हैं। इस पद्धति का उपयोग अक्सर टेक्स्ट की पंक्तियों के बीच की दूरी को परिभाषित करने के लिए किया जाता है।

लाइनों की ऊंचाई को समायोजित करने से आप वेब पेज पर टेक्स्ट की पंक्तियों (या अन्य तत्वों) के बीच की दूरी को परोक्ष रूप से समायोजित कर सकते हैं। यह माइक्रोसॉफ्ट वर्ड में डबल स्पेसिंग या 1.15 स्पेसिंग के साथ टेक्स्ट को फॉर्मेट करने के समान है।

लाइन-ऊंचाई CSS प्रॉपर्टी का सिंटैक्स इस प्रकार है:

"lineHeight" एक लंबाई मान को संदर्भित करता है जो किसी तत्व की ऊंचाई को परिभाषित करता है।

तीन प्रकार के मान आप लाइन-ऊंचाई संपत्ति के साथ उपयोग कर सकते हैं लंबाई, संख्या और प्रतिशत हैं:

वैकल्पिक रूप से, आप "सामान्य" कीवर्ड निर्दिष्ट कर सकते हैं। यह कीवर्ड डिफ़ॉल्ट ब्राउज़र के उपयोग को निर्दिष्ट करता है। उपयोगकर्ता द्वारा उपयोग किए जाने वाले ब्राउज़र के आधार पर यह मान आमतौर पर 1.2 के आसपास होता है।

यदि आप किसी बॉक्स में लाइन-ऊंचाई गुण लागू करते हैं, तो उस बॉक्स के सभी टेक्स्ट आपके द्वारा निर्दिष्ट .लाइन बॉक्स की ऊंचाई का उपयोग करेंगे।

पहुंच पर एक नोट

पंक्ति बदलना रिक्ति लाइन-ऊंचाई संपत्ति का एक सामान्य उपयोग है। ऐसा इसलिए है क्योंकि आप हमेशा यह सुनिश्चित करना चाहते हैं कि लाइनों के बीच पर्याप्त जगह है। अगर लाइनों के बीच पर्याप्त जगह नहीं है, तो पाठ को पढ़ना मुश्किल हो सकता है।

एक पाठ जिसे पढ़ना मुश्किल है, दृष्टिबाधित पर विशेष रूप से गंभीर प्रभाव पड़ता है। वेबसाइट बनाते समय पहुंच को हमेशा ध्यान में रखा जाना चाहिए।

किसी संख्या का उपयोग करते समय पंक्ति की ऊंचाई निर्धारित करने के लिए सीएसएस में तत्व, आपको चाहिए d 1.5 से कम के मानों का उपयोग न करें। ऐसा इसलिए है क्योंकि पंक्ति ऊंचाई मान ‚Äã‚Äã1.5 से कम आपकी साइट को दृष्टिबाधित पाठकों के उपयोग के लिए और अधिक कठिन बना सकते हैं।

पंक्ति ऊंचाई के लिए CSS उदाहरण

मान लें कि आप एक " हमारे बारे में एक स्थानीय कुकिंग क्लब वेबसाइट के लिए पेज। पेज में एक शीर्षक होता है जिसके बाद क्लब के विवरण का वर्णन करने वाले टेक्स्ट का एक पैराग्राफ होता है।

हम चाहते हैं कि हमारे टेक्स्ट को ठीक से स्थान दिया जाए। वेब पेज पर टेक्स्ट पैराग्राफ की लाइन की ऊंचाई 1.6 रेम पर सेट करें। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

हमारा कोड रिटर्न: क्लिक करें `रन उपरोक्त कोड संपादक में हमारे HTML / CSS कोड का आउटपुट देखने के लिए।

हमारी एचटीएमएल फाइल में, हमने

टैग का उपयोग करते हुए एक "हमारे बारे में" हेडर परिभाषित किया है। इसलिए हमने फैंटास्टिक शेफ्स का विवरण लिखा और इसे HTML में शामिल किया।

टैग .

हमारी सीएसएस फ़ाइल में, हमने एक नियम परिभाषित किया है। हमारा नियम दो सीएसएस गुणों का उपयोग करता है। हम पंक्ति की ऊंचाई 1.6rem और फ़ॉन्ट आकार पर सेट करते हैं सभी HTML

टैग के लिए 16px।

लाइन-ऊंचाई प्रॉपर्टी के साथ हमारे द्वारा उपयोग की जाने वाली माप की "रेम" इकाई मूल तत्व के फ़ॉन्ट आकार के सापेक्ष एक पंक्ति ऊंचाई को परिभाषित करती है। "रेम" का अर्थ है "रूट एलिमेंट"। इसलिए, क्योंकि हमारे फॉन्ट का आकार 16px था, टेक्स्ट के इस पैराग्राफ की लाइन की ऊंचाई 25.6px (16px * 1.6) थी।

उपरोक्त पैराग्राफ में टेक्स्ट अच्छी तरह से फैला हुआ है और नहीं ओवरलैप.

हम पिछले उदाहरण में अपने टैग के सभी टेक्स्ट के लिए लाइन की ऊंचाई को मानों ‚Äã‚Äãwe पर सेट कर देगा निर्दिष्ट है। इसका मतलब यह होगा कि हमारे शीर्षक और हमारा

टैग प्रभावित होगा।

निष्कर्ष

सीएसएस लाइन-ही ght संपत्ति एक लाइन बॉक्स की ऊंचाई को परिभाषित करता है। आमतौर पर, इस गुण का उपयोग किसी अनुच्छेद या शीर्षक में पाठ की पंक्तियों के बीच रिक्ति सेट करने के लिए किया जाता है। पंक्ति की ऊंचाई को सामान्य कीवर्ड, प्रतिशत, लंबाई या संख्यात्मक मान का उपयोग करके सेट किया जा सकता है।

इस ट्यूटोरियल में सीएसएस पंक्ति ऊंचाई संपत्ति की मूल बातें और आप इसे कोड में कैसे उपयोग कर सकते हैं, इस पर चर्चा की गई है। अब आपके पास एक विशेषज्ञ की तरह CSS लाइन-ऊंचाई संपत्ति का उपयोग शुरू करने का ज्ञान है!

क्या आप एक वेब डेवलपर बनना चाहते हैं? सर्वोत्तम शिक्षण संसाधनों और पाठ्यक्रमों पर विशेषज्ञ सलाह और युक्तियों के लिए हमारी CSS लर्निंग गाइड देखें।