किसी वेबपृष्ठ लेआउट के बाईं ओर एक छवि को संरेखित करने के लिए सीएसएस का उपयोग करना
आज लगभग किसी भी वेब पेज को देखें और आप उन पृष्ठों के बड़े हिस्से को बनाने वाले टेक्स्ट और छवियों का संयोजन देखेंगे। किसी पृष्ठ पर टेक्स्ट और छवियों को जोड़ना बहुत आसान है। पाठ को मानक HTML टैग्स जैसे पैराग्राफ, सूचियां और शीर्षलेखों का उपयोग करके कोड किया गया है, जबकि छवियों को तत्व का उपयोग करके शामिल किया गया है ।
उस पाठ को बनाने की क्षमता और उन छवियों को अच्छी तरह से काम करने की क्षमता यह है कि महान वेब डिज़ाइनर अलग-अलग सेट करते हैं! आप सिर्फ अपने पाठ और छवियों को एक के बाद एक नहीं दिखाना चाहते हैं, इस प्रकार ये ब्लॉक-स्तर तत्व डिफ़ॉल्ट रूप से लेआउट करेंगे। नहीं, आप इस बात पर कुछ नियंत्रण चाहते हैं कि पाठ और छवियां एक साथ कैसे बहती हैं जो आखिर में आपकी वेबसाइट के दृश्य डिजाइन होगी।
एक पृष्ठ के बाईं ओर गठबंधन की गई छवि होने पर, उस पृष्ठ का पाठ इसके चारों ओर बहता है, मुद्रित डिज़ाइन के लिए और वेब पृष्ठों के लिए भी एक सामान्य डिज़ाइन उपचार है। वेब शब्दों में, यह प्रभाव छवि को फ़्लोट करने के रूप में जाना जाता है । यह शैली सीएसएस संपत्ति के साथ "फ्लोट" के लिए हासिल की जाती है। यह संपत्ति पाठ को बाईं ओर संरेखित छवि के चारों ओर बहने की अनुमति देती है। (या दाएं तरफ एक दाएं गठबंधन छवि के आसपास।) चलो इस दृश्य प्रभाव को प्राप्त करने के तरीके पर एक नज़र डालें।
एचटीएमएल के साथ शुरू करो
पहली चीज़ जो आपको करने की आवश्यकता होगी, उसके साथ काम करने के लिए कुछ HTML है। हमारे उदाहरण के लिए, हम पाठ का अनुच्छेद लिखेंगे और अनुच्छेद की शुरुआत में एक छवि जोड़ देंगे (पाठ से पहले, लेकिन उद्घाटन
टैग के बाद)। यहां बताया गया है कि HTML मार्कअप कैसा दिखता है:
डिफ़ॉल्ट रूप से, हमारा वेबपृष्ठ टेक्स्ट के ऊपर की छवि के साथ प्रदर्शित होगा। ऐसा इसलिए है क्योंकि छवियां HTML में ब्लॉक-स्तर तत्व हैं। इसका अर्थ यह है कि ब्राउज़र डिफ़ॉल्ट रूप से छवि तत्व से पहले और उसके बाद लाइन ब्रेक प्रदर्शित करता है। हम सीएसएस में बदलकर इस डिफ़ॉल्ट रूप को बदल देंगे। सबसे पहले, हालांकि, हम अपने छवि तत्व में कक्षा मूल्य जोड़ देंगे। वह वर्ग "हुक" के रूप में कार्य करेगा जिसे हम बाद में हमारे सीएसएस में उपयोग करेंगे।
ध्यान दें कि "बाएं" की इस वर्ग में कुछ भी नहीं है! हमारे इच्छित शैली को प्राप्त करने के लिए, हमें अगले सीएसएस का उपयोग करने की आवश्यकता है।
सीएसएस स्टाइल
हमारे एचटीएमएल के साथ, "बाएं" की हमारी श्रेणी विशेषता सहित, अब हम सीएसएस पर जा सकते हैं। हम अपनी स्टाइलशीट में एक नियम जोड़ देंगे जो उस छवि को तैरता है और उसके आगे एक छोटा सा पैडिंग भी जोड़ता है ताकि टेक्स्ट जो अंततः छवि के चारों ओर लपेटता है, उसके खिलाफ बहुत बारीकी से नहीं हो जाता है। यहां वह सीएसएस है जिसे आप लिख सकते हैं:
बाएं {फ्लोट: बाएं; पैडिंग: 0 20 पीएक्स 20 पीएक्स 0; }यह शैली बाईं ओर उस छवि को तैरती है और छवि के दाईं ओर और नीचे एक छोटी पैडिंग (कुछ सीएसएस शॉर्टेंड का उपयोग करके) जोड़ती है।
यदि आपने उस पृष्ठ की समीक्षा की है जिसमें ब्राउज़र में यह HTML शामिल है, तो छवि को अब बाईं ओर गठबंधन किया जाएगा और अनुच्छेद का पाठ दोनों के बीच एक उचित मात्रा के साथ दाईं ओर दिखाई देगा। ध्यान दें कि "बाएं" के वर्ग मान का उपयोग हम मनमाने ढंग से करते हैं। हम इसे कुछ भी कह सकते थे क्योंकि "बाएं" शब्द स्वयं कुछ भी नहीं करता है। इसमें HTML में क्लास एट्रिब्यूट होना आवश्यक है जो एक वास्तविक सीएसएस शैली के साथ काम करता है जो आपके द्वारा किए जा रहे दृश्य परिवर्तनों को निर्देशित करता है।
इन शैलियों को हासिल करने के वैकल्पिक तरीके
छवि तत्व को एक क्लास एट्रिब्यूट देने का एक तरीका और उसके बाद तत्व को तैरने वाली सामान्य सीएसएस शैली का उपयोग करना केवल एक ही तरीका है जिसे आप इस "बाएं गठबंधन छवि" को पूरा कर सकते हैं। आप छवि के क्लास वैल्यू को भी ले सकते हैं और इसे अधिक विशिष्ट चयनकर्ता लिखकर सीएसएस के साथ स्टाइल कर सकते हैं। उदाहरण के लिए, आइए एक उदाहरण देखें जहां वह छवि "मुख्य-सामग्री" के वर्ग मान वाले विभाजन के अंदर है।
इस छवि को स्टाइल करने के लिए, आप यह सीएसएस लिख सकते हैं:
। मुख्य सामग्री img {फ्लोट: बाएं; पैडिंग: 0 20 पीएक्स 20 पीएक्स 0; }इस Sceario में, हमारी छवि बाईं ओर गठबंधन किया जाएगा, पाठ के साथ पहले की तरह तैरते हुए, लेकिन हमें हमारे मार्कअप में अतिरिक्त कक्षा मूल्य जोड़ने की आवश्यकता नहीं थी। इसे स्केल करने से एक छोटी HTML फ़ाइल बनाने में मदद मिल सकती है, जो प्रबंधित करना आसान होगा और प्रदर्शन में सुधार करने में भी मदद कर सकता है।
अंत में, आप शैलियों को सीधे अपने एचटीएमएल मार्कअप में भी जोड़ सकते हैं, जैसे:
इस विधि को " इनलाइन शैलियों " कहा जाता है। यह सलाह नहीं दी जाती है क्योंकि यह स्पष्ट रूप से इसके संरचनात्मक मार्कअप के साथ तत्व की शैली को जोड़ती है। वेब सर्वोत्तम प्रथाओं का निर्देश है कि किसी पृष्ठ की शैली और संरचना अलग रहनी चाहिए। यह विशेष रूप से सहायक होता है जब आपके पृष्ठ को अपना लेआउट बदलने की आवश्यकता होती है और एक संवेदनशील वेबसाइट के साथ विभिन्न स्क्रीन आकार और उपकरणों की तलाश होती है। HTML में अंतर्निहित पृष्ठ की शैली होने से लेखक मीडिया प्रश्नों को और अधिक कठिन बना दिया जाएगा जो आपकी अलग-अलग स्क्रीन के लिए आवश्यकतानुसार आपकी साइट के रूप को समायोजित करेंगे।
जेनिफर क्रिनिन द्वारा मूल लेख। जेरेमी गिरार्ड द्वारा 4/3/17 को संपादित किया गया।