HTML पैराग्राफ़ को फ़ॉर्मेट करना. संक्षिप्त सैद्धांतिक जानकारी लाइन स्पेसिंग

आइए देखें कि यह ब्राउज़र में कैसा दिखता है:

जैसा कि आप देख सकते हैं, हमने एक निश्चित ऊंचाई और चौड़ाई निर्धारित की है। यदि हम ऊंचाई को टेक्स्ट में फिट होने से छोटी निर्धारित करते हैं, तो टेक्स्ट ब्लॉक से आगे बढ़ जाएगा। ऊंचाई और चौड़ाई के साथ प्रयोग करें. सबसे पहले आंखों से पिक्सल में आवश्यक आकार निर्धारित करना मुश्किल होगा, लेकिन समय के साथ आपको इसकी आदत हो जाएगी।

यह एक छोटा और सरल पाठ है. स्वयं ब्लॉक का आकार बदलने का प्रयास करें और देखें कि क्या होता है। अभ्यास ही सबसे अधिक है तेज तरीकाकुछ सीखो!

HTML दस्तावेज़ों के मामले में, टैग सामग्री को चिह्नित करने के बजाय यह इंगित करने के लिए अधिक काम करते हैं कि इसे कैसे प्रस्तुत किया जाना चाहिए। शैलियों के साथ प्रस्तुति पर अधिक नियंत्रण प्राप्त किया जाता है। इस लेख में मैं उन शैलियों को देखूंगा जो HTML में पैराग्राफ़ फ़ॉर्मेटिंग से जुड़ी हैं।

टैग

HTML में, आप पैराग्राफ निर्दिष्ट कर सकते हैं, और संरेखण विशेषता उन्हें बाएँ, दाएँ, केंद्र या उचित रूप से संरेखित करती है। उनके अतिरिक्त, हम वैश्विक शैली विशेषता का उपयोग करेंगे।

अनुच्छेद संरेखण

आप निम्नलिखित मानों के साथ संरेखण विशेषता का उपयोग करके एक पैराग्राफ को संरेखित कर सकते हैं:

पाठ-संरेखण: बाएँ|दाएँ|केंद्र|औचित्य|प्रारंभिक|विरासत;

निम्नलिखित कोड को अपनी .html फ़ाइल में कॉपी करें।

यह पैराग्राफ़ मध्य संरेखित है

यह अनुच्छेद दाएँ संरेखित है

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

ब्राउज़र विंडो में, पैराग्राफ के लिए HTML कोड इस तरह दिखता है:

पंक्ति रिक्ति

आप style=line-height का उपयोग करके अनुच्छेद पंक्ति रिक्ति को नियंत्रित कर सकते हैं। निम्नलिखित मानों के साथ शैली विशेषता का उपयोग करें:

पंक्ति-ऊंचाई: सामान्य|संख्या|लंबाई|प्रारंभिक|विरासत;

नीचे HTML कोड का एक उदाहरण दिया गया है जो विभिन्न पंक्ति रिक्ति वाले पैराग्राफ प्रदर्शित करता है:

यह अनुच्छेद शैली विशेषता के लिए दो मानों का उपयोग करता है। पहली पंक्ति-ऊंचाई:1.5 पैराग्राफ के लिए डेढ़ लाइन रिक्ति निर्दिष्ट करती है, और दूसरी मान टेक्स्ट-एलाइन:जस्टिफाई निर्दिष्ट करती है कि पैराग्राफ टेक्स्ट पूरी चौड़ाई में फैला होना चाहिए।

यह अनुच्छेद दोहरे स्थान वाला और न्यायसंगत है। लाइन-ऊंचाई:2 दोहरी रिक्ति निर्दिष्ट करती है। शैली विशेषता में दो मान होना आवश्यक नहीं है। लेकिन यदि आपको दो मान निर्दिष्ट करने की आवश्यकता है, तो आप उन्हें अर्धविराम से अलग करके ऐसा कर सकते हैं।

