सीएसएस में विभिन्न सीमाओं को कैसे लागू करें?

HTML पृष्ठों में सीमाओं का उपयोग सामग्री के सीमांकन और हाइलाइट करने के लिए किया जाता है। जब किसी पृष्ठ पर बहुत सारी जानकारी होती है और आप उपयोगकर्ता का ध्यान विशिष्ट भागों की ओर आकर्षित करना चाहते हैं, तो उस सामग्री के चारों ओर सीमाओं का उपयोग करें। सीएसएस में सीमाओं पर इस लेख में मैं निम्नलिखित विषयों पर चर्चा करूंगा:

• बॉर्डर का उपयोग कब करें
• CSS में बॉर्डर
• सीएसएस बॉर्डर के गुण
• सीमा गुण के लिए डिफ़ॉल्ट मान
• आशुलिपि में सीमाओं को परिभाषित करें
• सीएसएस में डिजाइनिंग बॉर्डर्स को ध्यान में रखने के लिए अंक

बॉर्डर का उपयोग कब करें

मानक अभ्यास के लिए HTML पृष्ठों में सीमाओं को परिभाषित करने के लिए CSS बॉर्डर टैग का उपयोग करना है:

• महत्वपूर्ण शीर्षकों के आसपास
• पोस्टस्क्रिप्ट या महत्वपूर्ण नोट्स को उजागर करने के लिए
• चित्रों, चित्रों, लोगों के उद्धरण, वीडियो संलग्न करने के लिए
• मूल्य निर्धारण, समयसीमा या इस तरह की महत्वपूर्ण जानकारी पर ध्यान आकर्षित करने के लिए

तुम पर पढ़ने के लिए चाहते हो सकता है सीएसएस सीमाओं के बारे में सीखने से पहले।

एक व्यापक सीएसएस ट्यूटोरियल के लिए, पर जाएँ शुरुआती के लिए एडुर्का सीएसएस ट्यूटोरियल । HTML वेब डिज़ाइन को बढ़ाने के लिए CSS का उपयोग करने के तरीके पर आपको एक उत्कृष्ट हेड-अप मिलेगा।

CSS में बॉर्डर

CSS बॉर्डर को HTML पेज के विभिन्न अनुभागों में सौंपा जा सकता है, चाहे वह शीर्षकों या पैराग्राफों को संलग्न करना हो। एक उदाहरण से शुरू करते हैं। यहां हम हेडिंग के चारों ओर एक सीमा और पैराग्राफ टेक्स्ट के चारों ओर एक और सीमा निर्धारित करते हैं।

शुरुआती के लिए वसंत पीवीसी ट्यूटोरियल

शरीर {पृष्ठभूमि-रंग: lightblue} h1 {पाठ-संरेखण: केंद्र सीमा-शैली: ठोस} p {फ़ॉन्ट-परिवार: verdana फ़ॉन्ट-आकार: 20px सीमा-शैली: बिंदीदार}
पैराग्राफ के चारों ओर भी सीमा!
 

सीएसएस बॉर्डर के गुण

CSS बॉर्डर में 3 प्रमुख विशेषताएं हैं

• अंदाज:दअंदाजविशेषता सीमा के पैटर्न को परिभाषित करती है।
• रंग: सीएसएस रंगों द्वारा निर्धारित सेट से रंग कोई भी हो सकता है।
• चौड़ाई: चौड़ाई का उपयोग सीमा की मोटाई को अलग करने के लिए किया जाता है, ताकि इसे अधिक प्रमुख बनाया जा सके।

उपरोक्त उदाहरण में, हमने देखा कि केवल एक सीमा विशेषता को परिभाषित किया गया है, वह है इसकी शैली। परिभाषित नहीं होने पर अन्य विशेषताएँ डिफ़ॉल्ट मानों पर ले जाती हैं। त्रिज्या नामक एक और विशेषता है, जिसका कम बार उपयोग किया जाता है। इसका उपयोग सीमा के किनारों को गोल करने के लिए किया जाता है।

• झालर की शैली विशेषता

