CSS एक कैस्केडिंग स्टाइल शीट है, जो वेब पेजों की उपस्थिति का वर्णन करने के लिए एक भाषा है। CSS के मुख्य लाभों में से एक टेबल लेआउट को ब्लॉक लेआउट से बदलने की क्षमता है।
यह आवश्यक है
एचटीएमएल कोड संपादक
अनुदेश
चरण 1
पहला ब्लॉक बनाएं। एचटीएमएल फॉर्म में, यह आईडी 'ब्लॉक01' के साथ एक div टैग की तरह दिखेगा। यहां, ब्लॉक01 पहचानकर्ता इंगित करता है कि सीएसएस विवरण में, इस ब्लॉक के सभी गुण # ब्लॉक01 चयनकर्ता के लिए निर्दिष्ट हैं।
चरण दो
CSS में ब्लॉक का वर्णन करें। CSS शैलियों में, पहचानकर्ता का नाम निर्दिष्ट करें (# block01) और घुंघराले ब्रेसिज़ में इसके मापदंडों का वर्णन करें - चौड़ाई, स्थिति, ऑफसेट, पृष्ठभूमि का रंग, आदि। उदाहरण के लिए, यह इस तरह दिख सकता है: # ब्लॉक01 {चौड़ाई: 150px; ऊंचाई: 150 पीएक्स; स्थिति: निरपेक्ष; शीर्ष: 0px; बाएं: 0px; पृष्ठभूमि-रंग: गुलाबी}। यह विवरण मानता है कि बॉक्स 150 पिक्सेल लंबा और 150 पिक्सेल चौड़ा होगा, इसे दस्तावेज़ के ऊपरी बाएँ कोने में सख्ती से रखा जाएगा, और इसकी पृष्ठभूमि गुलाबी रंग की होगी।
चरण 3
ब्लॉक को एक सापेक्ष स्थिति दें। यदि आप सीएसएस विवरण में पूर्ण नहीं, बल्कि सापेक्ष स्थिति का उपयोग करते हैं, तो आप निर्देशांक के ग्रिड में कठोर स्नैपिंग के साथ ब्लॉक नहीं रख सकते हैं, लेकिन पहले से मौजूद अन्य ब्लॉकों के सापेक्ष। ऐसा करने के लिए, कोड स्थिति बदलें: निरपेक्ष; शीर्ष: 0px; बायां: 0px स्थिति के अनुसार: सापेक्ष; शीर्ष: 200px; बाएं: 100 पीएक्स।
चरण 4
ब्लॉक को एक गोलाई दें। CSS में इसके लिए border-radius Statement जिम्मेदार है। अपनी स्टाइलशीट में निम्न कोड जोड़ें: सीमा-त्रिज्या: 8px। ब्लॉक में अब गोल कोने होंगे। यदि आप केवल कुछ कोनों को गोल करना चाहते हैं, तो उनमें से प्रत्येक के लिए अलग-अलग त्रिज्या का वर्णन करें: सीमा-त्रिज्या: 8px 8px 0px 0px।
चरण 5
ब्लॉक को एक स्ट्रोक दें। एक पतली रेखा के साथ एक ब्लॉक की रूपरेखा को उजागर करने के लिए, इसके सीएसएस विवरण में निम्नलिखित कोड जोड़ें: सीमा-शीर्ष: 1 पीएक्स डैश काला इस निर्देश का मतलब है कि ब्लॉक की सीमा काली होगी और मोटाई में एक पिक्सेल होगी। इस मामले में, समोच्च रेखा स्वयं एक धराशायी रेखा (धराशायी - एक बिंदीदार रेखा, बिंदीदार - बिंदु, ठोस - एक ठोस रेखा) के रूप में प्रदर्शित की जाएगी।
चरण 6
शेष ब्लॉक गुण सेट करें। CSS विवरण में निर्दिष्ट करें कि ब्लॉक के अंदर टेक्स्ट के लिए किस टाइपफेस का उपयोग किया जाना चाहिए, ब्लॉक के किनारों से फ़ॉन्ट आकार, संरेखण और इंडेंटेशन क्या होना चाहिए। इन गुणों का वर्णन फ़ॉन्ट-परिवार, फ़ॉन्ट-आकार, पाठ-संरेखण और पैडिंग की परिभाषाओं में किया गया है।
चरण 7
आप एक ब्लॉक के प्रवाह को दूसरे पर अनुकूलित करने के लिए फ्लोट प्रॉपर्टी का उपयोग कर सकते हैं। यदि आप इसे "बाएं" पर सेट करते हैं, तो शेष तत्व बाईं ओर ब्लॉक के चारों ओर प्रवाहित होंगे, और "दाएं" - दाईं ओर। यदि आप फ्लोट मान को "कोई नहीं" के रूप में सेट करते हैं, तो ब्लॉक संरेखण सेट नहीं किया जाएगा। सीएसएस में स्पष्ट संपत्ति ब्लॉक को दाएं, बाएं या दोनों तरफ बहने से रोकती है, और फ्लोट स्टेटमेंट को ओवरराइड करती है।
