வெவ்வேறு வண்ணங்களுடன் இரட்டைக் கரையை எவ்வாறு சேர்ப்பது?
CSS ஐப் பயன்படுத்தி எந்த வடிவத்திலும் இரட்டைக் கரையைச் சேர்க்க, ' : முன் ” தேர்வாளர் பிரபலமானவர். இரு எல்லைகளின் வண்ணங்களையும் தனித்துவமாக மாற்றுகிறது. வெவ்வேறு வண்ணங்களுடன் இரட்டை எல்லையைச் சேர்க்க, படிப்படியான செயல்முறை கீழே கொடுக்கப்பட்டுள்ளது:
படி 1: Div Element ஐச் சேர்த்து வகுப்புகளை ஒதுக்கவும்
HTML கோப்பில்,
குறிச்சொல்லின் உள்ளே div உறுப்பைச் சேர்த்து, ஒரு “ஐ ஒதுக்கவும் வர்க்கம் '' என்ற பெயருடன் இரட்டை எல்லை ”. பயனர்கள் தங்கள் சொந்த வகுப்பு பெயரையும் உருவாக்கலாம்:< div வர்க்கம் = 'இரட்டை எல்லை' >
< / div >
படி 2: ஸ்டைல் டேக்கை உருவாக்கவும்
இந்த கட்டத்தில், வகுப்பிற்கான ஒரு பகுதியை உருவாக்கவும் ' இரட்டை எல்லை ” மற்றும் அதை ஒரு பிரதியாக உருவாக்கவும் : முன் ” தேர்வாளர். இந்த வழியில், CSS பண்புகள் எங்கள் வகுப்புகளுக்குப் பயன்படுத்தப்படும்:
< பாணி >
.இரட்டை- எல்லை {
}
.இரட்டை- எல்லை : முன் {
}
< / பாணி >
படி 3: வகுப்பில் ஸ்டைல்களைச் சேர்க்கவும்
CSS பண்புகள் ' என்ற வகுப்பைக் கொண்ட div உறுப்புக்கு பொருந்தும். இரட்டை எல்லை ”. பின்வரும் பாணிகள் கீழே குறிப்பிடப்பட்டுள்ளன:
.இரட்டை- எல்லை {
பின்னணி - நிறம் : #சிசிசி;
எல்லை : 4px திட பச்சை;
திணிப்பு: 50px;
அகலம் : 16px;
உயரம் : 16px;
நிலை: உறவினர்;
விளிம்பு: 0 ஆட்டோ;
}
CSS பண்புகளின் விளக்கம் கீழே கொடுக்கப்பட்டுள்ளது:
- முதலில், சேர் ' பின்னணி நிறம் 'இது சாம்பல் மற்றும்' எல்லை ”4px எடை மற்றும் பச்சை நிறம்.
- ' திணிப்பு அனைத்து பக்கங்களிலும் இருந்து 50px இன் உள் இடத்தை உருவாக்க 50px.
- இறுதியில், ' அகலம் 'மற்றும்' உயரம்' 16px. மேலும், ' விளிம்பு ” என்பது 0 ஆட்டோ, அதாவது மேல் மற்றும் கீழ் ஓரங்கள் பூஜ்ஜியமாகவும் இடதுபுறமாகவும் இருக்கும்.
வலைப்பக்கம் இதுபோல் தெரிகிறது:
எல்லை 'div' க்கு பயன்படுத்தப்பட்டதை வெளியீடு காட்டுகிறது.
படி 4: CSS தேர்வாளரைச் சேர்த்தல்
இப்போது, ஸ்டைல் டேக்கில் உள்ள இரண்டாவது பெட்டியை நோக்கி நகர்த்தவும், அதில் ' : முன் ” தேர்வாளர் இணைக்கப்பட்டு, கீழே உள்ள குறியீட்டை எழுதவும்:
.இரட்டை- எல்லை : முன் {பின்னணி : இல்லை;
எல்லை : 4px திட நீலம்;
உள்ளடக்கம் : '' ;
நிலை: முழுமையான;
மேல்: 4px;
இடது: 4px;
வலது: 4px;
கீழே: 4px;
}
பண்புகள் கீழே விளக்கப்பட்டுள்ளன:
- பயன்படுத்த ' நிலை 'ஒரு தனிமத்தின் நிலையை நிலைப்படுத்துவதற்கான சொத்து.
- அதன் பிறகு, ' மேல், இடது, வலது மற்றும் கீழ் ” என்பது அசல் ஒன்றிலிருந்து புதிதாக உருவாக்கப்பட்ட பொருளின் விளிம்பை வரையறுக்கிறது.
- ஒரு CSS தேர்வாளர் “: முன் ” தேர்ந்தெடுக்கப்பட்ட உறுப்புக்கு முன்னால் உள்ளடக்கத்தைச் சேர்க்கிறது.
வெளியீடு இப்படி இருக்கும்:
வெவ்வேறு வண்ணங்களைப் பயன்படுத்தி இரட்டை எல்லையை எவ்வாறு சேர்க்க முடியும்.
முடிவுரை
இரட்டைக் கரையைச் சேர்க்க, முதலில் ஒரு div உறுப்பை உருவாக்கி அதை வகுப்பிற்கு ஒதுக்கவும். பின்னர், CSS ஐச் சேர்க்கவும். நிலை 'உறவினருக்கு அமைக்கப்பட வேண்டிய சொத்து. அதைத் தொடர்ந்து, CSS தேர்வியை அதில் “:before” ஐச் சேர்க்கவும், இதனால் பயனர்கள் தேர்ந்தெடுத்த உறுப்புக்கு முன் உள்ளடக்கத்தைச் சேர்க்க முடியும். இந்த வழிகாட்டி பல்வேறு வண்ணங்களுடன் இரட்டை எல்லைகளின் பயன்பாட்டை நிரூபித்துள்ளது.