आप देखेंगे कि एक ’नो बॉर्डर’ और ’हिडन बॉर्डर’ विकल्प भी है। एक डेवलपर केवल एक सीमा को परिभाषित करने से बच सकता है, इसे स्पष्ट रूप से 'छिपी सीमा' के रूप में क्यों परिभाषित करता है? यह पृष्ठ में अन्य तत्वों के साथ अंतरिक्ष उपयोग और संरेखण प्रयोजनों के लिए किया जाता है।

सीमा शैलियों को एक तत्व के भीतर भी मिलाया जा सकता है। इस प्रयोजन के लिए, 4 व्यक्तिगत सीमा पक्षों को अलग-अलग शैलियों के साथ अलग-अलग परिभाषित किया जा सकता है। इसे 2 तरीकों से किया जा सकता है। या तो सभी 4 पक्षों को एक टैग में परिभाषित करें। इस मामले में, गिनती शीर्ष रेखा से शुरू होती है और फिर दक्षिणावर्त चलती है। वैकल्पिक रूप से, प्रत्येक 4 बॉर्डरलाइन को व्यक्तिगत टैग में भी परिभाषित किया जा सकता है। दोनों मामलों को अगले उदाहरण में दिखाया गया है।

• किनारे का रंग विशेषता

सीमा के लिए रंग विशेषता को कई तरीकों से सेट किया जा सकता है। यह अन्य तत्वों के लिए रंग सेट करने के समान है। रंग निम्नलिखित विधियों में से एक द्वारा निर्धारित किया जा सकता है:

• नाम - 'नीला' जैसे रंग का नाम निर्दिष्ट करें। तुम भी 'BlanchedAlmond' जैसे कुछ फैंसी रंग विकल्पों की कोशिश कर सकते हैं!
• हेक्स - हेक्स मान निर्दिष्ट करें, जैसे '# ff0000'
• आरजीबी - RGB कोड सेट करें। उदाहरण के लिए, आरजीबी (255,255,0) का अर्थ है पीला।
• स्थापना - जैसे 'पारदर्शी' या 'अपारदर्शी'

• सीमा चौड़ाई विशेषता:

चौड़ाई गुण, जैसा कि नाम से पता चलता है, 4 सीमा पक्षों की मोटाई को परिभाषित करता है। यदि एक मान परिभाषित किया गया है, तो यह सभी पक्षों के लिए है, अन्यथा व्यक्तिगत चौड़ाई मान भी सेट किए जा सकते हैं।

चौड़ाई को किसी भी मानक इकाई जैसे पिक्सेल (’px’), अंक (’pt’) या सेंटीमीटर (’cm’) में निर्दिष्ट किया जा सकता है। आप, मोटी ’, and पतले’ और ’मध्यम’ के पूर्व-परिभाषित मूल्यों का उपयोग करके चौड़ाई भी निर्दिष्ट कर सकते हैं।

• सीमा-त्रिज्या विशेषता

त्रिज्या को परिभाषित करने का उद्देश्य सीमा के लिए गोल कोनों को प्राप्त करना है। त्रिज्या कारक गोलाई की सीमा को परिभाषित करता है। मूल्य से बड़ा, अधिक घुमावदार कोने बन जाते हैं। एक मानक अभ्यास के रूप में, त्रिज्या मान सीमा चौड़ाई के 1-3 गुना के बीच रखा जाता है।

गोटो बयान सी ++

निम्नलिखित कोड उत्पन्न होगा:

बॉर्डर-चौड़ाई: 10px
सीमा-त्रिज्या: 30 पीएक्स

सीमा गुण के लिए डिफ़ॉल्ट मान

• एकमात्र अनिवार्य विशेषता है अंदाज । यदि शैली गायब है, तो सीमा दिखाई नहीं देगी।

• यदि रंग निर्दिष्ट नहीं है, तो अंतर्निहित तत्व से रंग को डिफ़ॉल्ट मान के रूप में लिया जाता है। उदाहरण के लिए, यदि पैराग्राफ के टेक्स्ट रंग को 'ब्लू' के रूप में परिभाषित किया गया है, तो डिफ़ॉल्ट बॉर्डर-कलर भी नीला होगा। यदि तत्व के लिए भी कोई रंग परिभाषा नहीं है, तो डिफ़ॉल्ट रंग 'काला' है।

