CSS அகலப் பண்பு உறுப்புகளின் உள்ளடக்கப் பகுதியின் அகலத்தை வரையறுக்கிறது. இந்த பகுதி ஒரு தனிமத்தின் எல்லை, திணிப்பு மற்றும் விளிம்பு ஆகியவற்றுக்கு இடையே உள்ள இடைவெளியாகும். மேலும், மதிப்பு கொண்ட CSS அகல சொத்து ' பொருத்தம்-உள்ளடக்கம் 'உறுப்பின் அகலத்தை உள்ளடக்கத்திற்கு ஏற்ப சரிசெய்யும்.
இந்த ஆய்வு CSS அகலப் பண்புகளை மதிப்பு பொருத்தம்-உள்ளடக்கத்துடன் விளக்கும்.
ஃபிட்-உள்ளடக்க மதிப்புடன் CSS அகல சொத்தை எவ்வாறு பயன்படுத்துவது?
பொருத்தம்-உள்ளடக்க மதிப்புடன் CSS அகலப் பண்புகளைப் பயன்படுத்துவதற்கான நோக்கத்திற்காக, கொடுக்கப்பட்ட தொடரியல் பார்க்கவும்:
அகலம்: பொருத்தம்-உள்ளடக்கம்
உதாரணமாக
HTML இல், ஒரே வகுப்பின் பெயருடன் மூன்று பிரிவு கூறுகளைச் சேர்க்கவும். பெட்டி 'மற்றும் மூன்று வெவ்வேறு வகுப்புகள்' நிறம்-1 ”,” நிறம்-2 ', மற்றும் ' நிறம்-3 ', முறையே. வலைப்பக்கத்தில் உள்ளடக்கத்தைச் சேர்க்க, ஒவ்வொரு டிவியிலும்
உறுப்பைச் சேர்க்கவும்:
< div வர்க்கம் = 'பெட்டி நிறம்-1' >
< ப > CSS அகல பொருத்தம் உள்ளடக்கம் ப >
div >
< div வர்க்கம் = 'பெட்டி வண்ணம்-2' >
< ப > வணக்கம் உலகம் ! ப >
div >
< div வர்க்கம் = 'பெட்டி நிறம்-3' >
< ப > நம்பிக்கையை வளர்ப்பதன் மூலம் குழுப்பணி தொடங்குகிறது. நாங்கள் ஒரு குழு வேலை செய்கிறோம் க்கான ஒரு பொதுவான பணி. ப >
div >
HTML குறியீட்டின் வெளியீடு இங்கே:
இதுவரை, நாங்கள் HTML பக்கத்தைப் பற்றி விவாதித்தோம். இப்போது, அடுத்த பகுதியில், HTML உறுப்புகளை சிறப்பாகக் காட்ட, வெவ்வேறு CSS பாணிகளைப் பயன்படுத்துவோம். தற்போதைய எடுத்துக்காட்டில், 'இன் நடத்தையைப் பார்ப்போம். அகலம் 'மதிப்பு கொண்ட சொத்து' பொருத்தம்-உள்ளடக்கம் ” CSS இல்.
பாணி 'பெட்டி' div
.பெட்டி {அகலம்: பொருத்தம்-உள்ளடக்கம்;
உயரம்: 50px;
நிறம்: பேய் வெள்ளை;
திணிப்பு: 6px;
விளிம்பு: 2px;
எழுத்துரு அளவு: 18px;
}
' .பெட்டி ” என்பது div வகுப்பு பெட்டியைக் குறிக்கிறது. அதற்குப் பயன்படுத்தப்படும் பண்புகள் கீழே உள்ளன:
-
- ' அகலம் 'மதிப்பு கொண்ட சொத்து' பொருத்தம்-உள்ளடக்கம் ” இருக்கும் இடத்தைப் பயன்படுத்துகிறது, ஆனால் அது உள்ளடக்கத்தை மீறாது.
- ' உயரம் ” என்பது தனிமத்தின் உயரத்தை நிர்ணயிக்கும் பண்பு.
- ' நிறம் 'உறுப்பின் எழுத்துரு நிறத்தை வரையறுக்கிறது.
- ' திணிப்பு 'சொத்து உறுப்புகளின் எல்லைக்குள் அல்லது உள்ளடக்கத்தைச் சுற்றி இடத்தை உருவாக்குகிறது.
- ' விளிம்பு 'உறுப்பைச் சுற்றியுள்ள இடத்தை தீர்மானிக்கிறது.
- ' எழுத்துரு அளவு 'பண்பு எழுத்துரு அளவை தீர்மானிக்கிறது.
உடை 'வண்ணம்-1' பிரிவு
.நிறம்- 1 {பின்னணி நிறம்: #00ABB3;
}
' பின்னணி நிறம் 'சொத்து' என அமைக்கப்பட்டுள்ளது .நிறம்-1 ” div.
உடை 'வண்ணம்-2' பிரிவு
.நிறம்- 2 {பின்னணி நிறம்: #083AA9;
}
உடை 'வண்ணம்-3' div
பின்னணி நிறம்: #4C6793;
}
உறுப்பின் அகலம் உள்ளடக்கத்திற்கு சமமாக அமைக்கப்பட்டிருப்பதைக் காணலாம்:
அது அருமை! CSS இன் பயன்பாட்டை நாங்கள் வெற்றிகரமாகக் கற்றுக்கொண்டோம். அகலம் 'மதிப்பு கொண்ட சொத்து' பொருத்தம்-உள்ளடக்கம் ”.
முடிவுரை
CSS அகலப் பண்பு பல மதிப்புகளைப் பயன்படுத்த அனுமதிக்கிறது. இந்த மதிப்புகள் சதவீதம், பிக்சல்கள் அல்லது அதற்கு மேற்பட்டவை. உள்ளடக்கத்திற்கு ஏற்ப அதை அமைக்க, ' பொருத்தம்-உள்ளடக்கம் ” மதிப்பை அமைக்கலாம். இந்த இடுகை CSS அகலப் பண்புகளை மதிப்பு பொருத்தம்-உள்ளடக்கத்தை நடைமுறை விளக்கத்துடன் விவரித்துள்ளது.