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