குறியீடு மீண்டும் வருவதைத் தவிர்க்க, HTML மற்றும் CSS இல் பல வகுப்புகளைப் பயன்படுத்துகிறோம். CSS மூலம், நாம் இரு வகுப்புகளையும் ஒன்றாக வரையறுத்து ஸ்டைல் செய்யலாம் மற்றும் வெவ்வேறு வகுப்பு ஐடிகளை ஒதுக்குவதன் மூலம் ஒரு உறுப்பில் பல வகுப்புகளைப் பயன்படுத்தலாம். ஒரு HTML உறுப்புக்கு பல வகுப்புகளைச் சேர்க்க, இடத்தைப் பிரிக்கப்பட்ட தொடரியல் மூலம் இந்த அணுகுமுறையைப் பின்பற்றலாம்.
இந்த கட்டுரையில், ஒரு உறுப்புக்கு பல வகுப்புகளை எவ்வாறு சேர்ப்பது என்பதைக் கற்றுக்கொள்வோம்.
CSS இல் பல வகுப்புகளை எவ்வாறு பயன்படுத்துவது?
ஒரு உறுப்பில் இரண்டு அல்லது அதற்கு மேற்பட்ட வகுப்புகளைப் பயன்படுத்த, ஒவ்வொரு வகுப்பு ஐடியும் ஒரு இடைவெளியால் பிரிக்கப்படும்.
ஒரு உறுப்பில் பல வகுப்புகளைப் பயன்படுத்த, பின்வரும் தொடரியல் பின்பற்ற வேண்டும்:
< h1 வகுப்பு = 'வகுப்பு_1 வகுப்பு_2 வகுப்பு_3' > ஒப்படைக்கும்... ம >
ஒரு HTML உறுப்பில், ஒன்றுக்கும் மேற்பட்ட வகுப்புகளை இடைவெளியுடன் பிரிப்பதன் மூலம் அவற்றைச் சேர்க்கலாம். உங்கள் வசதிக்காக, இங்கே ஒரு உதாரணம்.
எடுத்துக்காட்டு: CSS இல் பல வகுப்புகளைப் பயன்படுத்துதல்
கீழே உள்ள எடுத்துக்காட்டில், நாங்கள் உருவாக்குவோம்:
-
குறிச்சொல்லைப் பயன்படுத்தி ஒரு தலைப்பு மற்றும் வகுப்பின் பெயரை ஒதுக்கவும் ' தலைப்பு ”.
- அடுத்து, நாம் மற்றொரு தலைப்பை உருவாக்கி அதை இரண்டு வெவ்வேறு வகுப்புகளுக்கு ஒதுக்குவோம்: ' தலைப்பு 'மற்றும்' வரி ”. இந்த வகுப்பு ஐடிகள் இடைவெளியால் பிரிக்கப்படுகின்றன:
HTML
h1 >
< h1 வர்க்கம் = 'தலைப்பு வரி' >
பல வகுப்புகள் உள்ளே ஒரு உறுப்பு
h1 >
இப்போது, CSS கோப்பிற்குச் சென்று, கீழே பட்டியலிடப்பட்டுள்ள சில CSS பண்புகளைப் பயன்படுத்துவோம்:
- rgb() செயல்பாட்டைப் பயன்படுத்தி தலைப்புக்கு பின்னணி நிறத்தை ' (69, 51, 151) ”.
- எழுத்துரு பாணியை அமைக்கவும் ' சாய்வு ” என்ற தலைப்புக்கு.
HTML வகுப்பில், முதல் தலைப்பு வகுப்பின் பெயரைப் பயன்படுத்துகிறது ' தலைப்பு ”. எனவே, குறிப்பிட்ட வகுப்பில் குறிப்பிடப்பட்ட பாணி முதல் தலைப்பில் செயல்படுத்தப்படும்:
.தலைப்பு {
பின்னணி நிறம்: rgb ( 69 , 51 , 151 ) ;
எழுத்துரு பாணி: சாய்வு
}
அதற்காக ' வரி 'வகுப்பு, எங்களிடம் உள்ளது:
- rgb() செயல்பாட்டைப் பயன்படுத்தி தலைப்பின் நிறத்தை “ என அமைக்கவும் (255, 0, 0) ”.
- உரை-அலங்கார-வரியை இவ்வாறு பயன்படுத்தவும் அடிக்கோடு ”.
இரண்டாவது தலைப்பு இரண்டு வகுப்புகளின் பாணிகளைப் பயன்படுத்தும்: ' தலைப்பு 'மற்றும்' வரி ' வர்க்கம்:
.வரி {நிறம்: rgb ( 255 , 0 , 0 ) ;
உரை-அலங்காரம்-கோடு: அடிக்கோடு;
}
செயல்படுத்திய பிறகு, முடிவைச் சரிபார்க்கவும்:
வெளியீட்டில் இருந்து, இரண்டாவது தலைப்பு இரண்டு CSS வகுப்புகளையும் பயன்படுத்துவதை நீங்கள் அவதானிக்கலாம்.
முடிவுரை
ஒரு தனிமத்தில் பல வகுப்புகளைப் பயன்படுத்த, வெள்ளை இடைவெளிகளால் பிரிக்கப்பட்ட வெவ்வேறு வகுப்பு ஐடிகளைப் பயன்படுத்தவும். இதைப் பயன்படுத்தி, ஒரே நேரத்தில் வெவ்வேறு CSS பண்புகளைப் பயன்படுத்தலாம். ஒரே மாதிரியான கூறுகள் இருக்கும் வகுப்பை மீண்டும் பயன்படுத்த இது அனுமதிக்கிறது. ஒரே உறுப்பில் பல வகுப்புகளை எவ்வாறு பயன்படுத்துவது மற்றும் அதை ஒரு எடுத்துக்காட்டுடன் ஸ்டைல் செய்வது எப்படி என்பதை இந்தக் கட்டுரை விளக்கியது.