IoT में सेंसर ग्राफ़िक्स वेब की उपस्थिति को CSS से परिभाषित करें

श्रृंखला के पिछले लेख में इंटरनेट ऑफ थिंग्स IoT से जुड़े सेंसरों का स्टेट ग्राफ़ कैसे बनाएं रास्ता बताते हैं ग्राफ़िक्स की संरचना के रूप में HTML में विकसित वेब पेज का उपयोग करें. वेब पेज तत्व, जिन्हें ऑब्जेक्ट का उपयोग करके न्यूनतम कर दिया गया था <div>, ने सीधे तौर पर इसके स्वरूप को परिभाषित नहीं किया, इसके बजाय, उन्होंने इसका उल्लेख किया स्टाइल शीट की उपस्थिति संबंधी जानकारी सीएसएस, जिसे श्रृंखला के इस भाग में समझाया जाएगा।

जिस समाधान में मैं IoT से जुड़े सेंसरों के ग्राफ़ बनाने का प्रस्ताव करता हूं, उसमें एक दस्तावेज़ का उपयोग किया जाता है सीएसएस जो दस्तावेज़ से लोड किया गया है एचटीएमएल. यदि कोड एचटीएमएल उदाहरण के लिए, सर्वर पर एक एप्लिकेशन से उत्पन्न किया जाएगा PHP, इसे उस कोड के हिस्से के रूप में शामिल करना बहुत आसान होगा जो वेब पेज को लोड करने के बजाय उसे परिभाषित करता है, जिसे कॉल को सहेजकर थोड़ा अनुकूलित किया जा सकता है। जो भी विकल्प चुना जाए, उसमें सबसे सुविधाजनक तरीका शामिल है कोड संपादित करें सीएसएस इसे अधिक आराम से प्रबंधित करने और इसका पुन: उपयोग करने में सक्षम होने के लिए एक अलग दस्तावेज़ में. लेखों की इस श्रृंखला के ट्यूटोरियल में विकसित उदाहरण में इसे नाम दिया गया है estilo.css.

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

शैलियाँ सीएसएस वे एक वेब पेज के व्यवहार और स्वरूप की सभी चरम सीमाओं का कई प्रकार के दृष्टिकोणों से वर्णन करने का प्रयास करते हैं, सभी एक साथ मान्य होते हैं, जबकि जितना संभव हो सके पिछले संस्करण विनिर्देशों के साथ संगतता का सम्मान करने का प्रयास करते हैं। इसका मतलब यह है कि ऐसे कई संभावित समाधान हैं जो समान जरूरतों को हल करते हैं। साथ ही बड़ी संख्या में उपलब्ध संसाधन (गुण) सीएसएस). लेख के उपदेशात्मक दृष्टिकोण के कारण और नए उपयोगकर्ताओं को भ्रमित न करने के लिए सीएसएस, केवल गुण और अंतिम उद्देश्य के लिए आवश्यक संरचनाएँ, जो इंटरनेट ऑफ थिंग्स से जुड़े सेंसर से डेटा को ग्राफ़िक रूप से प्रस्तुत करना है। साथ ही, एक भी है का छोटा सा परिचय सीएसएस, व्यापक शैली पत्रक।

सीएसएस गुणों का स्वरूपण

El मूल प्रारूप इसमें संपत्ति का नाम, बृहदान्त्र चिह्न, संपत्ति मूल्य और अर्धविराम चिह्न शामिल हैं। nombre:valor;

सीएसएस आपको एक ही दस्तावेज़ में माप की विभिन्न इकाइयों का उपयोग करने की अनुमति देता है इसमें संरचना से संबंधित (किसी तत्व में क्या शामिल है इसका माप) प्रतिशत के रूप में, उस उपकरण के सापेक्ष, जिस पर उन्हें दर्शाया गया है, जैसे कि पिक्सेल, या निरपेक्ष जैसे सेंटीमीटर शामिल हैं। निम्नलिखित संक्षिप्त नाम कोडिंग के अनुसार मान के बाद इकाइयाँ व्यक्त की जाती हैं।

हम जो एप्लिकेशन करने जा रहे हैं, उसके लिए कम से कम तीन शैली इकाइयों पर विचार करना महत्वपूर्ण है। किसी आइटम के कंटेनर के आकार के सापेक्ष माप लेने के लिए %, स्क्रीन के रिज़ॉल्यूशन के अनुसार माप के लिए पिक्सेल और मुद्रित रिपोर्ट बनाने के लिए मिलीमीटर (वास्तव में, कोई भी पूर्ण माप)।

कुछ हैं जटिल गुण, या समग्र, जो कई मूल्यों (जैसे रंग, आकार, शैली...) पर निर्भर करता है, मूल्य को इंगित करने के लिए सीएसएस में दो संभावनाएं हैं: उचित क्रम में लिखें, सभी रिक्त स्थान द्वारा अलग किए गए मान या कॉम्प्लेक्स के समतुल्य सरल गुणों के योग का उपयोग करें. उदाहरण के लिए, किसी ऑब्जेक्ट के सभी चार मार्जिन को एक ही प्रॉपर्टी में निर्दिष्ट किया जा सकता है margin या गुणों के साथ सेट किया जा सकता है margin-top, margin-right, margin-bottom y margin-left. वैसे, वह क्रम (घड़ी की दिशा में) वह है जिसके बाद मूल्यों का वर्णन होता है जो किसी तत्व को "घेरता" है जैसे कि आंतरिक (पैडिंग) या बाहरी मार्जिन, सीमा...

अब तक जो समझाया गया है उससे अब हम गुणों के कुछ उदाहरण देख सकते हैं

ऊपर के उदाहरण में रंग को 6 हेक्साडेसिमल अंकों के एक कोड का उपयोग करके परिभाषित किया गया है जो जोड़े में, लाल, हरे और नीले घटक का मूल्य दर्शाता है।. जब ऐसा होता है, जैसा कि उदाहरण में है, कि दो अंक बराबर हैं, तो इसे संक्षिप्त किया जा सकता है #F09 (जो, वैसे, तथाकथित "वेब सुरक्षित रंगों" से मेल खाता है)। अंतिम प्रस्ताव में मैं मानदंडों को एकीकृत करने और इसे अधिक पठनीय बनाने के लिए इन संक्षिप्ताक्षरों का उपयोग करने से बचूंगा। आप जटिल गुणों के मानों को संक्षिप्त भी कर सकते हैं, जैसे margin उदाहरण में, जब सभी मान या विपरीत जोड़े दोहराए जाते हैं। पाठ को सहेजने की समान पंक्तियों के साथ, किसी संपत्ति को निर्दिष्ट करते समय मान शून्य होने पर इकाई को छोड़ना भी संभव है, क्योंकि यह उस मामले में अप्रासंगिक है।

कुछ मूल्यों को, संख्यात्मक रूप से व्यक्त करने में सक्षम होने के अलावा, एक नाम भी होता है जो कोड को अधिक पठनीय बनाता है और आपको उन्हें बेहतर ढंग से याद रखने की अनुमति देता है। उदाहरण के लिए, लक्ष्य के हेक्साडेसिमल संख्यात्मक कोड के बजाय, #FFFFFF (o #FFF), लिखा जा सकता है white उसी परिणाम के साथ. इस तरह रंग काला, #000000 (o #000), द्वारा प्रतिस्थापित किया जा सकता है black.

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