• चौड़ाई के लिए डिफ़ॉल्ट मान 'मध्यम' है।

आशुलिपि में सीमाओं को परिभाषित करें

कुछ डेवलपर्स एक संक्षिप्त एक-लाइन टैग में सीमा विशेषताओं को परिभाषित करना पसंद करते हैं। यह शॉर्टहैंड प्रारूप कोड की लाइनों को कम करने में मदद करता है और विशेषज्ञ डेवलपर्स इस प्रारूप को पसंद करते हैं। बॉर्डर परिभाषा सरल और काफी मानकीकृत होने पर शॉर्टहैंड प्रारूप का उपयोग करने की सिफारिश की जाती है। हालांकि, यदि आपको सीमा के प्रत्येक पक्ष को एक अलग शैली में हाइलाइट करने की आवश्यकता है, तो आपको व्यक्तिगत टैग को परिभाषित करने के प्रारूप से चिपके रहने की आवश्यकता है।

निम्नलिखित कोड का उपयोग किया जाता है:

सीमा-शैली: धराशायी
सीमा-रंग: हरा
बॉर्डर-चौड़ाई: 5 पीएक्स
बॉर्डर: धराशायी हरे 5px

सीएसएस में डिजाइनिंग बॉर्डर्स को ध्यान में रखने के लिए अंक

• एक पृष्ठ में बहुत अधिक सीमाओं का उपयोग न करें, यह विचलित करने वाला हो सकता है और उपयोगकर्ता के लिए ध्यान केंद्रित करना मुश्किल बना सकता है।

  जावा के लिए ग्रहण की स्थापना की

• सीमा शैली और रंगों में स्थिरता बनाए रखना महत्वपूर्ण है। एक पृष्ठ में समान स्तर के पदानुक्रम के तत्वों में एक समान सीमा शैली और एकरूपता के लिए चौड़ाई होनी चाहिए। उदाहरण के लिए, यदि पैराग्राफ ठोस सीमा और 5px चौड़ाई के साथ परिभाषित किया गया है, इस प्रारूप को अन्य में बनाए रखें पैराग्राफ वेब साइट डिजाइन के दौरान तत्व।

• टैग परिभाषाओं की एक शैली से चिपके रहें। कुछ डेवलपर्स एक ही को सौंपे गए सभी मूल्यों के साथ शॉर्टकट परिभाषाओं के साथ सहज हैं सीमा टैग। कुछ अन्य लोग चौड़ाई, रंग और शैली के सभी टैगों की स्पष्ट सूची पसंद करते हैं। सम्मेलन यह है कि जब किसी पृष्ठ में विस्तृत बॉर्डर सजावट की आवश्यकता होती है, तो व्यक्तिगत टैग अलग से सूचीबद्ध होते हैं। यह इस तरह के अनुकूलित सीमा परिभाषाओं को डीबग करने के दौरान मदद करता है। सामान्य मामलों के लिए, बस एक शॉर्टकट परिभाषा करना होगा।

आशा है कि आप सीएसएस सीमाओं, और डब्ल्यू पर आप के लिए देख रहे थे जानकारी मिलीइस के साथ, हम CSS लेख में इस सीमा के अंत में आते हैं।

हमारी जाँच करें जो प्रशिक्षक के नेतृत्व वाले लाइव प्रशिक्षण और वास्तविक जीवन की परियोजना के अनुभव के साथ आता है। यह प्रशिक्षण आपको बैक-एंड और फ्रंट-एंड वेब तकनीकों के साथ काम करने के लिए कौशल में कुशल बनाता है। इसमें वेब डेवलपमेंट, jQuery, Angular, NodeJS, ExpressJS और MongoDB पर प्रशिक्षण शामिल है।

क्या आप हमसे कोई प्रश्न पूछना चाहते हैं? कृपया 'सीएसएस में सीमा' ब्लॉग के टिप्पणी अनुभाग में इसका उल्लेख करें और हम आपके पास वापस आ जाएंगे।