टेक्स्ट इंडेंट प्रॉपर्टी और एडजेंटेंट सिब्लिंग सिलेक्टर का उपयोग करना
अच्छा वेब डिज़ाइन अक्सर अच्छी टाइपोग्राफी के बारे में होता है। चूंकि बहुत से वेब पेज की सामग्री टेक्स्ट के रूप में प्रस्तुत की जाती है, इसलिए उस पाठ को आकर्षक और प्रभावी दोनों बनाने के लिए एक वेब डिज़ाइनर के रूप में रखने के लिए एक महत्वपूर्ण कौशल है। दुर्भाग्यवश, हमारे पास टाइपोग्राफिक नियंत्रण का एक ही स्तर ऑनलाइन नहीं है जिसे हम प्रिंट में करते हैं। इसका मतलब यह है कि हम हमेशा वेबसाइट पर पाठ को स्टाइल नहीं कर सकते हैं उसी तरह हम मुद्रित टुकड़े में ऐसा कर सकते हैं।
एक सामान्य अनुच्छेद शैली जो आप अक्सर प्रिंट में देखते हैं (और जिसे हम ऑनलाइन पुन: बना सकते हैं) वह है जहां उस पैराग्राफ की पहली पंक्ति एक टैब स्पेस को इंडेंट किया गया है । यह पाठकों को यह देखने की अनुमति देता है कि एक पैराग्राफ कहां से शुरू होता है और दूसरा सिरा होता है।
आपको इस दृश्य शैली को वेब पेजों में उतना ही नहीं दिखता है क्योंकि डिफ़ॉल्ट रूप से ब्राउज़र, उनके नीचे की जगह के साथ पैराग्राफ प्रदर्शित करते हैं, यह दिखाने के लिए कि एक कहां समाप्त होता है और दूसरा शुरू होता है, लेकिन यदि आप उस पृष्ठ को प्रिंट करना चाहते हैं तो प्रिंट- अनुच्छेदों पर प्रेरित इंडेंट शैली, आप पाठ-इंडेंट शैली की संपत्ति के साथ ऐसा कर सकते हैं।
इस संपत्ति के लिए वाक्यविन्यास सरल है। यहां बताया गया है कि आप किसी दस्तावेज़ में सभी पैराग्राफ में टेक्स्ट-इंडेंट कैसे जोड़ेंगे।
पी {टेक्स्ट इंडेंट: 2em; }इंडेंट्स को कस्टमाइज़ करना
एक तरीका है कि आप इंडेंट के लिए बिल्कुल पैराग्राफ निर्दिष्ट कर सकते हैं, आप उन अनुच्छेदों में एक वर्ग जोड़ सकते हैं जिन्हें आप इंडेंट करना चाहते हैं, लेकिन इसके लिए आपको प्रत्येक पैराग्राफ को कक्षा जोड़ने के लिए संपादित करना आवश्यक है। यह अक्षम है और एचटीएमएल कोडिंग सर्वोत्तम प्रथाओं का पालन नहीं करता है।
इसके बजाए, आपको विचार करना चाहिए कि जब आप पैराग्राफ इंडेंट करते हैं। आप पैराग्राफ इंडेंट करते हैं जो सीधे किसी अन्य अनुच्छेद का पालन कर रहे हैं। ऐसा करने के लिए, आप आसन्न भाई चयनकर्ता का उपयोग कर सकते हैं। इस चयनकर्ता के साथ, आप प्रत्येक पैराग्राफ का चयन कर रहे हैं जो तुरंत किसी अन्य पैराग्राफ से पहले होता है।
पी + पी {टेक्स्ट इंडेंट: 2em; }चूंकि आप पहली पंक्ति को इंडेंट कर रहे हैं, इसलिए आपको यह भी सुनिश्चित करना चाहिए कि आपके अनुच्छेदों में उनके बीच कोई अतिरिक्त स्थान नहीं है (जो ब्राउज़र डिफ़ॉल्ट है)। स्टाइलिस्टिक रूप से, आपके पास पैराग्राफ के बीच की जगह होनी चाहिए या पहली पंक्ति इंडेंट करनी चाहिए, लेकिन दोनों नहीं।
पी {मार्जिन-तल: 0; पैडिंग-तल: 0; } पी + पी {मार्जिन-टॉप: 0; पैडिंग-टॉप: 0; }नकारात्मक इंडेंट्स
आप एक सामान्य इंडेक्स की तरह दाईं ओर विरोध के रूप में बाईं ओर जाने के लिए लाइन की शुरूआत के कारण नकारात्मक मूल्य के साथ टेक्स्ट-इंडेंट प्रॉपर्टी का भी उपयोग कर सकते हैं। यदि आप एक उद्धरण चिह्न के साथ शुरू होता है तो आप ऐसा कर सकते हैं ताकि उद्धरण चरित्र पैराग्राफ के बाईं ओर मामूली मार्जिन में दिखाई दे और अक्षरों को अभी भी एक अच्छा बायां संरेखण बना दिया जाए।
उदाहरण के लिए, कहें कि आपके पास एक अनुच्छेद है जो एक ब्लॉकक्वाट का वंशज है और आप इसे नकारात्मक रूप से इंडेंट करना चाहते हैं। आप यह सीएसएस लिख सकते हैं:
ब्लॉकक्वोट पी {टेक्स्ट इंडेंट: -.5em; }यह पैराग्राफ की शुरुआत देगा, जिसमें संभावित रूप से उद्घाटन उद्धरण चरित्र शामिल है, जिसे लटकने के लिए बाएं स्थानांतरित करने के लिए बाएं स्थानांतरित किया जाना है।
मार्जिन और पैडिंग के बारे में
वेब डिज़ाइन में अक्सर, आप तत्वों को स्थानांतरित करने और सफेद स्थान बनाने के लिए मार्जिन या पैडिंग मानों का उपयोग करते हैं। हालांकि, वे गुण इंडेंट किए गए अनुच्छेद प्रभाव को प्राप्त करने के लिए काम नहीं करेंगे। यदि आप इनमें से किसी भी मान को पैराग्राफ पर लागू करते हैं, तो प्रत्येक अनुच्छेद समेत उस पैराग्राफ का पूरा पाठ केवल पहली पंक्ति के बजाय स्थानांतरित किया जाएगा।