இந்த வழிகாட்டியில், CSS ஐப் பயன்படுத்தி உள்ளீட்டு புலத்தை எவ்வாறு முடக்குவது என்பது பற்றிய புரிதலைப் பெறுவோம். எனவே, தொடங்குவோம்!
CSS ஐப் பயன்படுத்தி உள்ளீட்டு புலத்தை எவ்வாறு முடக்குவது?
CSS இல், '' ஐப் பயன்படுத்தி நிகழ்வுகள் முடக்கப்படுகின்றன. சுட்டி-நிகழ்வுகள் ”சொத்து. எனவே, முதலில், சுட்டி-நிகழ்வுகளின் சொத்து பற்றி அறிந்து கொள்ளுங்கள்.
'சுட்டி-நிகழ்வுகள்' CSS சொத்து என்றால் என்ன?
' சுட்டி-நிகழ்வுகள் ” தொடுதல் நிகழ்வுக்கு HTML உறுப்புகள் எவ்வாறு பதிலளிக்கின்றன அல்லது செயல்படுகின்றன, அதாவது கிளிக் அல்லது தட்டுதல் நிகழ்வுகள், செயலில் அல்லது மிதவை நிலைகள் மற்றும் கர்சர் தெரியும் அல்லது இல்லையா என்பதைக் கட்டுப்படுத்தவும்.
தொடரியல்
சுட்டி-நிகழ்வுகளின் தொடரியல் பின்வருமாறு கொடுக்கப்பட்டுள்ளது:
சுட்டி-நிகழ்வுகள் : ஆட்டோ | எதுவும் இல்லை ;
மேலே குறிப்பிடப்பட்ட சொத்து இரண்டு மதிப்புகளை எடுக்கும், அதாவது ' ஆட்டோ 'மற்றும்' எதுவும் இல்லை ”:
- ஆட்டோ: இயல்புநிலை நிகழ்வுகளைச் செய்ய இது பயன்படுகிறது.
- எதுவும் இல்லை: நிகழ்வுகளை முடக்க இது பயன்படுகிறது.
கொடுக்கப்பட்ட உதாரணத்தை நோக்கிச் செல்லவும்.
எடுத்துக்காட்டு 1: CSS ஐப் பயன்படுத்தி உள்ளீட்டு புலத்தைச் சேர்த்தல்
இந்த எடுத்துக்காட்டில், முதலில், நாம் ஒரு div ஐ உருவாக்கி அதில் ஒரு தலைப்பு மற்றும் உள்ளீட்டு புலத்தைச் சேர்ப்போம். பின்னர், உள்ளீட்டு வகையை “ என அமைக்கவும் உரை 'அதன் மதிப்பை' என அமைக்கவும் உங்கள் பெயரை உள்ளிடவும் ”.
HTML
< div >< மையம் >
< h1 > உள்ளீட்டு புலத்தை முடக்கு < / h1 >
< உள்ளீடு வகை = 'உரை' மதிப்பு = 'உங்கள் பெயரை உள்ளிடவும்' >
< / மையம் >
< / div >
அதன் பிறகு, CSS க்குச் சென்று, அதன் பின்னணி நிறத்தை “ என அமைப்பதன் மூலம் div ஐ ஸ்டைல் செய்யவும். rgb(184, 146, 99) 'மற்றும் உயரம்' 150px ”.
CSS
div {பின்னணி - நிறம் : rgb ( 184 , 146 , 99 ) ;
உயரம் : 150px;
}
மேலே விவரிக்கப்பட்ட குறியீட்டின் வெளியீடு கீழே கொடுக்கப்பட்டுள்ளது. எங்கள் உள்ளீட்டு புலம் தற்போது செயலில் இருப்பதையும் பயனரின் உள்ளீட்டை ஏற்றுக்கொள்வதையும் இங்கே காணலாம்:
இப்போது, '' மதிப்பைப் பயன்படுத்தும் அடுத்த பகுதிக்குச் செல்லவும். சுட்டி-நிகழ்வுகள் 'சொத்து' எதுவும் இல்லை ”.
எடுத்துக்காட்டு 2: CSS ஐப் பயன்படுத்தி உள்ளீட்டு புலத்தை முடக்குதல்
நாங்கள் இப்போது பயன்படுத்துவோம் ' உள்ளீடு HTML கோப்பில் சேர்க்கப்பட்ட உறுப்பை அணுகவும் மற்றும் சுட்டி-நிகழ்வுகளின் மதிப்பை அமைக்கவும் ' எதுவும் இல்லை ”:
உள்ளீடு {சுட்டி-நிகழ்வுகள் : எதுவும் இல்லை ;
}
மேலே கூறப்பட்ட சொத்தை நீங்கள் செயல்படுத்தியதும் ' சுட்டி-நிகழ்வுகள் 'உடன்' எதுவும் இல்லை ” மதிப்பு, உள்ளீட்டு புலத்தின் உரை திருத்த முடியாததாக இருக்கும், இது எங்கள் உள்ளீட்டு புலம் முடக்கப்பட்டிருப்பதைக் குறிக்கிறது:
அவ்வளவுதான்! CSS ஐப் பயன்படுத்தி உள்ளீட்டு புலத்தை முடக்கும் முறையை நாங்கள் விளக்கியுள்ளோம்.
முடிவுரை
ஒரு HTML இல் உள்ளீட்டு புலத்தை முடக்க, ' சுட்டி-நிகழ்வுகள் 'CSS இன் சொத்து பயன்படுத்தப்படுகிறது. அவ்வாறு செய்ய, உள்ளீட்டு புலத்தைச் சேர்த்து, சுட்டி-நிகழ்வுகளின் மதிப்பை “ என அமைக்கவும் எதுவும் இல்லை ” உள்ளீட்டு புலத்தை முடக்க. இந்த வழிகாட்டியில், CSS ஐப் பயன்படுத்தி உள்ளீட்டு புலத்தை முடக்கும் முறையை நாங்கள் விளக்கி, அதற்கான உதாரணத்தையும் வழங்குகிறோம்.