CSS Errors

CSS பிழைகள்

CSS பிழைகள்

CSS இல் பிழைகள் எதிர்பாராத நடத்தைக்கு அல்லது ஸ்டைல்கள் சரியாகப் பயன்படுத்தப்படாமல் போக காரணமாகலாம். இந்தப் பக்கம் பொதுவான CSS தவறுகளைக் காட்டுகிறது மற்றும் அவற்றைத் தவிர்ப்பது எப்படி என்பதைக் காட்டுகிறது.

அரைப்புள்ளிகள் இல்லாதது

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

பிழை எடுத்துக்காட்டு
.bad {
  color: red⨯ அரைப்புள்ளி இல்லை
  background-color: yellow;
}
சரி செய்த எடுத்துக்காட்டு
.good {
  color: red;✓ அரைப்புள்ளி சேர்க்கப்பட்டது
  background-color: yellow;
}

தவறான பண்புத்தொகுப்பு பெயர்கள்

இல்லாத பண்புத்தொகுப்பு பெயரைப் பயன்படுத்துவது பிரௌசரால் வெறுமனே புறக்கணிக்கப்படும்.

பிழை எடுத்துக்காட்டு
.bad {
  colr: blue;⨯ 'color' என்பதற்கு பதிலாக 'colr' எழுதப்பட்டுள்ளது
  font-size: 16px;
}
சரி செய்த எடுத்துக்காட்டு
.good {
  color: blue;✓ 'color' சரியான பண்புத்தொகுப்பு
  font-size: 16px;
}

தவறான மதிப்புகள்

சரியான பண்புத்தொகுப்புகள் ஆனால் தவறான மதிப்புகளும் புறக்கணிக்கப்படும்.

பிழை எடுத்துக்காட்டு
.bad {
  width: -100px;⨯ எதிர்மறை அகலம் செல்லாது
  color: green;
}
சரி செய்த எடுத்துக்காட்டு
.good {
  width: 100px;✓ நேர்மறை மதிப்பு
  color: green;
}

மூடப்படாத சுருள் பிரேஸ்கள்

நீங்கள் ஒரு சுருள் பிரேஸை } மூட மறந்துவிட்டால், முழு விதியும் புறக்கணிக்கப்படலாம்.

பிழை எடுத்துக்காட்டு
.bad {
  padding: 20px;
  margin: 10px;
⨯ } மூடப்படவில்லை
சரி செய்த எடுத்துக்காட்டு
.good {
  padding: 20px;
  margin: 10px;
}✓ சுருள் பிரேஸ் மூடப்பட்டது

கூடுதல் பெருங்குடல்கள் அல்லது சுருள் பிரேஸ்கள்

கூடுதல் பெருங்குடல்கள் அல்லது தவறான இடத்தில் வைக்கப்பட்ட சுருள் பிரேஸ்கள் போன்ற தட்டச்சு பிழைகள் விதிகளை உடைக்க காரணமாகலாம்.

பிழை எடுத்துக்காட்டு
.bad {
  color:: blue;⨯ இரட்டை பெருங்குடல்
}
சரி செய்த எடுத்துக்காட்டு
.good {
  color: blue;✓ ஒற்றை பெருங்குடல்
}

CSS பிழைகளைத் தவிர்ப்பதற்கான உதவிக்குறிப்புகள்

தொடரியல் ஹைலைட்டிங் கொண்ட குறியீடு எடிட்டரைப் பயன்படுத்தவும்

தொடரியல் ஹைலைட்டிங் உள்ள குறியீடு எடிட்டர்கள் பிழைகளை விரைவாகக் கண்டறிய உதவுகின்றன

CSS லிண்டர் அல்லது வாலிடேட்டர் மூலம் உங்கள் CSS ஐ சரிபார்க்கவும்

CSS வாலிடேட்டர்கள் பொதுவான பிழைகளைக் கண்டறிந்து சரிசெய்ய உதவுகின்றன

சிறிய பிரிவுகளில் CSS எழுதவும் மற்றும் அடிக்கடி சோதிக்கவும்

சிறிய பகுதிகளாக வேலை செய்து அடிக்கடி சோதிப்பது பிழைகளை விரைவாகக் கண்டறிய உதவுகிறது

CSS பயிற்சிகள்

பயிற்சி:

பின்வரும் CSS குறியீட்டில் என்ன பிழை உள்ளது?

.my-class {
  color: red
  font-size: 16px;
  background-color: blue
}
தவறான பண்புத்தொகுப்பு பெயர்
✗ தவறு! அனைத்து பண்புத்தொகுப்பு பெயர்களும் சரியானவை
அரைப்புள்ளிகள் இல்லாதது
✓ சரி! 'color' மற்றும் 'background-color' வரிகளில் அரைப்புள்ளிகள் இல்லை
மூடப்படாத சுருள் பிரேஸ்
✗ தவறு! சுருள் பிரேஸ் மூடப்பட்டுள்ளது
தவறான மதிப்புகள்
✗ தவறு! அனைத்து மதிப்புகளும் செல்லுபடியாகும்