पैरा किसी संपत्ति के समग्र (जटिल) मूल्यों की श्रृंखला का उपयोग करने का एक विशेष तरीका व्यक्त करें सीएसएस आप फ़ंक्शंस के समान सिंटैक्स वाले प्रारूप चुन सकते हैं। उदाहरण के लिए, किसी रंग को उसके लाल, हरे और नीले घटक के तीन मानों के रूप में व्यक्त करना आरजीबी मॉडल) लिखा होगा color: rgb(128, 255, 64);. अभिव्यक्ति की इस शैली के अंतर्गत इकाइयों का उपयोग करना भी संभव है; उपरोक्त उदाहरण में, रंग घटक 0 से 255 तक दशमलव मान हैं, लेकिन इसे प्रत्येक रंग घटक के कुल के प्रतिशत के रूप में व्यक्त करना आसान हो सकता है, जिस स्थिति में इसे इस प्रकार भी लिखा जा सकता है color: rgb(50%, 100%, 25%);.

सीएसएस में मूल्यों की गणना

के नवीनतम संस्करणों में सीएसएस ऐसा करना संभव है मूल्यों की गणना के लिए सरल गणितीय संक्रियाएँ. ऐसा करने के लिए, उपयोग करें calc और किया जाने वाला ऑपरेशन कोष्ठक में व्यक्त किया गया है। आप इकाइयों, कोष्ठकों और योग जैसे सरल ऑपरेटरों को इंगित कर सकते हैं (+), घटाव (-), गुणन (*) और विभाजन (/). अभिव्यक्ति प्रकार की होगी width:calc((90%-20px)/2));.

वेरिएबल्स का उपयोग गणितीय संक्रियाओं में किया जा सकता है सीएसएस एक संपत्ति की गणना में दूसरे के मूल्य का जिक्र करना var. शैली की वास्तविक संपत्ति को संदर्भित किए बिना एक चर का उपयोग करने में सक्षम होने के लिए, ऐसी संपत्ति का हवाला देने की भी अनुमति है जो मौजूद नहीं है। सीएसएस प्रारूप की अनुशंसा करता है --nombre-variable (आविष्कृत संपत्ति के नाम के सामने दो हाइफ़न)। इस प्रकार, किसी तत्व की ऊंचाई को उसकी चौड़ाई के आधे के रूप में परिभाषित करना एक अभिव्यक्ति है सीएसएस जैसा height:calc(var(width)/2); और एक नया वेरिएबल "मोटाई" (जो अन्य गुण उपयोग कर सकते हैं) को परिभाषित करने के लिए आप लिखेंगे, उदाहरण के लिए, --grosor:4px; बाद में इसे इस रूप में संदर्भित करने में सक्षम होना margin-top:calc(var(--grosor)*4);

ब्राउज़र-निर्भर सीएसएस गुण

सीएसएस यह कंसोर्टियम द्वारा मानकीकृत एक विनिर्देश है W3C (विश्वव्यापी वेब संकाय) लेकिन कई गुण या व्यवहार शैलियाँ विनिर्देश का हिस्सा बनने से पहले ब्राउज़र तक पहुँचती हैं एक संस्करण का.

ताकि कोड सीएसएस ब्राउज़र की वर्तमान सुविधाओं के साथ काम करता है, लेकिन नई सुविधाओं के साथ अनुकूलता न खोएं, एक उपसर्ग का उपयोग किया जाता है. यह उपसर्ग पर निर्भर करता है प्रतिपादन इंजन वह उस वेब ब्राउज़र का उपयोग करता है जिसे आप संदर्भित करना चाहते हैं (जिसके लिए शैली परिभाषित है)।

उपसर्ग -webkit यह के आधार पर ब्राउज़रों के लिए काम करता है वेबकिट जैसा Safari o Chrome. उपसर्ग -moz इसका उपयोग ब्राउज़रों के लिए किया जाता है प्रतिपादन इंजन de मोज़िलावर्तमान में छिपकलीजैसा Firefox और इसके व्युत्पन्न। का उल्लेख करने के लिए EdgeHTML, प्रतिपादन इंजन ब्राउज़र Edge माइक्रोसॉफ्ट से (पूर्व में ट्राइडेंट), उपसर्ग का प्रयोग किया जाता है -ms. ब्राउज़र का मामला Opera जब से उसने अपना उपयोग करना शुरू किया है तब से यह थोड़ा विशेष है प्रतिपादन इंजन, के साथ संदर्भित -o, लेकिन वर्तमान में साथ काम करता है वेबकिट, जिसे इस प्रकार व्यक्त किया जाता है -webkit.

किसी ब्राउज़र को संदर्भित करने वाली किसी प्रॉपर्टी का उपयोग करने के लिए, उसका नाम लिखें, उसे उपसर्ग करें और उसे एक हाइफ़न के साथ अलग करें जैसे कि -o-border-radius:10px;, जो ब्राउज़र के पुराने संस्करणों में एक गोलाकार बॉर्डर (एक गोलाकार कोना) सेट करने का काम करेगा Opera.

टिप्पणियां

कोड को स्पष्ट करने के लिए सीएसएस आप टिप्पणियों का उपयोग कर सकते हैं, जो इसे और अधिक पठनीय बना देगा, हालांकि इसके आकार में वृद्धि के नुकसान के साथ। टिप्पणियों का वाक्य-विन्यास सीएसएस यह मल्टीलाइन टिप्पणियों की तरह है सी + + मुझे यकीन है कि आप पहले से ही जानते हैं: शुरू करना /* और में समाप्त हो रहा है */के रूप में, सी + +, कई पंक्तियों पर कब्जा कर सकता है।

चयनकर्ताओं

की परिभाषा किसी दस्तावेज़ में ऑब्जेक्ट को गुण निर्दिष्ट किए जाते हैं एचटीएमएल उन्हें चयनकर्ताओं में समूहित करना और उन्हें ब्रेसिज़ में संलग्न करना। एक चयनकर्ता किसी भाषा तत्व का संदर्भ दे सकता है एचटीएमएल (एक लेबल), जैसे div, एक वर्ग (के साथ सौंपा गया class en एचटीएमएल) एक पहचानकर्ता (के साथ सौंपा गया)। id en एचटीएमएल) या सभी ("सार्वभौमिक चयनकर्ता") तारांकन द्वारा दर्शाए गए (*). निम्नलिखित उदाहरण प्रत्येक प्रकार का चयनकर्ता दिखाता है:

