 |
| CSS Selectors |
ஒரு வலைத்தளம் என்பது அழகாகவும், பயனரை கவரும் வண்ணமும் இருக்க வேண்டியது மிக அவசியமான ஒன்று. CSS மூலமாக, வலைத்தளத்தை அழகுப்படுத்த முடியும் என்பதை முந்தைய பதிவுகள் மூலமாக தெரிந்துக்கொண்டோம்.
இந்த பதிவின் மூலமாக, எந்தவொரு HTML Element-ஐயும் எளிதாக, எண்ணப்படி அழகுப்படுத்த, CSS-இல் பயன்படுத்தப்படும் CSS Selector-கள் பற்றி தெரிந்துக்கொள்ளலாம்.
Table of Contents
- How CSS is Work?
- How to Declare CSS Code for HTML Element?
- CSS Selectors
- Pseudo Element Selector
- Declarations
How CSS is Work?
ஒரு வலைத்தள வடிவமைப்பாளர் மிக முக்கியமாக தெரிந்துவைத்திருக்க வேண்டிய ஒன்று, CSS எவ்வாறு இயங்குகிறது என்பது தான். அவ்வாறு அறிந்து வைத்திருப்பதன் மூலமாக CSS பயன்படுத்துவதை எளிமையாகவும், சிறப்பாகவும் செய்ய இயலும்.
ஓர் உதாரணத்திற்கு, HTML Element ஒவ்வொன்றும் ஒரு கண்ணாடி குடுவை என வைத்துக்கொள்ளுங்கள். அந்த குடுவைகளில், நாம் விரும்பிய வண்ணங்களை கொண்டு நிரப்பலாம் என வைத்துக்கொள்வோம்.
ஏனெனில் கண்ணாடி குடுவைகளுக்கு நிறங்கள் இல்லை. கண்ணாடி குடுவையின் உள்ளே இருக்கும் நிறங்களையும், நம்மால் காண இயலும். அதுப்போல, CSS ஆனது HTML Element-களை கண்ணாடி குடுவைகளாக கருதும்.
 |
| Content without Outlines |
பொதுவாக, HTML Element-கள் இயங்கும் பொழுது, அதனுடைய Outline ஆனது Browser-களுக்கு தெரிவதில்லை. ஆனால், CSS ஆனது ஒவ்வொரு HTML Element-களையும், அதனுடைய Outline-களுடன் எடுத்துக்கொள்ளும்.
உதாரணமாக, CSS ஆனது HTML Element ஒவ்வொன்றையும், கீழ் கண்டவாறு எடுத்துக்கொள்ளும்.
 |
| Content with Outlines |
அதுப்போல, CSS ஆனது HTML Element ஒவ்வொன்றையும் தனித்தனியாக Handle செய்யும். உதாரணமாக, HTML Element ஒவ்வொன்றிக்கும் Color, Size, Outline, Border என அனைத்தையும், தனியாக கொடுக்கலாம்.
How to declare CSS code for HTML Element?
அடுத்ததாக, CSS Style-களை HTML Element-களுக்கு எவ்வாறு கொடுக்கவேண்டும் என்பதை தெரிந்துக்கொள்ளலாம்.
பொதுவாக, CSS ஆனது HTML Element-களுக்கு இரண்டு முக்கிய காரணிகளைக்கொண்டு Style-களை வழங்குகிறது. முதலாவது Selector, இரண்டாவது Declarations.
 |
