CSS Units
CSS க்கு நீளத்தை வெளிப்படுத்த பல்வேறு அலகுகள் உள்ளன.
பல CSS பண்புகள் "நீளம்" மதிப்புகளை எடுக்கும், உதாரணமாக width, margin, padding, font-size, முதலியன.
நீளம் என்பது ஒரு எண்ணைத் தொடர்ந்து ஒரு நீள அலகு ஆகும், உதாரணமாக 10px, 2em, முதலியன.
Example
px (pixels) பயன்படுத்தி வெவ்வேறு நீள மதிப்புகளை அமைக்கவும்:
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}குறிப்பு:
எண்ணுக்கும் அலகுக்கும் இடையே வெள்ளை இடம் தோன்றக்கூடாது. இருப்பினும், மதிப்பு 0 ஆக இருந்தால், அலகைத் தவிர்க்கலாம். சில CSS பண்புகளுக்கு, எதிர்மறை நீளங்கள் அனுமதிக்கப்படுகின்றன.
Unit Types
இரண்டு வகையான நீள அலகுகள் உள்ளன: முழுமையான (absolute) மற்றும் உறவின (relative).
Absolute Lengths
முழுமையான நீள அலகுகள் நிலையானவை மற்றும் இவற்றில் ஏதேனும் ஒன்றில் வெளிப்படுத்தப்பட்ட நீளம் சரியாக அந்த அளவில் தோன்றும்.
திரை அளவுகள் மிகவும் வேறுபடுவதால், திரையில் பயன்படுத்த முழுமையான நீள அலகுகள் பரிந்துரைக்கப்படுவதில்லை. இருப்பினும், வெளியீடு ஊடகம் அறியப்பட்டால், அவை பயன்படுத்தப்படலாம், உதாரணமாக அச்சு தளவமைப்புக்கு.
Relative Lengths
உறவின நீள அலகுகள் மற்றொரு நீள பண்புக்கு தொடர்புடைய ஒரு நீளத்தை குறிப்பிடுகின்றன. உறவின நீள அலகுகள் வெவ்வேறு ரெண்டரிங் ஊடகங்களுக்கு இடையில் சிறப்பாக அளவிடப்படுகின்றன.
Absolute Lengths
| Unit | Description | Example |
|---|---|---|
| cm | centimeters | 5cm |
| mm | millimeters | 10mm |
| in | inches (1in = 96px = 2.54cm) | 2in |
| px * | pixels (1px = 1/96th of 1in) | 16px |
| pt | points (1pt = 1/72 of 1in) | 12pt |
| pc | picas (1pc = 12 pt) | 1pc |
குறிப்பு:
* பிக்சல்கள் (px) காணும் சாதனத்துடன் தொடர்புடையவை. குறைந்த-தீர்மான சாதனங்களுக்கு, 1px என்பது காட்சியின் ஒரு சாதன பிக்சல் (புள்ளி) ஆகும். அச்சுப்பொறிகள் மற்றும் உயர் தீர்மான திரைகளுக்கு 1px என்பது பல சாதன பிக்சல்களைக் குறிக்கிறது.
Relative Lengths
| Unit | Description | Example |
|---|---|---|
| em | தனிமத்தின் font-size உடன் தொடர்புடையது (2em என்பது தற்போதைய எழுத்துரு அளவின் 2 மடங்கு) | 2em |
| ex | தற்போதைய எழுத்துரின் x-height உடன் தொடர்புடையது (அரிதாக பயன்படுத்தப்படுகிறது) | 1ex |
| ch | "0" (பூஜ்யம்) இன் அகலத்துடன் தொடர்புடையது | 20ch |
| rem | ரூட் உறுப்பின் font-size உடன் தொடர்புடையது | 1.5rem |
| vw | பார்வைத்துளியின்* அகலத்தில் 1% உடன் தொடர்புடையது | 50vw |
| vh | பார்வைத்துளியின்* உயரத்தில் 1% உடன் தொடர்புடையது | 100vh |
| vmin | பார்வைத்துளியின்* சிறிய பரிமாணத்தில் 1% உடன் தொடர்புடையது | 10vmin |
| vmax | பார்வைத்துளியின்* பெரிய பரிமாணத்தில் 1% உடன் தொடர்புடையது | 10vmax |
| % | பெற்றோர் உறுப்புடன் தொடர்புடையது | 50% |
உதவிக்குறிப்பு:
em மற்றும் rem அலகுகள் சரியாக அளவிடக்கூடிய தளவமைப்பை உருவாக்குவதில் நடைமுறை ரீதியாக பயனுள்ளவை!
* பார்வைத்துளி = உலாவி சாளர அளவு. பார்வைத்துளி 50cm அகலமாக இருந்தால், 1vw = 0.5cm.
Browser Support
அட்டவணையில் உள்ள எண்கள் நீள அலகை முழுமையாக ஆதரிக்கும் முதல் உலாவி பதிப்பைக் குறிக்கிறது.
| Length Unit | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
| rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
| vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
| vmin | 20.0 | 12.0 | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | 16.0 | 19.0 | 7.0 | 20.0 |