के लेबल एचटीएमएल शैली परिभाषा में उनके नाम के साथ व्यक्त किया जाता है, वर्गों को नाम से पहले एक अवधि लगाकर चिह्नित किया जाता है (.) और एक पाउंड चिन्ह (#) पहचानकर्ताओं के लिए।

की महान शक्ति का हिस्सा सीएसएस में रहता है चयनकर्ताओं को उनके गुणों को परिभाषित करते समय समूहीकृत करने की संभावना. चयनकर्ताओं को समूहबद्ध करने के कई तरीके हैं। उन्हें समूहीकृत करके, उन्हें अल्पविराम द्वारा अलग करते हुए, यह व्यक्त किया जाता है कि उद्धृत चयनकर्ताओं में से प्रत्येक के पास वे गुण हैं.

पिछला उदाहरण इंगित करता है कि खपत, आर्द्रता और तापमान वर्ग रंग, चौड़ाई और ऊंचाई साझा करते हैं। इस कोड में एक नई अवधारणा भी पेश की गई है: गुणों को फिर से परिभाषित किया जा सकता है, और उस स्थिति में सबसे हाल ही में वर्णित गुण प्रबल होंगे. इस तरह, तापमान वर्ग के तत्वों की ऊंचाई अंततः उस वस्तु की 50% होगी जिसमें वे शामिल हैं।

यदि समूहीकृत चयनकर्ताओं को अल्पविराम से अलग नहीं किया जाता है, तो गुणों पर लगाई गई शर्त संचयी होती है, अर्थात, किसी तत्व को उनके द्वारा परिभाषित स्वरूप या व्यवहार प्राप्त करने के लिए सभी चयनकर्ताओं को संतुष्ट करना होगा। यदि चयनकर्ता टैग को संदर्भित करते हैं एचटीएमएल जिस क्रम में वे दिखाई देते हैं वह समावेशन के स्तर में नीचे उतरना चाहिए: पहले उच्चतम पदानुक्रमित स्तर और अंत में सबसे निचला।

पिछले उदाहरण में तत्वों को परिभाषित किया गया है div वे भी तापमान वर्ग के हैं और वे तत्व जिनमें तापमान वर्ग और उपभोग वर्ग (दोनों एक ही समय में) दोनों हैं class="temperatura consumo". अवयव <div> कोड का एचटीएमएल साथ class="temperatura" उनका उच्चतम 100% होगा

पाठ को परिभाषित करने के लिए सीएसएस गुण

तीन प्रकार के गुणों के बीच अंतर किया जा सकता है जो पाठ की उपस्थिति को प्रभावित करते हैं: (1) वे जो उस फ़ॉन्ट को स्थापित करते हैं जिसके साथ इसे प्रस्तुत किया जाता है, (2) वे जो शाब्दिक (पाठ की सामग्री) की उपस्थिति निर्धारित करते हैं और (3) सामान्य, यानी, वे जो पाठ और अन्य घटकों की उपस्थिति दोनों को प्रभावित करते हैं। सामान्य तौर पर, अंतिम समूह की व्याख्या करने के लिए जो कहा गया था वह अन्य तत्वों पर लागू समान गुणों पर भी लागू होगा।

टाइपोग्राफी (फ़ॉन्ट)

• font-family किसी तत्व के लिए प्रयुक्त फ़ॉन्ट का नाम इंगित करता है। आप वरीयता के क्रम में और नामों को अल्पविराम से अलग करके, फ़ॉन्ट का एक नाम या सूची लिख सकते हैं, जिसका उपयोग वैकल्पिक रूप से किया जाएगा यदि वांछित फ़ॉन्ट मौजूद नहीं है। उसी तर्ज पर, नामों के साथ सामान्य फ़ॉन्ट का उपयोग करना संभव है monospace, serif, sans-serif, cursive, fantasy. इन सामान्य फ़ॉन्ट्स में से, सबसे महत्वपूर्ण (हाथ में डेटा की प्रस्तुति के लिए) पहला है, जैसा कि इसके नाम से पता चलता है, सिस्टम में उपलब्ध निश्चित रिक्ति फ़ॉन्ट और ब्राउज़र द्वारा प्रीसेट का उपयोग करेगा। दूसरा, serif, यह उपलब्ध डिफ़ॉल्ट का उपयोग करेगा सेरिफ़ (परिष्करण या अनुग्रह). नीलामी के बिना यदि तीसरा संकेत दिया जाता है, sans-serif. हाथ से बनाई गई लिखावट का अनुकरण करना cursive (इसे कॉल करने का एक तरीका जिसे स्पष्ट रूप से सुधारा जा सकता है) और सिस्टम की सजावटी टाइपोग्राफी fantasy, पाँच में से अंतिम।

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

  CSS font-tamily ejemplo de uso

  CSS

  <br /> font-family: DejaVu, Helvetica, Arial, “a palo seco”, sans-serif;

  1	font-family: DejaVu, Helvetica, Arial, “a palo seco”, sans-serif;

  वेब ब्राउज़र स्थानीय फ़ॉन्ट (जिस सिस्टम पर वे काम करते हैं उस पर इंस्टॉल किए गए) के साथ-साथ विशेष रूप से लोड किए गए अन्य फ़ॉन्ट का उपयोग करने में सक्षम हैं, यहां तक ​​कि स्थानीय रूप से इंस्टॉल किए गए फ़ॉन्ट को ओवरलैप भी कर सकते हैं। फ़ॉन्ट लोड करने के लिए, उपयोग करें @font-face इसका नाम, इसकी परिभाषा का डाउनलोड स्थान और, यदि लागू हो, इसके प्रारूप का विवरण दर्शाता है।

  CSS Ejemplo de descarga de la definición de una tipografía con @font-face

  CSS

  <br /> @font-face<br /> {<br /> font-family:”SircuitoExpandedLight”;<br /> src: url(‘/EOT/Sircuito-Expanded-Light.eot’);<br /> }</p> <p>@font-face<br /> {<br /> font-family:”SircuitoRegularMedium”;<br /> src: url(‘tipos/Sircuito-Regular-Medium.eot’);<br /> src: url(‘tipos/Sircuito-Regular-Medium.eot?iefix’) format(‘eot’),<br /> url(‘tipografia/Sircuito-Regular-Medium.woff’) format(‘woff’),<br /> url(‘tipografia/Sircuito-Regular-Medium.ttf’) format(‘truetype’),<br /> url(‘tipografia/Sircuito-Regular-Medium.svg#webfont’) format(‘svg’);<br /> -webkit-font-smoothing:antialiased;<br /> }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  @font-face { font-family:“SircuitoExpandedLight”; src: url(‘/EOT/Sircuito-Expanded-Light.eot’); }   @font-face { font-family:“SircuitoRegularMedium”; src: url(‘tipos/Sircuito-Regular-Medium.eot’); src: url(‘tipos/Sircuito-Regular-Medium.eot?iefix’) format(‘eot’), url(‘tipografia/Sircuito-Regular-Medium.woff’) format(‘woff’), url(‘tipografia/Sircuito-Regular-Medium.ttf’) format(‘truetype’), url(‘tipografia/Sircuito-Regular-Medium.svg#webfont’) format(‘svg’); -webkit-font-smoothing:antialiased; }

  पिछले उदाहरण की दो परिभाषाओं में से पहली में, दस्तावेज़ का अक्षर लोड किया गया है सरकुइटो-एक्सपैंडेड-लाइट.ईओटी जो मुख्य (रूट) फ़ोल्डर के अंदर ईओटी फ़ोल्डर में स्थित है और इसे परिवार के नाम के रूप में निर्दिष्ट किया गया है सर्किटविस्तारित प्रकाश. वैसे, क्या आपको यह फ़ॉन्ट पसंद है? यह मुफ़्त है, आप कर सकते हैं सरकुइटो फॉन्ट को मुफ्त में डाउनलोड करें जिसे मैंने ग्रैनाबॉट छवि के लिए डिज़ाइन किया है.

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

  दूसरा उदाहरण कई वैकल्पिक दस्तावेज़ों का उपयोग करता है ताकि एक ही परिभाषा कई ब्राउज़रों के लिए काम करे (जिनमें से प्रत्येक उस प्रकार को लोड करेगा जिसकी वह व्याख्या करने में सक्षम है)

  परिभाषा की अंतिम पंक्ति में संपत्ति शामिल है font-smoothing पत्र को नरम करने के लिए (ए लागू करें) एंटीलायज़िंग़). चूंकि यह एक मानक गुण नहीं है, इसलिए उपसर्ग का उपयोग किया जाता है -webkit.

• font-size जैसा कि अक्षर के आकार को इंगित करने के लिए कार्य करता है font-size:12px;

• font-weight फ़ॉन्ट मोटाई सेट करता है. इसे एक संख्यात्मक मान के रूप में व्यक्त किया जा सकता है, आमतौर पर 100 और 100 के बीच 900 का गुणक, सामान्य मुद्रण भार के अनुसार, या अधिक बार एक नाम के साथ: normal आधार मोटाई के लिए, bold साहसिक के लिए, bolder उस संस्करण के लिए जिसे आमतौर पर काला कहा जाता है, light जुर्माने के लिए (आमतौर पर प्रकाश कहा जाता है) और lighter सबसे पतले के लिए (कभी-कभी पतला भी कहा जाता है)।

  फ़ॉन्ट के सामान्य संस्करण का संख्यात्मक मान 400 (इकाई रहित) और बोल्ड संस्करण के लिए 700 है।

  डिफ़ॉल्ट रूप से, यदि कोई अन्य मान इंगित नहीं किया गया है, तो फ़ॉन्ट का स्वरूप उससे मेल खाता है normal या 400 इसलिए, यदि इसे सामान्य तत्व या कंटेनर में नहीं बदला गया है, जिससे यह विरासत में मिला है, तो इसे इंगित करना आवश्यक नहीं है font-weight मान के साथ normal.

• font-stretch इसका उपयोग अक्षर की चौड़ाई को इंगित करने के लिए किया जाता है, जब तक कि यह संबंधित परिवार में उपलब्ध हो। सबसे संकीर्ण से सबसे चौड़े क्रम में संपत्ति जो संभावित मान ले सकती है, वे हैं: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded y ultra-expanded. उसी मानदंड के साथ जो पिछली संपत्ति में उपयोग किया गया था, डिफ़ॉल्ट चौड़ाई है normal और इसे स्पष्ट रूप से इंगित करना आवश्यक नहीं है जब तक कि इसे परिभाषित किए जा रहे क्रम से उच्च पदानुक्रमित क्रम में नहीं बदला गया हो।

• साथ font-style आप इंगित कर सकते हैं कि क्या कोई पाठ तिरछे या तिरछे अक्षर से बनाया गया है, जो उसके स्वरूप को प्रभावित करता है, या एक घसीट अक्षर से, जो एक विशेष अर्थ व्यक्त करता है (उदाहरण के लिए विदेशी शब्द), या गोल अक्षर से, यानी न तो पहले वाला। या सामान्य. मूल्य oblique पहला कार्य, उपस्थिति और मूल्य को पूरा करता है italic दूसरा। तथ्य यह है कि दोनों की उपस्थिति अक्सर समान होती है या यहां तक ​​​​कि एक ही होती है, जिसका अर्थ है कि उपयोग (अर्थ) कभी-कभी भ्रमित होता है, इसलिए इस पर ध्यान देना उचित है। अन्य संपत्तियों की तरह, normal पिछले मानों को निष्क्रिय करने का कार्य करता है।

• text-decoration (मूल्य के साथ) रेखांकित करने का कार्य करता है underline), ओवरलाइन (मूल्य के साथ overline), क्रॉस आउट (मान के साथ line-through) या फ्लैश (मूल्य के साथ blink) वह पाठ जिस पर यह गुण प्रभाव डालता है।

• टाइपोग्राफी पहलू की श्रृंखला को पूरा करने के लिए, हालांकि हमारे आवेदन के लिए यह बहुत प्रासंगिक नहीं है, font-variant, आपको आवेदन करने की अनुमति देता है छोटी टोपियाँ (छोटे बड़े अक्षरों में) पाठों के लिए।

पाठ

• text-align ब्राउज़र को बताता है कि टेक्स्ट के ब्लॉक को कैसे संरेखित किया जाना चाहिए। संभावित संरेखण कोड के साथ बाईं ओर हैं (जिसे डिफ़ॉल्ट रूप से माना जाता है)। left, मूल्य के साथ केंद्र center, सही उपयोग right और दोनों सिरों पर उचित है justify.

• line-height पाठ की पंक्तियों के बीच पृथक्करण सेट करता है। इस मामले में, यदि प्रतिशत का उपयोग किया जाता है, तो 100% का मान कंटेनर की माप के बजाय पाठ की ऊंचाई से मेल खाता है। पाठ के सापेक्ष सबसे अधिक उपयोग किया जाने वाला माप 120% से मेल खाता है। 100% रेखा का अर्थ यह होगा कि एक रेखा का निचला भाग अगली पंक्ति के शीर्ष को छूता है। हालाँकि टाइपोग्राफी डिज़ाइन में आमतौर पर कुछ जगह शामिल होती है, लेकिन पंक्तियों के बीच थोड़ा अधिक अंतर छोड़ना आम बात है।

  पंक्तियों के बीच अलगाव को व्यक्त करने के लिए, एक गुणांक (एक इकाई रहित मान) को इंगित करना भी संभव है जिसके साथ टेक्स्ट बॉक्स की ऊंचाई के आधार पर लाइन की ऊंचाई की गणना की जा सकती है।

• letter-spacing शब्दों के अक्षरों के बीच के स्थान का मान है, जिसे टाइपोग्राफी में कहा जाता है कर्निंग o ट्रैकिंग.

• word-spacing शब्दों के बीच रिक्त स्थान के माप को दर्शाता है।

• white-space किसी पाठ में सफेद रिक्त स्थान का व्यवहार निर्धारित करता है। जब मान का उपयोग किया जाता है normal, जो डिफ़ॉल्ट रूप से लिया जाता है, कोड में कई रिक्त स्थानों को जोड़ता है एचटीएमएल वेब पेज पर एक प्रेजेंटेशन में (ब्राउज़र द्वारा प्रदर्शित) और यदि ब्लॉक में कोई जगह नहीं है तो एक लाइन को तोड़ने के लिए संदर्भ के रूप में सफेद रिक्त स्थान लेता है।

  मान nowrap यह बार-बार दोहराए गए रिक्त स्थानों को एक में जोड़ता है, लेकिन रिक्त स्थानों में पाठ की पंक्तियों को विभाजित नहीं करता है, भले ही लाइन कंटेनर में फिट न हो, यदि आवश्यक हो तो स्थान को ओवरफ्लो कर देता है और यदि आवश्यक हो तो बाहर लिखता है। रेखाओं को स्पष्ट रूप से विभाजित करने के लिए आप लेबल का उपयोग कर सकते हैं <br> de एचटीएमएल.

  का उपयोग करते हुए pre न तो रिक्त स्थानों को एक में जोड़कर एकीकृत किया जाता है, न ही रिक्त स्थानों को संदर्भ के रूप में उपयोग करके रेखाओं को विभाजित किया जाता है।

  pre-line बार-बार दोहराए गए रिक्त स्थानों को जोड़ें और यदि आवश्यक हो तो संदर्भ के रूप में रिक्त स्थानों का उपयोग करके पंक्तियों को तोड़ें।

  pre-wrap बार-बार रिक्त स्थान को सुरक्षित रखता है और यदि आवश्यक हो तो संदर्भ के रूप में रिक्त स्थान का उपयोग करके पंक्तियों को तोड़ता है।

रंग

En सीएसएस रंग के अनुसार व्यक्त किया जा सकता है आरजीबी रंग मॉडल या के अनुसार एचएसएल रंग मॉडल और दोनों ही मामलों में पारदर्शिता जानकारी को शामिल किया जा सकता है, चौथे चैनल का मूल्य जिसे आमतौर पर कहा जाता है अल्फा चैनल o अल्फा रचना, जो आरजीबीए और एचएसएलए मॉडल को जन्म देता है।

रंग को प्रारूप में व्यक्त करने के लिए आरजीबी हेक्साडेसिमल नोटेशन का उपयोग करके सिंटैक्स का उपयोग किया जाता है #RRGGBBआरआर लाल घटक का मूल्य है (सिद्धांत रूप में, दो हेक्साडेसिमल अंकों का उपयोग करते हुए), जीजी हरे घटक का मूल्य है और बीबी नीले घटक का मूल्य है। जैसा कि पहले ही कहा जा चुका है, यदि प्रत्येक घटक के दो अंकों का मान समान है तो इसे इस प्रकार व्यक्त किया जा सकता है #RGB तथाकथित वेब सुरक्षित रंगों के लिए उपलब्ध रंगों की संख्या को सीमित करना

रंग का प्रतिनिधित्व करने का यह तरीका सबसे क्लासिक और प्रयुक्त होने के अलावा, इसे इस प्रकार भी व्यक्त किया जा सकता है rgb(R,G,B), hsl(HSL), rgba(R,G,B,A) y hsla(HSLA) इसे प्रारूप में इंगित करने के लिए आरजीबी, एचएसएल और पारदर्शिता के संकेत के साथ उनके संबंधित प्रपत्र (अल्फा चैनल)

जब तक यूनिट प्रत्यय जोड़कर अन्यथा अनुरोध न किया जाए आरजीबी मॉडल तीन घटकों के लिए 0 से 255 तक दशमलव मान का उपयोग करता है अल्फा घटक एक गुणांक (शून्य से एक तक दशमलव) और का पहला मान है एचएसएल रंग मॉडल, रंग, एक दशमलव मान है जो एक कोण का प्रतिनिधित्व करने वाला 0 से 360 (बिना इकाइयों के) तक होता है। की संतृप्ति और चमक मूल्य एचएसएल मॉडल इन्हें आमतौर पर प्रतिशत के रूप में व्यक्त किया जाता है।

जैसा कि पहले ही कहा जा चुका है, हालाँकि इसका उपयोग बहुत बार नहीं होता है, रंगों को प्रारूप में उनके नाम से दर्शाया जा सकता है color:black; के बजाय color:#000000;. पहला प्रारूप अधिक पठनीय है, लेकिन मूल्यों की एक संक्षिप्त तालिका तक ही सीमित है, जिसमें लिखे गए एप्लिकेशन से संख्यात्मक रूप से संशोधित करना भी अधिक कठिन है। जावास्क्रिप्ट.

IoT से जुड़े सेंसर से डेटा के ग्राफिकल प्रतिनिधित्व के हमारे प्रस्ताव के लिए, हमें रंग से संबंधित केवल तीन गुणों की आवश्यकता होगी। वे पाठ के नाम को इंगित करने के लिए, जिसे अब समझाया गया है, और इसका समर्थन करने वाले किसी भी घटक के नाम को इंगित करने के लिए दोनों का काम करेंगे।

• color तत्व का रंग इंगित करता है एचटीएमएल और इसमें क्या शामिल है (जो इसे विरासत में मिला है) जब तक कि इसे व्यक्तिगत रूप से अन्य रंग निर्दिष्ट करके स्पष्ट रूप से नहीं बदला जाता है।

• background-color किसी तत्व के पृष्ठभूमि रंग को परिभाषित करने के लिए उपयोग किया जाता है एचटीएमएल. रंग को मान के रूप में इंगित करने के अलावा आरजीबी o एचएसएल आप विशेष मूल्य का उपयोग कर सकते हैं transparent ताकि वस्तु का कोई पृष्ठभूमि रंग न हो और यह देखना संभव हो कि उसके पीछे क्या स्थित है, अर्थात, यह उन तत्वों को कवर नहीं करता है जिन पर इसे खींचा गया है।

• opacity आपको किसी तत्व और उसकी सभी सामग्री की अस्पष्टता (अप्रत्यक्ष रूप से, पारदर्शिता) सेट करने की अनुमति देता है (पृष्ठभूमि की पारदर्शिता के साथ भ्रमित न हों)। यदि पारदर्शिता दूसरों में निहित उन तत्वों को सौंपी जाती है जो स्वयं पारदर्शी हैं, तो यह बढ़ जाएगा, यह अलग से काम नहीं करेगा। आप किसी पारदर्शी वस्तु में निहित वस्तु को अधिक अपारदर्शी नहीं बना सकते। का मान है opacity इसे गुणांक के रूप में व्यक्त किया जाता है opacity:0.5; 50% अपारदर्शिता इंगित करने के लिए।

  Microsoft के ब्राउज़र के पुराने संस्करण इस संपत्ति का उपयोग नहीं करते थे, लेकिन उनमें यह संपत्ति थी filter (फ़िल्टर) जो, अन्य मानों के बीच, अल्फ़ा (के लिए) का समर्थन कर सकता है अल्फा चैनल) जिसके साथ एक प्रतिशत अपारदर्शिता निर्दिष्ट की जा सकती है opacity प्रारूप के अनुसार:

  CSS para dar opacidad en los antiguos navegadores web de Microsoft

  CSS

  <br /> filter:alpha(opacity=50); /* Opacidad del 50% en una versión 8.0 o anterior de Microsoft Internet Explorer */

  1	filter:alpha(opacity=50); /* Opacidad del 50% en una versión 8.0 o anterior de Microsoft Internet Explorer */