| Selector & Declarations |
CSS Selectors
HTML Element-களுடைய பெயர்களை பயன்படுத்தியோ அல்லது HTML Element-களுக்கு, அதனுடைய Attributes ஆன Class அல்லது Id Attribute மூலமாக, ஏதேனும் ஒரு பெயரை சூட்டி, அதன் மூலமாக CSS பயன்படுத்தி வலைத்தளத்தை அழகுப்படுத்தலாம். இதற்கு பயன்படுத்தப்படும் பெயர்களே CSS Selectors ஆகும்.
இந்த Selectors மூலமாக, HTML-இல் உள்ள மிகச்சிறிய Element முதல், மிகப்பெரிய Element வரை அனைத்திற்கும் Styles-ஐ கொடுக்க இயலும்.
பொதுவாக, CSS Selector-கள் பல வகைகளாக உள்ளன. ஒவ்வொரு Selector-களையும் கொண்டு வெவ்வேறு முறைகளில் வலைத்தளத்திற்கு தேவையான Design-களை தர இயலும்.
வலைத்தளத்தில் உள்ள HTML Element-களுக்கு, CSS Style-களை கொடுப்பதற்கு முன்பாக, முதலில் Selector--ஐ கொடுக்க வேண்டும். பின்னர், { (Opening curly brackets) மற்றும் } (Closing curly brackets)-களை கொடுத்து, இவைகளுக்கு இடையில் CSS-க்கான Style-களை தர வேண்டும்.
 |
| CSS Selectors |
Universal Selector (*)
HTML File-இல் உள்ள அனைத்து Element-களுக்கும், ஒரே மாதிரியான CSS Style-களை எளிதாக கொடுக்க பயன்படுத்தப்படும் Selector தான், இந்த Universal Selector ஆகும். இதற்கு * குறியீடு பயன்படுத்தப்படுகிறது.
 |
| Universal Selector |
 |
| Universal Selector Declarations |
Type Selector (Element Name)
HTML Element-களுடைய பெயர்களை (குறியீடுகளை) பயன்படுத்தி, CSS-இல் Style கொடுக்கப்பயன்படும் Selector தான் Type Selector ஆகும். உதாரணமாக, நாம் Paragraph Tag-இற்கு Style கொடுக்கவேண்டும் என்றால்,Paragraph உடைய Tag ஆன p-யை பயன்படுத்த வேண்டும்.
 |
| Type |
 |
| Type Selector |
 |
| Type Selector Declaration |
Class Selector (.)
HTML Selector உடைய அனைத்து Element-களுக்கும், ஒரு பொதுவான Attribute தான் இந்த Class Selector ஆகும். HTML Element உடைய Opening Tag-இல் Class என்கின்ற Attribute-இல் ஏதேனும் ஒரு பெயரைக்கொடுத்து, அந்த பெயரைப்பயன்படுத்தி CSS-இல் Style தர வேண்டும்.
குறிப்பாக, CSS-இல் அந்த பெயருக்கு முன்னால் . (dot) கொடுக்க வேண்டும். அவ்வாறு கொடுக்கப்படும் பட்சத்தில் CSS ஆனது, அந்த பெயரை CSS Class Selector ஆக எடுத்துக்கொள்ளும்.
ஒரு HTML File பல Class Selector-களை பயன்படுத்தலாம். ஒரே பெயரை பல HTML Element-களுக்கும் கொடுக்கலாம். அவ்வாறு கொடுக்கப்படும் பொழுது, அந்த அனைத்து HTML Element-களும் ஒரு CSS Style-களை பெறும்.
 |
| Class Selector |
 |
| Class Selectors |
 |
| Class Selector Declarations |
அதுமட்டுமின்றி, CSS File-இல் Class Name-க்கு அடுத்ததாக, HTML Element உடைய பெயரை (Tag)-ஐ கொடுக்க, அந்த Class Name-இற்கு உரிய Child-களில், அந்த பெயருக்கு உரிய Tag-களுக்கு மட்டும், அந்த CSS Style ஏற்கும்.
 |
| Class Selector with Html Element |
 |
