அடிப்படை CSS: கூறுகளைத் தேர்ந்தெடுப்பது, ஐடி மற்றும் Class

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, உங்கள் வலைப்பக்கத்தில் குறிப்பிட்ட உறுப்புகள் அல்லது உறுப்புகளின் குழுக்களை எளிதாகத் தேர்ந்தெடுத்து ஸ்டைல் செய்யலாம்.

முந்தைய பதிவு

அடிப்படை CSS: அறிமுகம் மற்றும் தொடரியல்

அடுத்த இடுகை