शैली विशेषता के लिए लाइन-ऊंचाई मान का उपयोग करने के कुछ अलग तरीके यहां दिए गए हैं:

: पंक्ति रिक्ति को 13 पिक्सेल पर सेट करता है;

: वर्तमान फ़ॉन्ट आकार के सापेक्ष पैराग्राफों के बीच HTML रिक्ति को 200% पर सेट करता है;

: लाइन की ऊंचाई 14 पिक्सेल पर सेट करता है।

इंडेंटेशन

इसे समझना आसान बनाने के लिए मैंने "इंडेंट" शब्द का उपयोग किया। लेकिन HTML में, हम किसी ऑब्जेक्ट के चारों ओर खाली जगह बनाने के लिए स्पेसिंग का उपयोग करते हैं। आप किसी पैराग्राफ को बाईं या दाईं ओर इंडेंट करने के लिए पैडिंग मान के साथ स्टाइल विशेषता का उपयोग कर सकते हैं।

नीचे बाएँ और दाएँ इंडेंटेशन वाले अनुच्छेदों का एक उदाहरण दिया गया है:

यह अनुच्छेद इंडेंटेड नहीं है, यह बस उचित है। इस अनुच्छेद के लिए P तत्व की शैली विशेषता को देखें।

इस अनुच्छेद के लिए, मैंने पैडिंग-लेफ्ट:30px शैली का उपयोग करके बाईं पैडिंग को 30 px पर सेट किया है। इस अनुच्छेद को टेक्स्ट-एलाइन:जस्टिफ़ाई शैली का उपयोग करके भी उचित ठहराया गया है। जैसा कि आप पहले से ही जानते हैं, हम स्टाइल विशेषता के लिए एकाधिक मानों को अर्धविराम से अलग करके उपयोग कर सकते हैं।

और इस पैराग्राफ में 30 पिक्सेल का दायां इंडेंटेशन है, लेकिन बायां इंडेंटेशन नहीं है। इसे चौड़ाई के अनुरूप भी बनाया गया है। शैली विशेषता का 'पैडिंग-राइट' मान सही पैडिंग निर्दिष्ट करता है। यदि आपको प्रभाव दिखाई नहीं देता है, तो अपनी ब्राउज़र विंडो की चौड़ाई कम करें ताकि उचित HTML पैराग्राफ ठीक से प्रदर्शित हो।

अनुच्छेदों के बीच इंडेंटेशन (पैराग्राफ के पहले इंडेंटेशन और पैराग्राफ के बाद इंडेंटेशन)

HTML या CSS में हमें इसकी आवश्यकता नहीं है. हम केवल तत्व के लिए पैडिंग शैली निर्दिष्ट कर सकते हैं

पैडिंग-टॉप और पैडिंग-बॉटम पैराग्राफ के पहले और बाद में सफेद स्थान निर्दिष्ट करते हैं, जो ऊपर या नीचे पैडिंग की तरह कार्य करता है। नीचे टैग उदाहरण देखें

मैंने पहली बार स्थापित किया HTML अनुच्छेददूसरे पैराग्राफ से पहले 10 पिक्सेल और दूसरे पैराग्राफ के बाद 50 पिक्सेल इंडेंट करें:

इस अनुच्छेद में पहले या बाद का कोई इंडेंटेशन निर्दिष्ट नहीं है। यह एक नियमित अनुच्छेद है, उचित है। जैसा कि आप पहले से ही जानते हैं, हम टैग के अंदर कोड शैली = "टेक्स्ट-एलाइन: जस्टिफाई" का उपयोग करके एक पैराग्राफ को उचित ठहरा सकते हैं।

यह अनुच्छेद बड़ा है. इसमें पैराग्राफ से पहले 10 पिक्सल और उसके बाद 50 पिक्सल की पैडिंग भी है। टैग के अंदर मैंने 3 शैलियाँ निर्धारित की हैं।

यह एक नियमित पैराग्राफ है जिसमें कोई इंडेंट और डिफ़ॉल्ट संरेखण नहीं है।

