![[தமிழில்] HTML & CSS Online Course](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV0_zjRmsQE0iWNlBSqfVRePPYitmf958RmAd79lMu1aWw2KITJkTwE_ENqkTkC0rMsj_Xrpe5aeI4EIM9aDZJqWK_7inZZWjx_HpHEz1kfukoLUPODXVU9fnQylB1mFqg-L9Rj7NWqpk/s300/300_200_two.png)
Selector என்பது ஒரு html element-ன் உடைய வடிவமைப்பை மாற்ற விரும்பினால் முதலில் அந்த element-யை select செய்ய வேண்டும். அவ்வாறு தேர்வு செய்யப்படுவதை selector என்று அழைக்கப்படுகிறது.
பல வெவ்வேறு வகையான selectors-யை CSS கொண்டுள்ளது.
அவைகள்,
1. CSS Element Selector
2. CSS ID Selector
3. CSS Class Selector
4. CSS Universal Selector
CSS ELEMENT SELECTOR:-
CSS Element Selector என்பது ஒரு குறிப்பிட்ட element-யை select செய்ய பயன்படுகிறது.
<html>Explain:
<head>
<title>Element Selector </title>
<style>
p{
color:blue;
}
</style>
</head>
<body>
<h1>Laptops Lists </h1>
<p>Apple </p>
<p>Dell </p>
<p>HP </p>
<p>Asus </p>
<p>Acer </p>
</body>
</html>
மேலே கொடுக்கப்பட்டுளள program-ல் ஒரு h1 tag-ம்,5 p tag-ம் இருக்கிறது. இந்த program-ல் p tag-ல் உள்ள content உடைய நிறத்தை ஊதா நிறமாக ( blue color ) மாற்ற வேண்டும்.
இப்பொழுது நாம் முதலில் அந்த p என்கிற element-யை தேர்வு செய்ய வேண்டும்.
p என்கிற element-யை தேர்வு செய்வதற்கு p என்கிற element-ன் உடைய பெயரை கொடுக்க வேண்டும்.
கீழே கொடுக்கப்பட்டுள்ள CSS code-யை கவனிக்கவும்.
p{
color:blue;
}
P -> P என்பது p tag-யை குறிக்கின்றது.
color -> color என்பது p tag-ன் உடைய color property-யை குறிக்கின்றது.
blue -> blue என்பது color property-க்கு கொடுக்கப்படுகின்ற மதிப்பு ( value ) ஆகும். p tag-ன் உள்ளே கொடுக்கப்பட்டுள்ள content-ன் நிறத்தை ஊதாவாக மாற்றுகிறது.
இப்பொழுது எனக்கு 5 p tag-ல் இருக்கின்ற content-ன் நிறமானது ஊதா நிறமாக மாறிவிட்டது.
CSS ID SELECTOR:-
Id Selector என்பது ஒரே ஒரு element-யை மட்டும் Select செய்ய பயன்படுகிறது.
ஒரு element-க்கு கொடுக்கின்ற id attribute-ன் name-யை மற்றொரு element-க்கு கொடுக்கக்கூடாது.
Id attributes-க்கு கொடுக்கப்படுகின்ற பெயரானது எப்பொழுதும் unique-ஆக கொடுக்க வேண்டும்.
Id attributes-ன் உடைய symbol ஆனது (# hash) ஆகும்.
<html>
<head>
<title>Element Selector </title>
<style>
#HP{
color:green;
}
</style>
</head>
<body>
<h1>Laptops Lists </h1>
<p>Apple Company </p>
<p>Dell Company </p>
< p id="HP">HP Company </p>
<p>Asus Company </p>
<p>Acer Company </p>
</body>
</html>
Explain:
மேலே கொடுக்கப்பட்டுள்ள program-ல் ஒரு h1 tag-ம் 5 p tag-ம் உள்ளது.
இதில் எனக்கு மூன்றாவதாக இருக்கின்ற p tag-ன் உள்ளே கொடுக்கப்பட்டுள்ள content-ன் உடைய நிறத்தை பச்சை நிறமாக மாற்ற வேண்டும்.
இதற்கு 5 p tag உள்ளது.அதில் எனக்கு ஒரே ஒரு p tag-யை மட்டும்தான் தேர்வு செய்ய வேண்டும்.அவ்வாறு தேர்வு செய்வதற்காக பயன்படுத்துவதுதான் id என்கிற attributes ஆகும்.
id attributes-யை எப்படி பயன்படுத்த வேண்டும் என்று கீழே கொடுக்கப்பட்டுள்ளது.
<p id="HP">HP Company</p>
id="HP" என்பது இந்த p tag-ன் உடைய id ஆகும்.இந்த id-க்கு கொடுக்கப்பட்ட பெயர் HP ஆகும்.
HP என்கிற id-யை பயன்படுத்தி p-tagன் உடைய style-யை மாற்ற முடியும்.
HP என்கிற id attributes-யை CSS-ல் பயன்படுத்த வேண்டுமென்றால் முதலில் hash(#) என்கிற symbol-யை போட வேண்டும்.அதன் பிறகு HP என்கிற id-யின் உடைய பெயரை கொடுக்க வேண்டும்.
#HP{
color:green;
}
HP என்கிற id attributes-ன் உடைய color-யை பச்சை(green) நிறமாக மாற்ற வேண்டும் என்பதால் color:green என்று கொடுக்க வேண்டும்.
இவ்வாறு id attributes-யை பயன்படுத்தி ஒரே ஒரு element-ன் உடைய style-யை நம்மால் மாற்ற முடியும்.
CSS Class Selector:-
CSS Class Selector என்பது ஒரு குறிப்பிட்ட group element-யை மட்டும் Select செய்யப் பயன்படுகிறது.
Class attributes-ன் உடைய symbol-ஆனது (. dot) ஆகும்.
<html>Explain:
<head>
<title>Element Selector </title>
<style>
.marked{
color:red;
}
</style>
</head>
<body>
<h1>Laptops Lists </h1>
<p class="marked">Apple </p>
<p>Dell </p>
<p class="marked">HP </p>
<p>Asus </p>
<p class="marked">Acer </p>
</body>
</html>
மேலே கொடுக்கப்பட்டுள்ள program-ல் 5 p tag உள்ளது. அதில் முதலாவது,மூன்றாவது,ஐந்தாவது இருக்கின்ற p tag-ன் உள்ளே கொடுக்கப்பட்டுள்ள content-ன் உடைய நிறத்தை சிவப்பாக மாற்ற வேண்டும். இது போன்ற குழுவாக element-யை தேர்வு செய்ய வேண்டுமென்றால் அதற்கு class என்கிற attributes பயன்படுத்தப்படுகிறது.
class attributes-யை எப்படி பயன்படுத்த வேண்டும் என்று கீழே கொடுக்கப்பட்டுள்ளது.
<p class="marked">Apple </p>
<p>Dell </p>
<p class="marked">HP </p>
<p>Asus </p>
<p class="marked">Acer </p>
class="marked" -> இங்கு marked என்பது class-ன் உடைய பெயர் ஆகும்.
marked என்கிற class attributes-யை CSS-ல் பயன்படுத்த வேண்டுமென்றால் முதலில் dot(.) என்கிற symbol-யை போட வேண்டும்.அதன் பிறகு marked என்கிற class-யின் உடைய பெயரை கொடுக்க வேண்டும்.
.marked{
color:red;
}
marked என்கிற class attributes-ன் உடைய color-யை சிவப்பு(Red) நிறமாக மாற்ற வேண்டும் என்பதால் color:red என்று கொடுக்க வேண்டும்.
இவ்வாறு class attributes-யை பயன்படுத்தி ஒரு group of element-ன் உடைய style-யை நம்மால் மாற்ற முடியும்.
CSS Universal Selector:-
Universal Selector என்பது html document-ல் இருக்கின்ற அனைத்து element-யையும் Select செய்ய பயன்படுகிறது.
Universal Selector-ன் உடைய symbol ஆனது asterisk(*) ஆகும்.
<html>
<head>
<title>Element Selector </title>
<style>
*{
color:brown;
}
</style>
</head>
<body>
<h1>Laptops Lists </h1>
<p>Apple </p>
<p>Dell </p>
<p>HP </p>
<p>Asus </p>
<p>Acer </p>
</body>
</html>
Explain:
மேலே கொடுக்கப்பட்டுளள program-ல் ஒரு h1 element-ம்,5 p element-ம் இருக்கிறது.இவை அனைத்திற்கும் brown நிறம் கொடுக்க வேண்டும்.அப்பொழுது,நாம் universal selector-யை பயன்படுத்த வேண்டும்.
* என்பதின் உள்ளே color:brown; என்று கொடுக்கப்பட்டுள்ளது.இது web page-இன் உள்ளே இருக்கின்ற அனைத்து content-க்கும் brown நிறத்தை கொடுக்கிறது.
இவ்வாறு universal selector-யை பயன்படுத்தி அனைத்து element-இன் உடைய style-யை நம்மால் மாற்ற முடியும்.
![[Tamil] How to create React Application](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW8d-UOiQT7jAqr1Ep5yEP3cJk7OoBzC-gA7GQbTa1l3Jg6ov48ggfQmlgWj0fSpo8EmQjYgL2z0MRvAsfmcuPHfzK_QEL_7K1ZqbKOmxLEnjg9jH1ZB5AUOKDempIqHlt3obOWhJJNNM/s72-c/node_npm_version.png)
![[Tamil] Width and Height Using CSS In Tamil](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAylJcAp4QVKwr-YSHaK9UuXEYdDNHoXSmgAMrhouWJzkVUhIE78h1JBTAXuAXaj6JSXWV5uaNGmm4Rf5yrL8a6jyFCucViWXVy4zemDRdfaK4h_pDvXPH1wIFxrvwPaM89qY8Cccivcc/s72-c/width+and+height.jpg)
![[Tamil] CSS Colors In Tamil](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWik-zqoewl_4rECbqiXTCH8JDOd1-KzBLir6kDtcXvckUGviR8qrVssIbwhVYTjg34tvnEBI1JNGl3t-IS5FLxnnp0N_oRIWtraqnhnMkrp0hsJgEjLLUutR4Je9cZ3Mh7hZx7l0EUPc/s72-c/0b743151-3e0f-4449-ae13-4289151a166f.jpg)
![[Tamil] How to add css in tamil](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBee2UdJwVztGLVJtCKSy8TX3AeWGNCnbpn26IYFVMvEIsKI1aFJyN_kPukHTsoMOQjBTqIXx6w0Zoy85z-tDiNcGYA59-B3_G_3tTFzxwS70M_u_zCP04-uZGPjzk7DzbvFhdi6Csdac/s72-c/add+css.jpg)
No comments:
Post a Comment