उपाय

En सीएसएस, तत्वों की माप <div>, जिसे हमने ग्राफ़िक्स कंटेनर बनाने के लिए चुना है, उसके साथ सेट है width (चौड़ाई) और height (ऑल्टो).

की सामग्री के बीच <div> और इसकी परिधि में एक भराव क्षेत्र होता है जिसे के मान से निर्धारित किया जाता है padding. वस्तु की परिधि के चारों ओर वह किनारा है जिसका माप गुण के साथ निर्दिष्ट है border. वस्तु के बाहरी भाग को अलग करना <div> आसपास की अन्य वस्तुओं में एक स्थान होता है जिसकी माप निर्धारित की जाती है margin.

सामान्य परिस्थितियों में, वस्तु द्वारा उपयोग किए गए स्थान का माप <div> इसकी चौड़ाई या ऊंचाई और पैडिंग के योग के रूप में गणना की जा सकती है (padding) प्लस बॉर्डर (border) प्लस मार्जिन (margin). जब प्रासंगिक माप स्थापित किया जाता है तो वह वस्तु का उपयोगी आंतरिक स्थान होता है <div>, यह रचना बहुत व्यावहारिक है, लेकिन यदि जो ज्ञात है वह उपलब्ध कुल माप है क्या इस व्यवहार को बदला जा सकता है, डिफ़ॉल्ट रूप से सेट किया गया है, ताकि कुल चौड़ाई और ऊंचाई माप इसके द्वारा इंगित किया गया हो width (चौड़ाई) और height (ऊंचाई) पैडिंग, बॉर्डर और मार्जिन के माप को जोड़ने के बजाय उसमें से घटाकर। इस मोड का उपयोग करने के लिए, असाइन करें संपत्ति box-sizing मूल्य border-box (डिफ़ॉल्ट है content-box)