याद रखने वाली चीज़ें

• एक HTML पैराग्राफ को संरेखण विशेषता या टेक्स्ट-संरेखण शैली का उपयोग करके संरेखित किया जा सकता है;
• HTML को स्क्रीन आकार, ब्राउज़र विंडो आकार के आधार पर अलग-अलग तरीके से प्रस्तुत किया जाएगा;
• अतिरिक्त स्थान जोड़ना या खाली पंक्तियाँ HTML कोड आउटपुट को प्रभावित नहीं करता है. ब्राउज़र सभी अतिरिक्त स्थान हटा देता है;
• टैग परिभाषित करते हैं कि क्या प्रदर्शित किया जाना चाहिए, और शैलियाँ परिभाषित करती हैं कि इसे कैसे प्रदर्शित किया जाना चाहिए;
• शैलियों को तीन में निर्दिष्ट किया जा सकता है विभिन्न तरीके- अंतर्निर्मित (टैग के भीतर), आंतरिक ( तत्व का उपयोग करके उसी HTML फ़ाइल के अंदर
  लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेट्यूअर एडिपिसिंग एलीट, सेड डायम नॉनमी निभ यूइस्मोड टिनसीडंट यूटी लैक्रिट डोलोर मैग्ना एलिगुआम एराट वोलुटपैट।
  
  
  

  इस उदाहरण का परिणाम चित्र में दिखाया गया है। 1.

  चावल। 1. ऊंचाई गुण लागू करना

  ऑब्जेक्ट मॉडल

  document.getElementById("elementID").style.height

  ब्राउज़र्स

  ब्राउज़र इंटरनेट एक्सप्लोरर 6 ऊंचाई को गलत तरीके से न्यूनतम-ऊंचाई के रूप में परिभाषित करता है।

  क्विर्क मोड में, 8.0 तक और इसमें शामिल इंटरनेट एक्सप्लोरर संस्करण किसी तत्व की ऊंचाई की गलत गणना करते हैं, बिना उसमें पैडिंग, मार्जिन या बॉर्डर मान जोड़े।

  7.0 तक और इसमें शामिल इंटरनेट एक्सप्लोरर संस्करण इनहेरिट मान का समर्थन नहीं करते हैं।

  यह लंबा ट्यूटोरियल लेख इसी पर केंद्रित होगा महत्वपूर्ण विषय, जिसका कार्य ब्लॉक तत्वों के साथ काम करने के तरीकों को सुलझाना है, पाठक को समझाना है कि तत्वों की चौड़ाई और ऊंचाई की गणना के लिए मॉडल को बदलने का उपयोग क्यों किया जाता है, ब्लॉक तत्वों के अतिप्रवाह को कैसे प्रबंधित किया जाए, और कैसे काम किया जाए तत्वों का न्यूनतम और अधिकतम आकार।

  सीएसएस बॉक्स मॉडल के बारे में सीखते समय, हमने सीखा कि चौड़ाई और ऊंचाई गुण तत्व के आंतरिक क्षेत्र की चौड़ाई और ऊंचाई निर्धारित करते हैं ( इच्छुक क्षेत्र), जिसमें पाठ, चित्र और अन्य तत्व शामिल हो सकते हैं।

  सीएसएस बॉक्स मॉडल में, आपके द्वारा एक तत्व को दी गई चौड़ाई और ऊंचाई मान और ब्राउज़र द्वारा इसे प्रदर्शित करने के लिए आरक्षित स्थान की मात्रा के बीच अंतर होता है। तत्वों की कुल चौड़ाई और ऊंचाई ब्राउज़र विंडो के क्षेत्र का प्रतिनिधित्व करती है जिसमें पैडिंग, सीमाओं और उनके लिए निर्दिष्ट कस्टम मानों की चौड़ाई और ऊंचाई शामिल होती है।

  तत्व की कुल चौड़ाई की गणना सूत्र का उपयोग करके की जाती है:

  डिव(चौड़ाई: 150px; /*तत्व की चौड़ाई निर्धारित करें*/ऊँचाई: 150px; /*तत्व की ऊंचाई निर्धारित करें*/पैडिंग: 10px; /* तत्व की आंतरिक पैडिंग सेट करें */बॉर्डर: 5px; /* तत्व की सीमाएँ निर्धारित करें */ }

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

  तत्वों की चौड़ाई और ऊंचाई की गणना के लिए इस मॉडल को पूरी तरह से समझने के लिए, आइए निम्नलिखित उदाहरण के साथ अपने ज्ञान को समेकित करें:

  सामग्री बॉक्स
  क्लास = "टेस्ट2" >बॉर्डर-बॉक्स
  
  
  

  सामग्री-बॉक्स संपत्ति का मान डिफ़ॉल्ट मान है और शास्त्रीय योजना के अनुसार तत्व की कुल चौड़ाई और ऊंचाई की गणना करता है। उदाहरण के रूप में चौड़ाई का उपयोग करना:

  150px (कस्टम चौड़ाई) + 10px (बाएं पैडिंग) + 10px (दाएं पैडिंग) + 10px (बाएं बॉर्डर) + 10px (दाएं बॉर्डर) = 190px।

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

  हमारे उदाहरण का परिणाम:

  ब्लॉक तत्व अतिप्रवाह को नियंत्रित करना

  लेआउट प्रक्रिया के दौरान, आपको ऐसी स्थितियों का सामना करना पड़ेगा जहां किसी तत्व की सामग्री तत्व की सीमाओं के बाहर प्रदर्शित की जाएगी। डिफ़ॉल्ट रूप से, ब्राउज़र इस सामग्री को प्रदर्शित करता है (तत्व अतिप्रवाह प्रस्तुत किया जाता है), जो कुछ मामलों में दृश्य त्रुटियों की ओर ले जाता है। इस ब्राउज़र व्यवहार के लिए ओवरफ़्लो CSS प्रॉपर्टी ज़िम्मेदार है। आइए इसके संभावित मूल्यों पर विचार करें:

  आइए निम्नलिखित उदाहरण देखें:

  अतिप्रवाह: दृश्यमान

  क्लास = "टेस्ट2" >

  ओवर फलो हिडेन

  इन नरम फ़्रेंच रोल्स को कुछ और खाएँ और थोड़ी चाय पिएँ।
  क्लास = "टेस्ट3" >

  अतिप्रवाह: स्क्रॉल करें

  इन नरम फ़्रेंच रोल्स को कुछ और खाएँ और थोड़ी चाय पिएँ।
  क्लास = "टेस्ट4" >

  अतिप्रवाह: ऑटो

  इन नरम फ़्रेंच रोल्स को कुछ और खाएँ और थोड़ी चाय पिएँ।
  
  
  

  इस उदाहरण में हमने रखा है चारनिश्चित चौड़ाई और ऊंचाई का ब्लॉक, जिसके लिए अलग-अलग सीएसएस मानअतिप्रवाह गुण:

  • प्रथम खण(दृश्य मान) - सामग्री तत्व की सीमाओं से परे फैली हुई है (डिफ़ॉल्ट मान)।
  • दूसरा ब्लॉक(मूल्य छिपा हुआ) - तत्व को ओवरफ्लो करने वाली सामग्री को काट दिया जाता है।
  • तीसरा ब्लॉक(स्क्रॉल वैल्यू) - ओवरफ़्लो को ट्रिम करता है लेकिन एक स्क्रॉलबार जोड़ता है।
  • चौथा खंड(ऑटो वैल्यू) - स्क्रॉल वैल्यू की तरह, यदि ब्लॉक एक निश्चित अक्ष के साथ ओवरफ्लो होता है तो केवल एक स्क्रॉल बार स्वचालित रूप से जोड़ा जाएगा ( एक्स- क्षैतिज, या य- लंबवत) और पृष्ठ पर स्थायी रूप से प्रदर्शित नहीं होता है।

  हमारे उदाहरण का परिणाम.