இந்த கட்டுரை ஒரு சுவாரஸ்யமான மற்றும் முக்கியமான தலைப்பை முன்வைக்கிறது தேர்வாளர்கள் மற்றும் அதை ஆதரிக்கும் நடைமுறை ஆர்ப்பாட்டத்துடன் பின்தொடர்கிறார்கள். இந்த கட்டுரையில் பின்வரும் சுட்டிகள் விவரிக்கப்படும்,
- HTML கூறுகளை வடிவமைத்தல்
- CSS தேர்வாளர்கள்
- CSS ஐடி தேர்வாளர்
- CSS வகுப்பு தேர்வாளர்
- CSS யுனிவர்சல் தேர்வாளர்
- CSS குழு தேர்வாளர்கள்
எனவே பின்னர் தொடங்குவோம்,
HTML கூறுகளை வடிவமைத்தல்
CSS தேர்வாளர்களைப் பெறுவதற்கு முன்பு CSS என்றால் என்ன என்பதைப் புரிந்துகொள்வோம். HTML ஒரு எலும்புக்கூட்டாக கருதப்பட வேண்டும் என்றால், CSS (Cascading Style Sheets) என்பது தசைகள் மற்றும் தோல் போன்றது. மூளை ஜாவாஸ்கிரிப்ட் ஆகும். எனவே, ஒரு வலைப்பக்கத்தைப் பொறுத்தவரை, CSS பாணிகள் அடிப்படையில் தளவமைப்பு மற்றும் வடிவமைப்பு ஆகும். படங்கள் மற்றும் உரையின் நிலைப்படுத்தல் முதல் எழுத்துரு அளவு மற்றும் பின்னணி வண்ணம் வரை, உலாவியில் HTML கூறுகள் எவ்வாறு இருக்கும் என்பதை CSS கட்டுப்படுத்துகிறது.
CSS தேர்வாளர்கள் என்ன என்பதைப் பற்றி நீங்கள் நன்கு புரிந்து கொண்டால், நீங்கள் CSS ஐ நன்கு புரிந்து கொள்ள முடியும். இந்த தேர்வாளர்கள் குறிப்பிட்ட HTML கூறுகளை குறிவைக்க உங்களை அனுமதிக்கிறார்கள், இதன்மூலம் நீங்கள் அவர்களுக்கு சரியான பாணியைப் பயன்படுத்தலாம்.
HTML கூறுகளை எவ்வாறு தேர்ந்தெடுப்பது என்பதைப் புரிந்துகொள்வோம்,
c ++ ஒரு வரிசையை எவ்வாறு வரிசைப்படுத்துவது
கூறுகளை எவ்வாறு தேர்ந்தெடுப்பது?
ஒரு வலைப்பக்கத்தில் உள்ள மீதமுள்ள உள்ளடக்கத்திலிருந்து வேறுபட்ட ஒரு குறிப்பிட்ட தலைப்பு வடிவமைக்கப்பட வேண்டும் என்று சொல்லுங்கள். இப்போது, CSS தேர்வாளர்களைப் பயன்படுத்தி அந்த HTML உறுப்பை வித்தியாசமாக வடிவமைக்க இலக்கு வைக்கலாம். CSS தேர்வாளர்கள் ஒரு குறிப்பிட்ட CSS விதிகள் பொருந்தும் கூறுகளை வரையறுக்க உதவுகிறார்கள். நீங்கள் பாணியை விரும்பும் கூறுகளைத் துல்லியமாகத் தேர்வுசெய்ய அனுமதிக்கும் பல்வேறு வகையான CSS தேர்வாளர்கள் உள்ளனர். நீங்கள் முழு வலைப்பக்கத்திற்கும் ஒரு பொதுவான ஸ்டைலிங் கொடுக்கலாம், பின்னர் பக்கத்தின் பிற கூறுகளை பாணி செய்ய உங்கள் வழியைச் செய்யலாம்.
தேர்வாளர்கள் ஒரு CSS விதியின் ஒரு பகுதியாகும், மேலும் இந்த தேர்வாளர்கள் CSS தொகுதிகள் அறிவிக்கப்படுவதற்கு சற்று முன்பு வருகிறார்கள். சிறந்த புரிதலுக்கு, கீழே உள்ள படத்தை நீங்கள் குறிப்பிடலாம்.
CSS தேர்வாளர்கள் கட்டுரையுடன் நகரும்
CSS தேர்வாளர்கள்
இந்த தேர்வாளர் அதன் பெயரால் ஒரு HTML உறுப்பைத் தேர்ந்தெடுக்க உங்களை அனுமதிக்கிறது.
கீழே உள்ள குறியீட்டைக் கவனியுங்கள்:
p {உரை-சீரமை: மைய நிறம்: மெஜந்தா}இந்த பாணி ஒவ்வொரு பத்தியிலும் பயன்படுத்தப்படும்.
பத்தி 1
பத்தி 2
இந்த குறியீடு உங்களுக்கு பின்வரும் வெளியீட்டை வழங்கும்:
இந்த பாணி ஒவ்வொரு பத்தியிலும் பயன்படுத்தப்படும்
பத்தி 1
பத்தி 2
மேலே உள்ள குறியீட்டில், HTML கூறுகள் மையமாக சீரமைக்கப்பட்டு “மெஜந்தா” நிறத்தைக் கொண்டுள்ளன.
CSS தேர்வாளர்கள் கட்டுரையுடன் நகரும்
CSS ஐடி தேர்வாளர்
ஒரு HTML உறுப்பின் ஐடி பண்புக்கூறு தேர்ந்தெடுப்பதன் மூலம், அந்த குறிப்பிட்ட உறுப்பை நீங்கள் தேர்ந்தெடுக்கலாம். ஐடி ஒரு பக்கத்திற்கு தனித்துவமானது என்பதால், ஐடி பண்புகளைப் பயன்படுத்தி சரியான உறுப்பைத் தேர்ந்தெடுக்கலாம்.
HTML உறுப்பை “#” ஐப் பயன்படுத்தி அந்த உறுப்பு ஐடியைத் தேர்ந்தெடுக்கலாம். உதாரணமாக, “# முதல் பெயர்” ஐடி “முதல் பெயர்” இருக்கும் உறுப்பைத் தேர்ந்தெடுக்கிறது.
பின்வரும் குறியீட்டைக் கவனியுங்கள்:
# பாரா 1 {உரை-சீரமை: மைய நிறம்: ஆரஞ்சு}ஹலோ வேர்ல்ட்
இந்த பத்தி பாதிக்கப்படாது.
மேலே உள்ள குறியீட்டின் வெளியீடு:
ஹலோ வேர்ல்ட்
இந்த பத்தி பாதிக்கப்படாது.
மேலேயுள்ள வெளியீட்டில், ஐடி = ”பாரா 1 include ஐ சேர்ப்பதன் மூலம், அந்த உறுப்பின் நிறத்தை ஆரஞ்சு நிறமாக மாற்ற முடிந்தது. இது இல்லாத மற்ற உறுப்பு பாதிக்கப்படாமல் உள்ளது.
CSS தேர்வாளர்கள் கட்டுரையுடன் நகரும்
CSS வகுப்பு தேர்வாளர்
வகுப்பு தேர்வாளரைப் பயன்படுத்தி, ஒரு குறிப்பிட்ட வகுப்பு பண்புகளைக் கொண்ட HTML கூறுகளைத் தேர்ந்தெடுக்கலாம். வகுப்பு பெயரைத் தொடர்ந்து ஒரு காலகட்டத்தை (முழு-நிறுத்த சின்னம்) பயன்படுத்தி நீங்கள் தேர்வாளரை வரையறுக்கலாம். உதாரணமாக, .intro வர்க்கம் “அறிமுகம்” இருக்கும் உறுப்புகளைத் தேர்ந்தெடுக்கிறது. நினைவில் கொள்ள வேண்டிய ஒரு விஷயம் என்னவென்றால், நீங்கள் ஒரு எண்ணுடன் ஒரு வர்க்கப் பெயரை ஒருபோதும் தொடங்க முடியாது.
பின்வரும் குறியீட்டைக் கவனியுங்கள்:
.center {உரை-சீரமை: மைய நிறம்: இளஞ்சிவப்பு}இந்த தலைப்பு இளஞ்சிவப்பு மற்றும் மையமாக சீரமைக்கப்பட்டுள்ளது.
இந்த பத்தி இளஞ்சிவப்பு மற்றும் மையமாக சீரமைக்கப்பட்டுள்ளது.
மேலே உள்ள குறியீட்டின் வெளியீடு:
இந்த தலைப்பு இளஞ்சிவப்பு மற்றும் மையமாக சீரமைக்கப்பட்டுள்ளது.
இந்த பத்தி இளஞ்சிவப்பு மற்றும் மையமாக சீரமைக்கப்பட்டுள்ளது.
ஒரு குறிப்பிட்ட உறுப்புக்கு நீங்கள் CSS வகுப்பு தேர்வாளர்களைப் பயன்படுத்தலாம். ஒரு குறிப்பிட்ட உறுப்பு மட்டுமே பாணியில் இருக்க வேண்டும் என நீங்கள் விரும்பினால், நீங்கள் வகுப்பு தேர்வாளருடன் உறுப்பு பெயரைப் பயன்படுத்தலாம்.
உதாரணமாக, பின்வரும் குறியீட்டைக் கவனியுங்கள்:
p.center {உரை-சீரமை: மைய நிறம்: இளஞ்சிவப்பு}இந்த தலைப்பு பாதிக்கப்படவில்லை
இந்த பத்தி இளஞ்சிவப்பு மற்றும் மையமாக சீரமைக்கப்பட்டுள்ளது.
மேலே உள்ள குறியீட்டின் வெளியீடு:
இந்த தலைப்பு பாதிக்கப்படவில்லை
இந்த பத்தி இளஞ்சிவப்பு மற்றும் மையமாக சீரமைக்கப்பட்டுள்ளது.
வெளியீட்டில் நீங்கள் காணக்கூடியது போல, தலைப்பு h2 பாணியால் பாதிக்கப்படாது. நாங்கள் “p.center” ஐக் குறிப்பிட்டுள்ளதால், பத்தி மட்டுமே பாணியால் பாதிக்கப்படுகிறது.
இந்த CSS தேர்வாளர்கள் கட்டுரையுடன் நகரும்,
CSS யுனிவர்சல் தேர்வாளர்
இந்த வகை தேர்வாளர் பக்கத்தில் உள்ள அனைத்து உறுப்புகளையும் தேர்ந்தெடுக்கும் வைல்டு கார்டு எழுத்துக்குறியாக கருதலாம். இது பக்கத்தில் உள்ள அனைத்து உறுப்புகளையும் தேர்ந்தெடுக்கிறது, மேலும் இது “*” ஆல் குறிப்பிடப்படுகிறது.
உதாரணமாக, கீழே உள்ள குறியீட்டைக் கவனியுங்கள்:
* {நிறம்: இருண்ட பச்சை எழுத்துரு-அளவு: 30px}இது ஒரு சோதனை (சிறிய எழுத்துரு)
இது ஒரு பத்தி.
மேலே உள்ள குறியீட்டின் வெளியீடு:
ஹலோ வேர்ல்ட்
இது ஒரு சோதனை (சிறிய எழுத்துரு)
இது ஒரு பத்தி.
வெளியீட்டில் நீங்கள் காணக்கூடியது போல, குழு தேர்வாளரைப் பயன்படுத்தி வரையறுக்கப்பட்ட அனைத்து கூறுகளும் ஒரே பாணி வரையறையைக் கொண்டுள்ளன - அவை மையத்துடன் சீரமைக்கப்பட்டவை மற்றும் எழுத்துரு நிறம் சியான் ஆகும்.
இது இந்த கட்டுரையின் முடிவிற்கு நம்மைக் கொண்டுவருகிறது.
எங்கள் பாருங்கள் இது பயிற்றுவிப்பாளர் தலைமையிலான நேரடி பயிற்சி மற்றும் நிஜ வாழ்க்கை திட்ட அனுபவத்துடன் வருகிறது. இந்த பயிற்சி பின்-முனை மற்றும் முன்-வலை வலை தொழில்நுட்பங்களுடன் பணிபுரியும் திறன்களில் நீங்கள் தேர்ச்சி பெறுகிறது. வலை அபிவிருத்தி, jQuery, கோணல், நோட்ஜெஸ், எக்ஸ்பிரஸ்ஜேஎஸ் மற்றும் மோங்கோடிபி பற்றிய பயிற்சி இதில் அடங்கும்.
எங்களுக்கு ஒரு கேள்வி கிடைத்ததா? கட்டுரையின் கருத்துகள் பிரிவில் இதைக் குறிப்பிடவும், நாங்கள் உங்களிடம் திரும்புவோம்.