CSS இல், நீங்கள் உறுப்புகளைத் தேர்ந்தெடுக்கலாம், class, மற்றும் id பாணிகளைப் பயன்படுத்தவும் மற்றும் உங்கள் வலைப்பக்கத்தில் தனிப்பயனாக்கவும். அவற்றை எவ்வாறு பயன்படுத்துவது என்பதற்கான விரிவான வழிகாட்டி இங்கே:
கூறுகளைத் தேர்ந்தெடுப்பது
ஒரு குறிப்பிட்ட HTML உறுப்பின் அனைத்து நிகழ்வுகளையும் தேர்ந்தெடுக்க, உறுப்பு பெயரை தேர்வியாகப் பயன்படுத்தவும். எடுத்துக்காட்டாக, ஆவணத்தில் உள்ள p அனைத்து குறிச்சொற்களையும் தேர்ந்தெடுக்கிறது. <p>
தேர்ந்தெடுக்கிறது Class
ஒரே வகுப்பில் உள்ள உறுப்புகளைத் தேர்ந்தெடுக்க, ஒரு புள்ளியைப் பயன்படுத்தவும் "." வகுப்பின் பெயரைத் தொடர்ந்து. எடுத்துக்காட்டாக, .my-class வகுப்பில் உள்ள அனைத்து கூறுகளையும் தேர்ந்தெடுக்கிறது my-class.
பல வகுப்புகளைக் கொண்ட உறுப்புகளைத் தேர்ந்தெடுக்க, புள்ளிகளைப் பயன்படுத்தவும் "." மற்றும் இடைவெளிகளால் பிரிக்கப்பட்ட வகுப்புப் பெயர்களைப் பட்டியலிடுங்கள். எடுத்துக்காட்டாக, இரண்டையும் வகுப்புகளையும் .class1.class2 கொண்ட உறுப்புகளைத் தேர்ந்தெடுக்கிறது. class1 class2
தேர்ந்தெடுக்கிறது id
ஒரு குறிப்பிட்ட உறுப்பை அதன் மூலம் தேர்ந்தெடுக்க id, "#" என்ற ஹாஷைப் பயன்படுத்தவும், அதைத் தொடர்ந்து உறுப்பு id. எடுத்துக்காட்டாக, #my-id உடன் உறுப்பைத் தேர்ந்தெடுக்கிறது id my-id.
இணைத்தல் Element, Class மற்றும் ID தேர்வுகள்
நீங்கள் உறுப்பு, class, மற்றும் ஐடி தேர்வுகளை ஒருங்கிணைத்து குறிப்பிட்ட கூறுகளை குறிப்பிட்ட வகுப்புகள் மற்றும் ID.
எடுத்துக்காட்டாக, மற்றும் உடன் உறுப்பைத் div.my-class#my-id தேர்ந்தெடுக்கிறது. <div> class my-class ID my-id
கூறுகளைத் தேர்ந்தெடுப்பதற்கான ஒரு குறிப்பிட்ட உதாரணம், class, மற்றும் id CSS இல்:
/* Select all <p> tags */
p {
color: blue;
}
/* Select elements with the class "my-class" */
.my-class {
background-color: yellow;
}
/* Select the element with the ID "my-id" */
#my-id {
font-weight: bold;
}
/* Combine element, class, and ID selections */
div.my-class#my-id {
border: 1px solid black;
}
element, , மற்றும் ஐடி தேர்வுகளைப் பயன்படுத்துவதன் மூலம் class, உங்கள் வலைப்பக்கத்தில் குறிப்பிட்ட உறுப்புகள் அல்லது உறுப்புகளின் குழுக்களை எளிதாகத் தேர்ந்தெடுத்து ஸ்டைல் செய்யலாம்.