உங்கள் இணையதளத்தில் நடை விதிகளைப் பயன்படுத்த விரும்பினால், பின்னர் தேர்வாளர்கள் குறிப்பிடப்பட்ட ஆதாரம். பல வகையான தேர்வாளர்கள் உள்ளன, அவற்றில் சில மிகவும் பிரபலமானவை. இதற்காக இன்று CSS இல் உள்ள பண்புக்கூறு தேர்வாளர்கள் என்ன என்பதைக் காட்டுகிறோம், இதன்மூலம் நீங்கள் இந்த கருவிகளில் இருந்து அதிகமானவற்றைப் பெறலாம்.
CSS ஐப் பயன்படுத்தி, உங்கள் வலைத்தளத்தின் விளக்கக்காட்சிக்கு பெரிதும் உதவும் பல விருப்பங்களைப் பயன்படுத்தலாம். பண்பு தேர்வாளர்கள் அவை கூறுகளை வரையறுக்கவும், தனிப்பயனாக்கலை எளிதாக்கவும் உதவும். இந்தத் தலைப்பு, அதனுடன் இணைக்கப்படாதவர்களுக்கு சிக்கலானதாக இருந்தாலும், அதைப் பற்றி அறிந்துகொள்வது உங்களுக்கு பல கதவுகளைத் திறக்கும்.
CSS என்றால் என்ன?
இணைய வடிவமைப்பு உலகத்துடன் நீங்கள் இணைக்கப்பட்டிருந்தால், இந்த வார்த்தையை நீங்கள் அடிக்கடி கேட்டிருப்பீர்கள். அடுக்கு நடை தாள்கள் (CSS) என்பது ஒரு நிரலாக்க மொழியாகும், இது HTML ஆவணத்தை விரைவாகவும் எளிதாகவும் உருவாக்கவும் மாற்றவும் உங்களை அனுமதிக்கிறது. இதன் பொருள் நீங்கள் வடிவமைப்பை நிர்வகிக்கவும், மாற்றங்களைச் செய்யவும், விளக்கக்காட்சியை மேம்படுத்தவும் மற்றும் இணையப் பக்கங்களைத் தனிப்பயனாக்கவும் முடியும். பல தாள்களில் மற்றொருவரிடமிருந்து பெறப்பட்ட பண்புகளை கணக்கிட உங்களை அனுமதிக்கிறது என்பதன் மூலம் அதன் பெயர் வந்தது. வலை வடிவமைப்பில் இது நீர்வீழ்ச்சி என்று அழைக்கப்படுகிறது.
CSS இல் பண்புக்கூறு தேர்வாளர்கள் என்றால் என்ன?
CSS தேர்வாளர்கள் உங்கள் CSS உறுப்புகளுக்கு நீங்கள் கொடுக்க விரும்பும் பாணியை வரையறுக்க நீங்கள் பயன்படுத்தும் கருவிகள் அவை. இந்த மொழியில் பல வகையான தேர்வாளர்கள் உள்ளன, ஒவ்வொன்றும் அதன் சொந்த தொடரியல் மற்றும் பயன்பாட்டுடன். சரியான நிரலாக்க விதிகளைப் பயன்படுத்துவது குறிப்பிட்ட கூறுகளுக்கு சில பண்புகளைப் பயன்படுத்த உலாவி உதவுகிறது.
மறுபுறம், பண்புக்கூறு தேர்வாளர்கள் CSS இல் உள்ள தேர்வாளர்களின் வகைகளில் ஒன்றாகும். அவை மிகவும் பயனுள்ளதாக இருக்கும், இருப்பினும் சில சமயங்களில் கிளாஸ் அல்லது டேக் செலக்டர்கள் போன்ற மற்ற பொதுவான தேர்வாளர்களைப் போல நன்கு அறியப்படவில்லை. CSS தேர்வாளர்கள் பயன்படுத்தப்படுகின்றன எந்தெந்த துறைகளில் ஸ்டைல்களைப் பயன்படுத்த விரும்புகிறோம் என்பதைக் குறிப்பிடவும்.
CSS இல், தேர்வாளர்கள் எங்கள் வலைப்பக்கத்தின் HTML கூறுகளை வரையறுக்க உதவுகிறார்கள், நாங்கள் ஒரு பாணியைப் பயன்படுத்த விரும்புகிறோம். CSS இல் பல தேர்வாளர்கள் உள்ளன, அவை மிகத் துல்லியத்துடன் உறுப்புகளைத் தேர்ந்தெடுக்க உங்களை அனுமதிக்கின்றன பாணிகளைப் பயன்படுத்தும்போது. பண்புக்கூறு தேர்வாளர்கள் என்று அழைக்கப்படுபவை அவற்றின் பண்புக்கூறுகள் மற்றும்/அல்லது மதிப்புகளின் அடிப்படையில் HTML உறுப்புகளைத் தேர்ந்தெடுப்பதை உறுதி செய்கின்றன.
[attribute_name=value] attribute_name என பெயரிடப்பட்ட பண்புக்கூறு மதிப்புக்கு சமமான மதிப்பாக அமைக்கப்பட்ட உறுப்புகளைத் தேர்ந்தெடுக்கிறது.
[பண்பு_பெயர்~=மதிப்பு] attribute_name set எனப்படும் பண்புக்கூறுகளைக் கொண்ட உறுப்புகளைத் தேர்ந்தெடுக்கிறது மற்றும் பண்புக்கூறு மதிப்புகளில் குறைந்தபட்சம் ஒன்று மதிப்பு.
[பண்பு_பெயர்|=மதிப்பு], attribute_name set எனப்படும் பண்புக்கூறு கொண்ட உறுப்புகளைத் தேர்ந்தெடுக்கிறது.
[attribute_name$=value] பண்புக்கூறு இந்த மதிப்புடன் முடிவடையும் குறிச்சொற்களைத் தேர்ந்தெடுக்கவும்.
[பண்பு_பெயர்^=மதிப்பு] பண்புக்கூறு இந்த மதிப்புடன் தொடங்கும் குறிச்சொற்களைத் தேர்ந்தெடுக்கிறது.
பெரிய மற்றும் சிறிய எழுத்துக்களை எவ்வாறு தொடர்புபடுத்துவது?
நீங்கள் பண்புகளின் மதிப்புகளை தொடர்புபடுத்த விரும்பினால் கேஸ்-சென்சிட்டிவ், மூடும் அடைப்புக்குறிக்கு முன் "i" மதிப்பைப் பயன்படுத்தலாம். இந்தக் கொடியானது, அனைத்து ASCII எழுத்துகளையும், பெரிய எழுத்து அல்லது சிறிய எழுத்துக்களைப் பொருட்படுத்தாமல், உலாவிக்கு பொருந்தும்படி கூறுகிறது. இந்தக் கொடி இல்லாமல், ஆவணத்தின் கேஸ்-சென்சிட்டிவ் மொழி வழிகாட்டுதல்களின்படி மதிப்புகள் இணைக்கப்படுகின்றன. HTML என்பது கேஸ் சென்சிடிவ்.
பண்புக்கூறு தேர்வாளர் ஆபரேட்டர்கள் என்றால் என்ன?
நாம் பயன்படுத்தலாம் பண்புக்கூறு தேர்வாளர்களுக்கான சில ஆபரேட்டர்கள் அவை நன்கு அறியப்படாதவை, மேலும் ஆலோசிக்கப்பட்ட பண்புக்கூறுகளில் சில மதிப்புகளின் தோற்றத்தை குறிப்பிடத்தக்க வகையில் செம்மைப்படுத்த அனுமதிக்கின்றன.
பண்புக்கூறு தேர்விகளில் கிடைக்கும் ஆபரேட்டர்கள் இவை
*= (கொண்டது): * ஆபரேட்டர் ஒரு குறிப்பிட்ட சரத்தைக் கொண்ட உறுப்புகளை ஒருமுறையாவது பண்புக்கூறின் மதிப்பாகத் தேர்ந்தெடுக்க உங்களை அனுமதிக்கிறது.
^= (பண்பு மதிப்பின் தொடக்கத்தில் நிகழ்கிறது): ஒரு குறிப்பிட்ட சரத்துடன் தொடங்கும் பண்புக்கூறுகளைக் கொண்ட கூறுகளைத் தேர்ந்தெடுக்கவும்.
$= (பண்பு மதிப்பின் முடிவில் ஏற்படும்): ஒரு குறிப்பிட்ட சரத்துடன் முடிவடையும் பண்புக்கூறைக் கொண்ட உறுப்புகளைத் தேர்ந்தெடுக்கிறது.
~= (சரியான சொல் உள்ளது அல்லது இடைவெளிகளால் பிரிக்கப்பட்டது): குறிப்பிட்ட சரத்துடன் சரியாகப் பொருந்தக்கூடிய உள்ளடக்கம் அல்லது குறிப்பிட்ட சரத்துடன் இடம் பிரிக்கப்பட்ட சொல்லைக் கொண்டிருக்கும் பண்புக்கூறு மதிப்பைக் கொண்ட கூறுகளைத் தேர்ந்தெடுக்கிறது.
|= (சரியான வார்த்தையைக் கொண்டுள்ளது அல்லது ஹைபன்களால் பிரிக்கப்பட்டுள்ளது): மேலே உள்ளதைப் போன்றது, ஆனால் இந்த வார்த்தையை இடைவெளிகளுக்குப் பதிலாக ஹைபன்களால் பிரிக்கலாம்.
CSS இல் தேர்வாளர்களை எவ்வாறு பயன்படுத்துவது?
CSS இல் தேர்வாளர்களைப் பயன்படுத்த இரண்டு வழிகள் உள்ளன. ஒரே ஆவணத்தில் HTML குறியீடு மற்றும் CSS குறியீடு இருந்தால், உங்கள் தளத்தின் தலைப்பில் CSS தேர்வியைச் சேர்த்தால் போதும்.
மறுபுறம், உங்கள் HTML மற்றும் CSS தனித்தனி ஆவணங்களில் இருந்தால், உங்களிடம் index.html என்ற ஆவணம் இருக்கலாம் மற்றும் style.css எனப்படும் மற்றொரு ஆவணம். index.html கோப்பில் CSS கோப்பை அழைக்கும் குறியீட்டு வரிசை இருக்க வேண்டும், இதனால் உங்கள் இணையதளத்தில் ஸ்டைல்கள் சரியாகக் காட்டப்படும்.
CSS இல் வேறு எந்த வகையான தேர்வாளர்களைக் காண்கிறோம்?
தேர்வாளர்களில் பல்வேறு குழுக்கள் உள்ளன. உங்களுக்கு எந்த வகையான தேர்வாளர் தேவை என்பதை அறிந்து கொள்ளுங்கள் உங்கள் திட்டத்திற்கான சிறந்த கருவியைப் பயன்படுத்த உதவும். அதனால்தான் கீழே சிலவற்றைக் காட்டுகிறோம்:
வகை, வகுப்பு மற்றும் அடையாளங்காட்டி தேர்வாளர்கள்
இந்தக் குழுவில் அடங்கும் HTML உறுப்பைக் கட்டுப்படுத்தும் தேர்வாளர்கள், ஒரு கோப்பு போல. இது ஒரு வகுப்பு அல்லது அடையாளங்காட்டியைக் கட்டுப்படுத்தும் தேர்வாளர்களையும் கொண்டுள்ளது.
சூடோகிளாஸ்கள் மற்றும் போலி கூறுகள்
இந்த தேர்வாளர்களின் குழுவில் போலி கிளாஸ்கள் அடங்கும் அவை ஒரு தனிமத்தின் குறிப்பிட்ட நிலைகளை வடிவமைக்கின்றன. எடுத்துக்காட்டாக, சுட்டி அதன் மேல் வட்டமிடும்போது மட்டுமே ஹோவர் போலி-வகுப்பு ஒரு உறுப்பைத் தேர்ந்தெடுக்கும். உறுப்பைக் காட்டிலும் ஒரு தனிமத்தின் குறிப்பிட்ட பகுதியைத் தேர்ந்தெடுக்கும் போலி உறுப்புகளும் அடங்கும்
இணைப்பாளர்கள்
இந்த தேர்வாளர்களின் தொடர் மூலம் மற்ற தேர்வாளர்கள் இணைந்துள்ளனர், எங்கள் ஆவணங்களின் வெவ்வேறு கூறுகளை பிரிக்கும் நோக்கத்துடன்.
உலகளாவிய தேர்வாளர்
தானாக நட்சத்திரக் குறியீடு (*) இது உலகளாவிய தேர்வி குறியீடு, ஒரு குறிப்பிட்ட ஆவணத்தின் அனைத்து கூறுகளையும் தேர்ந்தெடுக்கிறது.
ஐடி தேர்வாளர்
ஐடி பண்புக்கூறு அடிப்படையிலான கூறுகளைத் தேர்ந்தெடுக்கும் நோக்கத்துடன் இந்த வகை அடையப்பட்டது.
இணையதளத்தில் நடக்கும் அனைத்தையும் நீங்கள் கட்டுப்படுத்த விரும்பினால், நிச்சயமாக அதை பெற சிறந்த வழி உங்கள் சொந்த வடிவமைப்பு மூலம் உள்ளது. அவர்களுக்கு நீங்கள் பண்புக்கூறு தேர்வாளர்கள் போன்ற கருவிகளைப் பயன்படுத்தலாம். அதனால் CSS இல் என்ன பண்புக்கூறு தேர்வாளர்கள் என்று நீங்கள் யோசித்துக்கொண்டிருந்தால், இந்தக் கட்டுரையில் பதில்களை உங்களுக்கு வழங்கியிருப்போம் என்று நம்புகிறோம். முக்கியமான ஒன்றை விட்டுவிட்டதாக நீங்கள் நினைத்தால், கருத்துகளில் எங்களுக்குத் தெரியப்படுத்துங்கள்.
