CSS(கேஸ்கேடிங் ஸ்டைல் ஷீட்ஸ்) என்பது உங்கள் இணையதளத்தில் உள்ள HTML உறுப்புகளின் காட்சித் தோற்றத்தைக் கட்டுப்படுத்துவதில் முக்கியப் பங்கு வகிக்கும் வலை மேம்பாட்டின் ஒரு அடிப்படை அங்கமாகும். உறுப்புகள் எவ்வாறு காட்டப்படுகின்றன, வடிவமைக்கப்படுகின்றன மற்றும் நிலைநிறுத்தப்படுகின்றன என்பதை வரையறுக்கும் சக்திவாய்ந்த விதிகள் மற்றும் பண்புகளை இது வழங்குகிறது, இது உங்கள் வலைப்பக்கங்களின் தோற்றத்தையும் உணர்வையும் தனிப்பயனாக்க அனுமதிக்கிறது.
தேர்வாளர்களின் கருத்தைப் புரிந்துகொள்வதன் மூலம் ஆரம்பிக்கலாம்
ஸ்டைலிங்கிற்கான குறிப்பிட்ட HTML கூறுகளை குறிவைக்க தேர்வாளர்கள் பயன்படுத்தப்படுகின்றன. மிக அடிப்படையான தேர்வாளர்களில் ஒன்று உறுப்பு தேர்வி ஆகும், இது ஒரு குறிப்பிட்ட HTML உறுப்பின் அனைத்து நிகழ்வுகளையும் தேர்ந்தெடுக்கிறது.
எடுத்துக்காட்டாக, பின்வரும் CSS விதி ஒரு ஆவணத்தில் உள்ள அனைத்து பத்திகளையும் குறிவைக்கிறது:
p {
color: blue;
}
இந்த எடுத்துக்காட்டில், p தேர்வாளர் அனைத்து <p> உறுப்புகளையும் தேர்ந்தெடுத்து, அவற்றின் உரை நிறத்தை நீல நிறமாக அமைக்கிறார்.
மற்றொரு பொதுவான தேர்வாளர் வகுப்பு தேர்வாளர்
வகுப்புகள் ஒரே மாதிரியான குணாதிசயங்களைக் கொண்ட கூறுகளைக் குழுவாகப் பயன்படுத்துகின்றன. HTML உறுப்புகளுக்கு ஒரு வகுப்பை ஒதுக்குவதன் மூலம், நீங்கள் இலக்கு வைத்து அவற்றை கூட்டாக வடிவமைக்கலாம்.
இங்கே ஒரு உதாரணம்:
.blue-text {
color: blue;
}
இந்த வழக்கில், .blue-text தேர்வாளர் வகுப்பில் உள்ள அனைத்து கூறுகளையும் குறிவைத்து blue-text, அவற்றின் உரைக்கு நீல நிறத்தைப் பயன்படுத்துகிறார்.
கூடுதலாக, ID ஒரு குறிப்பிட்ட உறுப்பை அதன் தனித்துவமான அடையாளங்காட்டி மூலம் குறிவைக்க தேர்வாளர் உங்களை அனுமதிக்கிறது. ID ஒரு பக்கத்தில் உள்ள தனி உறுப்புகளுக்கு பொதுவாக ஒதுக்கப்படும்.
இங்கே ஒரு உதாரணம்:
#header {
background-color: gray;
}
இந்த எடுத்துக்காட்டில், #header தேர்வாளர் உறுப்பைத் தேர்ந்தெடுத்து ID header அதற்கு சாம்பல் பின்னணி நிறத்தைப் பயன்படுத்துகிறார்.
CSS இன் தொடரியலுக்குச் செல்லும்போது, ஒவ்வொரு CSS விதியும் ஒரு தேர்வாளர் மற்றும் ஒரு அறிவிப்புத் தொகுதியைக் கொண்டுள்ளது.
அறிவிப்பு தொகுதி சுருள் பிரேஸ்களில் இணைக்கப்பட்டுள்ளது {} மற்றும் ஒன்று அல்லது அதற்கு மேற்பட்ட அறிவிப்புகளைக் கொண்டுள்ளது. அறிவிப்புகள் ஒரு சொத்து மற்றும் அதனுடன் தொடர்புடைய மதிப்பைக் கொண்டிருக்கும்.
இங்கே ஒரு உதாரணம்:
h1 {
font-size: 24px;
color: #333;
}
இந்த குறியீடு துணுக்கில், h1 தேர்வாளர் அனைத்து <h1> உறுப்புகளையும் தேர்ந்தெடுத்து, அவற்றின் எழுத்துரு அளவை 24 பிக்சல்களாகவும், உரை நிறத்தை அடர் சாம்பல் நிறமாகவும் அமைக்கிறது(#333).
இந்தத் தொடர் முழுவதும், பல்வேறு CSS பண்புகள், தேர்வாளர்கள் மற்றும் அவற்றின் சேர்க்கைகளை நாங்கள் ஆராய்ந்து விளக்குவோம், இதன் மூலம் நீங்கள் பார்வைக்கு ஈர்க்கும் மற்றும் நன்கு கட்டமைக்கப்பட்ட இணையதளங்களை உருவாக்க முடியும். CSS மற்றும் அதன் அடிப்படை தொடரியல் ஆகியவற்றைப் புரிந்துகொள்வது உங்கள் வலைப்பக்கங்களின் ஸ்டைலிங் அம்சங்களைக் கட்டுப்படுத்துவதற்கான அடித்தளத்தை உங்களுக்கு வழங்கும், இது ஒரு தனித்துவமான மற்றும் தனிப்பயனாக்கப்பட்ட பயனர் அனுபவத்தை உறுதி செய்யும். உள்ளே நுழைந்து CSSன் வரம்பற்ற சாத்தியக்கூறுகளைக் கண்டுபிடிப்போம்!