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