| Class Selector with Html Element Declaration |
உதாரணமாக, மேலே குறிப்பிட்ட புகைப்படத்தில் maniMenu என்பது Class Name ஆகும். இப்பொழுது mainMenu என்னும் Class Name-இல் உள்ள p Tag-களுக்கு மட்டும், CSS-இல் கொடுத்த Style-கள் ஆனது பொருந்தும்.
இது மற்ற எந்தவொரு HTML Element-களையும், இந்த Style-களுக்கு உட்படுத்தாது.
ID Selector (#Id name)
HTML-இல் உள்ள அனைத்து Element-களுக்கும் பொதுவான ஒரு Attribute Selector என்றால், அதில் குறிப்பிடத்தக்க ஒன்று ID Attribute ஆகும். இந்த Id Selector மூலமாக, எந்தவொரு Element-க்கும், நம்மால் Style கொடுக்க இயலும்.
 | |
|
Id Selector மூலமாக, Style கொடுக்கவேண்டும் எனில், Id Selector உடைய பெயருக்கு முன்னால் # (hash) குறியீட்டை பயன்படுத்த வேண்டும்.
ஒரு HTML Document-இல் பயன்படுத்தப்படும், Id உடைய பெயர்கள் தனித்துவமாக இருக்க வேண்டும். ஒரு Element-இல் கொடுக்கப்பட்ட Id உடைய பெயரை, மற்றொரு Element உடைய Id-இல் கொடுக்கப்படக்கூடாது.
 |
| Id Selectors |
 |
| Id Selector Declaration |
பெரும்பாலும் CSS பொறுத்தவரை Universal, Type, Class மற்றும் Id Selector-கள் தான் பயன்படுத்தப்படுகிறது. காரணம், இவைகளை எளிதாக புரிந்துக்கொள்ளலாம்.
Pseudo Element Selector
CSS -இல் தனித்துவம் வாய்ந்த சில Selector-களில் முக்கியமானவைகளில் ஒன்று, இந்த Pseudo Element Selector-கள் ஆகும். இவைகளை பயன்படுத்தி, குறிப்பிட்ட சில இடங்களுக்கு ஏற்ப பயன்படுத்தி வலைத்தளத்தை அழகுப்படுத்தலாம்.
::First Letter & First Line
இவைகள் CSS உடைய Property-கள் அல்ல. இது ஒரு Pseudo Elements-கள் ஆகும். இந்த Pseudo Elements-களை, CSS உடைய Selectors-களுக்கு பின்னால் கொடுக்க வேண்டும்.
உதாரணமாக: .my-title::first-letter எனக்கொடுக்க வேண்டும். இந்த my-title selector-க்கு சொந்தமான Content உடைய முதல் எழுத்தானது, நாம் கொடுக்கும் design-களை எடுத்துக்கொள்ளும்.
மேலும் சில, அதிகமாக பயன்படுத்தக்கூடிய Pseudo Element Selectors-கள்
- :first-line,
- :link,
- :visited,
- :hover,
- :active,
- :focus
இதை தவிர, Child Selector, Descendant Selector, Adjacent Sibling Selectorமற்றும் General Sibling Selector-கள் என பல உள்ளன. ஆனால் மேற்கண்ட Selector-களே அதிகம் பயன்படுத்தப்படும் Selector ஆகும்.
Declarations
CSS பொறுத்தவரையில், அவற்றை பயன்படுத்த இரண்டு முக்கியமான பகுதிகளை தெரிந்து வைத்திருக்க வேண்டும். அவற்றில் ஒன்று Property மற்றொன்று Value ஆகும்.
 |
| CSS Declaration |
Property என்பது HTML Element-இற்கு, நாம் கொடுக்க விரும்பும் எண்ணத்தை குறிக்க பயன்படுகிறது. அதாவது வலைத்தளத்தின் பின்பகுதியை வண்ணத்தால் நிரப்ப வேண்டுமெனில், முதலில் CSS-விற்கு, அதை தெரிவிக்க வேண்டும்.
அதாவது, அதற்கு background-color என்கின்ற property-ஐ கொடுக்க வேண்டும்.
இரண்டாவதாக, Values. அதாவது வலைத்தளத்தின் பிற்பகுதியை எந்த வண்ணத்தால் நிரப்பவேண்டும் என்பதை தெரிவிக்க பயன்படுத்துவது.
உதாரணமாக: background-color: yellow;
இதில் background-color என்கின்ற CSS Property-க்கு, yellow என்கின்ற வண்ணத்தை value ஆக கொடுக்கின்றோம்.
Conclusion
இந்த பதிவின் மூலமாக, CSS உடைய மிக முக்கியமான பல Selector-களையும், அதை பயன்படுத்தும் வழிமுறைகளையும் தெரிந்துக்கொண்டு இருப்பீர்கள். இவற்றை பயன்படுத்தி வலைத்தளத்தை அழகாக வடிவமைக்க முயலுங்கள்.
0 Comments