निम्नलिखित आरेख ग्राफ़िक रूप से परिणामी मान दिखाता है width (चौड़ाई) और height (उच्च) यदि उपयोग कर रहे हैं box-sizing:border-box; (कुल) याbox-sizing:content-box; (अंदर)

माप के मान उन इकाइयों के साथ व्यक्त किए जाते हैं जिन्हें पहले ही समझाया जा चुका है। जब कई मूल्यों द्वारा परिभाषित गुणों की बात आती है, तो विभिन्न प्रकार के औसत के साथ व्यक्त आंकड़े मिश्रित हो सकते हैं। इसके अलावा, कुछ विशेष मूल्य हैं जो IoT में सेंसर ग्राफ़ के इस कार्यान्वयन में हमारे द्वारा किए जाने वाले उपयोग के लिए प्रासंगिक हैं। विशेष रूप से, हम मूल्य का उपयोग कर सकते हैं auto संपत्ति पर margin कुछ परिस्थितियों में वस्तुओं को केन्द्रित करने के लिए एक संसाधन के रूप में।

उपरोक्त उदाहरण में, वर्ग "small_box" के लिए एक 2 पिक्सेल मोटी सीमा परिभाषित की गई है, जिसे काले स्ट्रोक के साथ खींचा गया है (#000000) निरंतर (solid). "बिग_बॉक्स" वर्ग में बॉर्डर के लिए उपयोग की जाने वाली रेखा को धराशायी कर दिया जाता है (dashed) और रंग लाल (#FF0000). इन मूल्यों को अलग-अलग व्यक्त करने के लिए हम इसका उपयोग कर सकते हैं border-width मोटाई के लिए, border-style स्ट्रोक के लिए और border-color रंग के लिए. ये किनारे गुण बदले में मिश्रित होते हैं और जैसा कि ऊपर बताया गया है, दक्षिणावर्त दिशा का पालन करते हुए ऊपर, दाएं, नीचे और बाएं विशेषताओं द्वारा बनते हैं।

जिन दो वर्गों को परिभाषित किया गया है उनका माप समान है, लेकिन मान का उपयोग करते समय पहला छोटा है border-box संपत्ति के लिए box-sizing, पैडिंग, बॉर्डर और मार्जिन सामग्री के चारों ओर के बजाय ऑब्जेक्ट के अंदर खींचे जाते हैं, जैसा कि डिफ़ॉल्ट है। "बिग_बॉक्स" वर्ग में इसे इंगित नहीं किया गया है, इसलिए मान डिफ़ॉल्ट रूप से लिया जाता है content-box जिसके कारण पैडिंग, बॉर्डर और मार्जिन बताए गए आकार तक बढ़ जाते हैं width y height.

उपरोक्त उदाहरण में वर्ग मार्जिन मान ऊपर, दाएं, नीचे और बाएं पर 10 पिक्सेल है, इसलिए इसे एकल मान के रूप में व्यक्त किया जा सकता है margin:10px;. तीसरे पक्ष द्वारा विकसित कोड को समझने के लिए इस विकल्प को जानना बहुत दिलचस्प है, हालांकि, इस कार्यान्वयन प्रस्ताव में, इसे और अधिक पठनीय बनाने के लिए, मूल्यों को इंगित करने, दोहराने का सुझाव दिया गया है।

पिछले उदाहरण में तीन वर्ग एक ही परिणाम देते हैं, तथाकथित "लैकोनिक" की परिभाषा अधिक संक्षिप्त है और तथाकथित "वाचाल" की तुलना में कम है, जो पढ़ने में स्पष्टता जोड़ने से अधिक, सामान्य रूप से है किसी संपत्ति के कुछ आंशिक, ठोस पहलू को संशोधित करने के लिए उपयोग किया जाता है, विरासत द्वारा अन्य मूल्यों का पुन: उपयोग किया जाता है (वे कंटेनर द्वारा प्रदान किए जाते हैं या तत्व को निर्दिष्ट वर्गों में से एक द्वारा प्रदान किए जाते हैं)। यदि गुणों और अन्य परिस्थितियों को परिभाषित करने के इस तरीके के अतिरिक्त पाठ द्वारा सर्वर पर लगाया गया लोड, कोड को अधिक पठनीय बनाने के लिए, जैसे टिप्पणियाँ, आकार में वृद्धि और इसलिए ट्रैफ़िक, प्रासंगिक थे, तो यह संभव होगा इसे संसाधित करें (उदाहरण के लिए उदाहरण के लिए)। PHP इस भाषा से कोड जनरेशन रणनीति के भाग के रूप में।

बॉक्स मॉडल के आयाम मुख्य रूप से तत्वों को प्रभावित करते हैं <div> लेकिन इस व्यवहार को संपत्ति के साथ अन्य तत्वों पर थोपना संभव है display और मूल्य block. किसी तत्व को एक पंक्ति में पाठ की तरह प्रवाहित करने के लिए, उपयोग करें display:inline; और दोनों व्यवहारों, माप और प्रवाह को एक साथ जोड़ा जा सकता है display:inline-block;

मान none संपत्ति पर display, इसके समान इस्तेमाल किया display:none;, आपको वस्तुओं को छिपाने की भी अनुमति देता है, जो उन्हें "चालू" करने और उन्हें "बंद" करने का काम करेगा जावास्क्रिप्ट.

यदि किसी तत्व के आयाम निर्दिष्ट नहीं हैं, तो यह अपनी सामग्री को फिट करने के लिए आवश्यक सभी आयाम लेता है (वास्तव में, यह किसी आयाम को स्थापित करने की आवश्यकता के बिना सामग्री को फिट बनाता है)। लेकिन यदि आयाम इंगित किए गए हैं, तो ऐसा हो सकता है कि निहित वस्तुएं फिट न हों; ऐसे मामले में, आयामों का सम्मान नहीं किया जाता है, सभी सामग्री को दृश्यमान बनाने के लिए उन्हें बढ़ाया जाता है।

ताकि किसी अन्य निश्चित माप में शामिल तत्वों को आकार से अधिक होने पर काट दिया जाए, संपत्ति का उपयोग किया जाता है overflow मान के साथ hidden. मूल्य के साथ scroll, कंटेनर को ओवरफ्लो करने वाली वस्तुओं को भी काट दिया जाता है, जैसा कि होता है hidden लेकिन एक स्क्रॉल बार प्रदर्शित होता है जिसे हिलाने पर देखा जा सकता है। मूल्य auto सामग्री के आकार के आधार पर आवश्यक होने पर ही स्क्रॉल बार प्रदर्शित होता है।

आप एक न्यूनतम आकार भी स्थापित कर सकते हैं ताकि कंटेनर उस स्थान पर कब्जा कर लें, भले ही सामग्री को इसकी आवश्यकता न हो और सामग्री की मांग होने पर उनके आयामों को बढ़ाने के लिए सीमित किए बिना। वे संपत्तियाँ जो इस कार्य के प्रभारी हैं min-width एको और के लिए min-height लम्बे वाले के लिए. विपरीत अर्थ में, max-width अधिकतम चौड़ाई निर्धारित करें और max-height एक अधिकतम ऊँचाई जो रद्द हो जाती है width पहले ही height.

वेब पेज पर तत्वों का प्रवाह

आयत (ब्लॉक) जिन्हें हमने तत्वों के साथ परिभाषित किया है <div>, वे डिफ़ॉल्ट रूप से एक दूसरे के नीचे रखे जाते हैं। इस व्यवहार को बदलने के लिए आप संपत्ति का उपयोग कर सकते हैं float, इंगित करता है left o right एक मान के रूप में, ताकि वे क्रमशः बाएँ से दाएँ या दाएँ से बाएँ प्रवाहित हों। इसके विपरीत, एक वस्तु को दूसरे के दायीं या बायीं ओर "तैरने" से रोकने के लिए, आप संपत्ति का उपयोग कर सकते हैं clear मूल्यों के साथ left, right o both, जो बाएँ से दाएँ, दाएँ से बाएँ, या दोनों से प्रवाह को ओवरराइड करता है।

अन्य परिस्थितियों में जो होता है उसके विपरीत, प्रवाह उत्पन्न होता है float कंटेनर के आयामों को स्वचालित रूप से संशोधित नहीं करता है, इसलिए इसे इसके गुणों में शामिल करना उपयोगी है overflow:auto; जब कोई वस्तु अपने स्थान के कारण कंटेनर में ओवरफ्लो हो जाती है तो उसके आकार (ऊंचाई) को बदलने के लिए बाध्य करना float.

किसी तत्व की सामग्री के प्रवाह को कॉन्फ़िगर करने का दूसरा तरीका इसे संपत्ति के साथ कॉलम में विभाजित करना है column-count (जो फिलहाल साथ होना चाहिए -webkit-column-count और -moz-column-count) स्तंभों का आकार संकेतित (वास्तव में सुझाया गया) किया जा सकता है column-width (-webkit-column-width -moz-column-width) और स्तंभों के बीच अलगाव column-gap (-webkit-column-gap -moz-column-gap)

ताकि ब्लॉक विभाजित न हों और उनकी सामग्री कई कॉलमों में वितरित हो, आप इसका उपयोग कर सकते हैं display:inline-block; हालाँकि इसका तात्पर्य निश्चित रूप से है। कॉलम का एक हिस्सा अप्रयुक्त छोड़ दें।

Posicionamiento

वेब पेज पर तत्वों का स्थान स्थापित करने के लिए, सीएसएस कई पोजिशनिंग मोड का उपयोग करता है जो प्रत्येक तत्व के लिए अलग-अलग हो सकते हैं, अर्थात, एक ही वेबसाइट पर विभिन्न पोजिशनिंग मानदंडों को मिलाना संभव है।

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

• position:fixed; इसका उपयोग किसी ऑब्जेक्ट को ब्राउज़र विंडो में एक निश्चित स्थान पर रखने के लिए किया जाता है (उदाहरण के लिए मेनू की तरह)। तत्व का स्थान क्षैतिज रूप से निर्दिष्ट किया जाता है left o right क्रमशः बाएँ या दाएँ पर अलगाव निर्धारित करने के लिए top o bottom ब्राउज़र विंडो (व्यूपोर्ट) के किनारे के ऊपर या नीचे पृथक्करण के लिए।

  इसका और अन्य प्रकार की स्थिति का उपयोग करके, वस्तुएं ओवरलैप हो सकती हैं। ऑब्जेक्ट पहले खींचे गए (कोड में पहले परिभाषित)। एचटीएमएल) को बाद में तैयार किए गए (कोड में बाद में शामिल किए गए) द्वारा कवर किया जा सकता है एचटीएमएल). सामान्य क्रम को बदलने के लिए आप संपत्ति का उपयोग कर सकते हैं z-index, उच्चतम मूल्य वाली वस्तुएं z-index वे कम मूल्य वाले को कवर करते हैं।

