CSS Syntax

CSS தொடரியல்

CSS தொடரியல்

ஒரு CSS விதியானது ஒரு தேர்வியைக் கொண்டுள்ளது மற்றும் ஒரு அறிவிப்பு தொகுதி:

CSS Syntax Diagram

தேர்வி நீங்கள் ஸ்டைல் செய்ய விரும்பும் HTML உறுப்பை சுட்டிக்காட்டுகிறது.

அறிவிப்புத் தொகுதியில் அரைப்புள்ளிகளால் பிரிக்கப்பட்ட ஒன்று அல்லது அதற்கு மேற்பட்ட அறிவிப்புகள் உள்ளன.

ஒவ்வொரு அறிவிப்பும் ஒரு CSS பண்புத்தொகுப்பு பெயர் மற்றும் ஒரு மதிப்பைக் கொண்டுள்ளது, அவை பெருங்குடலால் பிரிக்கப்படுகின்றன.

பல CSS அறிவிப்புகள் அரைப்புள்ளிகளால் பிரிக்கப்பட்டு, அறிவிப்புத் தொகுதிகள் சுருள் பிரேஸ்களால் சூழப்பட்டுள்ளன.

எடுத்துக்காட்டு

இந்த எடுத்துக்காட்டில் அனைத்து <p> உறுப்புகளும் மைய-சீரமைக்கப்பட்டு, சிவப்பு உரை நிறத்துடன் இருக்கும்:

p {
  color: red;
  text-align: center;
}

எடுத்துக்காட்டு விளக்கம்

p என்பது CSS இல் ஒரு தேர்வியாகும் (அது நீங்கள் ஸ்டைல் செய்ய விரும்பும் HTML உறுப்பை சுட்டிக்காட்டுகிறது: <p>).

color என்பது ஒரு பண்புத்தொகுப்பு, மற்றும் red என்பது பண்புத்தொகுப்பு மதிப்பு

text-align என்பது ஒரு பண்புத்தொகுப்பு, மற்றும் center என்பது பண்புத்தொகுப்பு மதிப்பு

CSS தேர்விகள் மற்றும் CSS பண்புத்தொகுப்புகள் பற்றி நீங்கள் அடுத்த அத்தியாயங்களில் மேலும் அறிந்து கொள்வீர்கள்!

CSS பயிற்சிகள்

பயிற்சி:

பின்வரும் எடுத்துக்காட்டில், எது தேர்வியாகும்?

p { color: red; }
p
✓ சரி! 'p' என்பது தேர்வியாகும். இது அனைத்து <p> உறுப்புகளுக்கும் ஸ்டைலைப் பயன்படுத்துகிறது
{ color: red; }
✗ தவறு! இது அறிவிப்புத் தொகுதியாகும், தேர்வி அல்ல
color
✗ தவறு! 'color' என்பது ஒரு பண்புத்தொகுப்பாகும், தேர்வி அல்ல
red
✗ தவறு! 'red' என்பது பண்புத்தொகுப்பு மதிப்பாகும், தேர்வி அல்ல