इस Tutorial में हम आपको CSS Measurement Units की पूरी जानकारी देंगे. CSS Units को आसानी से समझाने के लिए हमने इस Tutorial को निम्न छोटे-छोटे भागों में बांटा हैं.
Table of Content
CSS Measurement Units का परिचय
CSS Measurement Units का अर्थ होता हैं कि आप किस Format में Units की Value Define करना चाहते हैं. CSS, Property Values को Define करने के लिए अलग-अलग प्रकार की Units Provide कराती हैं. हम CSS Property के अनुसार उसकी Value Define करते हैं. और Value के अनुसार Value Units को Declare करते हैं.
CSS Measurement Units के विभिन्न प्रकार
आप Property के अनुसार उपलब्ध Value Type के अनुसार Measurement Units का चुवाव कर सकते हैं. आप Number, Percentage आदि Units में अपनी Value Declare कर सकते हैं. CSS के द्वार आप मुख्यत: दो प्रकार की Measurement Units Available हैं.
CSS Measurement Units के दो प्रकार:
- Absolute Measurement Units
- Relative Measurement Units
1. Absolute Measurement Units
Absolute Units Fixed होती हैं. इन्हे जैसा Declare किया जाता हैं. ये Exact उसी Size में Appear होती हैं. ये Units Adjustable नहीं होती हैं.
Absolute Units को अधिकतर वहीं Declare किया जाता हैं, जहाँ Output Medium के बारे में जानकारी होती हैं जैसे Print. शायद इसलिए इन्हे Screen के लिए Declare नहीं किया जाता हैं.
Absolute Units से आप width, height, margin, padding, font-size आदि Properties की Values को Declare कर सकते हैं. इन्हे अधिकतर Numbers में Declare किया जाता हैं. ये निम्नलिखित होती हैं.
- cm – cm की Full Form Centimeter होती हैं. cm Units को Numbers में Declare किया जाता हैं. एक cm=37.79px होता हैं. जैसे, div {margin: 2cm;}
- mm – mm की Full Form Millimeter होती हैं. mm Units को भी Numbers में Declare किया जा सकता हैं. जैसे, p {word-spacing: 12mm;}
- in – in की Full Form Inches होता हैं. एक in=96px=2.54cm होता हैं. जैसे, p {word-spacing: .12in;}
- px – px की Full Form Pixel होती हैं. 1 px Unit 1 in का 96वाँ भाग होता हैं. जैसे, p {padding: 12px;}
- pt – pt की Full Form Points होती हैं. यह 1 in का 72वाँ भाग होता हैं. जैसे, p {font-size: 16pt;}
- pc – pc की Full Form Picas होती हैं. 1 pc 12 pt के बराबर होता हैं. जैसे, p {font-size: 24pc;}
2. Relative Measurement Units
Relative Measurement Units Fixed नही होती हैं. और Output Device के अनुसार अपना size Adjust कर सकती हैं. इसलिए इन्हे Adjustable Units भी कहते हैं.
Relative Units से आप width, height, font-size, border, color, padding, margin आदि Values को Declare कर सकते हैं. इन Units को Numbers और Percentage में लिखा जा सकता हैं. नीचे Relative Units के बारे में बताया जा रहा है.
- em– em Unit का Size Declared Font-size के Relative होता हैं. अगर Declared Font-size 16 px है तो em की Value इसकी दो गुनी 2x16px यानि 32px होगी.
- ex– यह Unit Current Font की x-height के Relative होती हैं. और x-height को Lowercase Font से निर्धारित किया जाता हैं. इस Unit का इस्तेमाल बहुत ही कम होता हैं.
- ch– ch की Full Form Character Unit होती हैं. इसे भी बहुत ही कम इस्तेमाल किया जाता हैं.
- rem– यह Unit em के समान ही कार्य करती हैं. लेकिन, यह Browser के Default Font-size के Relative Length को Measure करती हैं.
- vw– vw की Full Form Viewport Width होती हैं. यह Viewport Width के 1% Relative होती हैं.
- vh– vh की Full Form Viewport Height होती हैं. यह Viewport Height के 1% Relative होती हैं.
- vmin– vmin की Full Form Viewport Minimum होती हैं. यह Viewport की Smaller Dimension की 1% Relative होती हैं.
- vmax– vmax की Full Form Viewport Maximum होती हैं. यह Viewport की Larger Dimension की 1% Relative होती हैं.
- %– इसे Percentage Unit कहते हैं. इसके द्वारा भी Properties Values को Declare किया जाता हैं. यह Parent Element के Relative होती हैं.
आपने क्या सीखा?
इस Tutorial में हमने आपको CSS Measurement Units के बारे में पूरी जानकारी दी हैं. आपने विभिन्न प्रकार की CSS Measurement Units के बारे में जाना हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.
#BeDigital
Hello
Mein aap ka tutorial css ko aapni wabsite paste karna chahtaa hu