• position:relative; गुणों द्वारा दर्शाए अनुसार तत्व को उसकी "सामान्य" स्थिति से स्थानांतरित करता है left o right क्षैतिज रूप से और top o bottom खड़ी है।

• position:absolute; तत्व को उस वस्तु के संबंध में एक निश्चित स्थिति में रखता है जिसमें वह शामिल है। इसका स्थान, पिछले मामलों की तरह, व्यक्त किया गया है left,right, top y bottom

  इस प्रकार की स्थिति का नाम पहली बार में भ्रमित करने वाला है, क्योंकि स्थिति उस वस्तु के संबंध में स्थापित की जाती है जो संपत्ति का उपयोग करने वाले से पदानुक्रमित रूप से बेहतर है, जो बहस का विषय है कि क्या यह निरपेक्ष है।

  यह याद रखना भी महत्वपूर्ण है कि जिस तत्व में वस्तुएँ समाहित हैं <div> हम पहले पदानुक्रमित स्तर पर इसका उपयोग करते हैं <body>, इसलिए, यदि <div> तुम क्या इस्तेमाल करते हो position:absolute; दूसरे में समाहित नहीं है, वेब पेज के संबंध में इसकी स्थिति "पूर्ण" होगी।

विशिष्ट मीडिया और विशेषताओं के लिए गुण (मीडिया प्रश्न)

सीएसएस आपको उपयोग किए गए डिवाइस के प्रकार (जैसे स्क्रीन, या प्रिंटर), इसके आयाम, इसके अभिविन्यास (ऊर्ध्वाधर या लैंडस्केप) या इसके रिज़ॉल्यूशन के आधार पर विभिन्न मीडिया या समर्थन के लिए एक ही स्टाइल शीट में अलग-अलग उपस्थिति को परिभाषित करने की अनुमति देता है। यह किसी संदर्भ के लिए सबसे उपयुक्त तरीके से, उसी वेब पेज को प्रदर्शित करने में सक्षम होता है।

मीडिया को संदर्भित करने के लिए, उपयोग करें @media उसी तरह जैसे फ़ॉन्ट के लिए पहले ही समझाया जा चुका है @font-face, ब्रेसिज़ में संलग्न ({ y }) विभिन्न तत्वों की परिभाषाएँ: लेबल एचटीएमएल, कक्षाएं, पहचानकर्ता...

मीडिया के प्रकार उपलब्ध हैं CSS3 ध्वनि: all, किसी भी मीडिया (सभी) को संदर्भित करने के लिए, screen किसी भी प्रकार की स्क्रीन के लिए (पुराने संस्करण) सीएसएस उन्होंने टीवी और कंप्यूटर मॉनीटर के बीच अंतर किया) print प्रिंटर आउटपुट के लिए और speech ऑडियो वेब पाठकों के लिए जो ध्वनि सिंथेसाइज़र के साथ जानकारी की व्याख्या करते हैं।

ऊपर दिए गए उदाहरण में, टेक्स्ट क्लास के तत्वों की स्क्रीन पर काली पृष्ठभूमि और सफेद टेक्स्ट है, लेकिन वे सफेद पृष्ठभूमि और काले टेक्स्ट के साथ मुद्रित होते हैं।

उदाहरण के लिए, उपलब्ध रिज़ॉल्यूशन या व्यूपोर्ट अनुपात के आधार पर संपत्तियों के विभिन्न सेटों को परिभाषित करने के लिए मीडिया पर शर्तें लगाई जा सकती हैं। इन स्थितियों और साधनों को स्वयं तार्किक संचालन के साथ बनाया जा सकता है and, not y only यह मांग करना कि आप क्रमशः कई का अनुपालन करते हैं, कि आप अनुपालन नहीं करते हैं या केवल तब करते हैं जब आप अनुपालन करते हैं।

उपलब्ध स्थितियों में से, हम उन्हें विशेष रूप से दिलचस्प पाते हैं max-width (अधिकतम विंडो चौड़ाई), max-height (अधिकतम विंडो ऊंचाई), min-width (न्यूनतम विंडो चौड़ाई), min-height (न्यूनतम खिड़की ऊंचाई), orientation (अभिविन्यास, जो हो सकता है landscape, परिदृश्य, या portrait, खड़ा), max-resolution (अधिकतम रिज़ॉल्यूशन) dpi, डॉट प्रति इंच, या अंदर dpcm, अंक प्रति सेंटीमीटर) और min-resolution (न्यूनतम रिज़ॉल्यूशन, में भी dpi o dpcm).

पिछले उदाहरण में, हम पृष्ठभूमि रंग को परिभाषित करके शुरू करते हैं ताकि, सभी मीडिया में, मुख्य_ब्लॉक वर्ग के तत्वों का पृष्ठभूमि रंग #CCCCCC हो। जब स्क्रीन पर प्रदर्शित किया जाता है और विंडो कम से कम 320 पिक्सेल चौड़ी होती है, तो बाएँ और दाएँ मार्जिन स्वचालित होंगे (ब्लॉक के केंद्र में) और तत्व की चौड़ाई 300 पिक्सेल होगी। यदि स्क्रीन रिज़ॉल्यूशन 640 पिक्सेल है, तो ब्लॉक की चौड़ाई 620 पिक्सेल होगी। चूंकि दूसरी मीडिया परिभाषा में मार्जिन जानकारी शामिल नहीं है और जो डिवाइस दूसरी शर्त को पूरा करते हैं वे पहली शर्त को भी पूरा करेंगे, क्षैतिज मार्जिन अभी भी स्वचालित होगा।

अंत में, उदाहरण में पृष्ठभूमि का रंग बदल दिया गया है ताकि प्रिंटआउट में यह सफेद हो।

विभिन्न मीडिया के लिए शैलियों को परिभाषित करने का सामान्य तरीका आमतौर पर सामान्य शैलियों से शुरू होता है, आमतौर पर रंग और फ़ॉन्ट, इसके बाद सबसे अधिक प्रतिबंधात्मक ज्यामिति (पिक्सेल की सबसे कम संख्या वाले उपकरणों की माप) आमतौर पर स्मार्टफोन और टैबलेट के लिए होती है, इसके अलावा यह जानना महत्वपूर्ण होगा कि उनका उपयोग लंबवत या क्षैतिज रूप से किया जाता है या नहीं orientation और निश्चित रूप से इसका समाधान भी min-resolution. फिर बड़ी स्क्रीन के लिए अलग-अलग आकार दर्शाए जाते हैं, और यह आमतौर पर प्रिंटिंग और वॉयस मीडिया के साथ समाप्त होता है, जिसे IoT ग्राफिक्स के उदाहरण में छोड़ दिया गया है।

उपयोग @media आयाम, रिज़ॉल्यूशन और ओरिएंटेशन जैसी स्थितियां लागू करने से डिज़ाइनर को एक एकल वेब पेज बनाने की अनुमति मिलती है, जो विभिन्न शैलियों के साथ, प्रत्येक डिवाइस के लिए सबसे उपयुक्त लगेगा। इस व्यवहार को आमतौर पर प्रतिक्रियाशील डिज़ाइन कहा जाता है; अनुकूलनीय डिज़ाइन, अत्यंत निःशुल्क अनुवाद में।

एसवीजी ग्राफिक्स कंटेनर के लिए सीएसएस

अब तक जो समझाया गया है, उससे अब उन शैलियों को परिभाषित करना संभव है एसवीजी ग्राफिक्स HTML कंटेनर जिसके साथ IoT से जुड़े सेंसर की स्थिति का प्रतिनिधित्व करना है। निम्नलिखित कोड में प्रस्ताव शामिल है, टिप्पणी की गई है, कॉलम में वितरण जो लेखों की श्रृंखला के प्रस्ताव में उपयोग किए जाने वाले ग्राफ़ की तुलना में अधिक संख्या में ग्राफ़ से मेल खाता है, ताकि इसे अन्य मामलों में पुन: उपयोग किया जा सके।

नीचे आप देख सकते हैं कि ये शैलियाँ कैसी दिखेंगी। एसवीजी ग्राफ़िक्स के लिए प्रस्तावित कंटेनर से HTML कोड पिछले लेख से.

इस शृंखला का अगला लेख बताता है एसवीजी के साथ कैसे चित्र बनाएं इंटरनेट ऑफ थिंग्स (IoT) से जुड़े सेंसर की स्थिति के डेटा ग्राफ़.