Thursday, March 12, 2020

Css செலக்டர்கள்.



முதலில் css ஒரு அறிமுகம்.
Css என்பது cascaded style sheet என்பதன் சுருக்கமாகும்.
இது இணையப் பக்கங்களை டிசைன் செய்யப்பயன்படுகின்றது.
வெப் டிசைனிங்கில் பரந்து பயன்படுகின்றது.
Html, css, javascript ஆகிய மூன்றின் துணை கொண்டு வெப் டிசைன் செய்யப்படுகின்றது.
Css சிண்டாக்ஸ்.
இதில் selector என்பது எந்த html எலெமெண்டிற்கு நாம் டிசைன் அப்ளை செய்ய வேண்டும் என்பதைக் குறிக்கின்றது.
Declaration block.
இது ஒன்று அல்லது ஒன்றுக்கு மேற்பட்ட டிக்லரேசன்களைக் கொண்டிருக்கும்.ஒவ்வொன்றும் semicolon உதவி கொண்டு பிரிக்கப்படுகின்றது.
உதாரணத்திற்கு 2 டிக்லரேசன்கள்.
1.color:yellow
2. font-size: 11px
Property:
இது html எலெமெண்டின் பண்பின் பெயராகும்.
உதாரணத்திற்கு
Color

Value: இது பண்பின் மதிப்பாகும்.
சான்று:
Yellow
Css செலக்டார்கள்.
இது எந்த எலெமெண்டிற்கு நாம் டிசைன் அப்ளை செய்யப்பட வேண்டும் என்பதை தேர்ந்தெடுக்க பயன்படுகின்றது.
இவை பெரும்பாலும் name, id,class, attribute போன்றவற்றின் மூலம் செலெக்ட் செய்யப்படுகின்றது.
செலக்டர் வகைகள்.
1.    CSS Element Selector
2.    CSS Id Selector
3.    CSS Class Selector
4.    CSS Universal Selector
5.    CSS Group Selector
1.      Css எலெமெண்ட் செலெக்டர்கள்.
இது அந்த எலெமெண்டின் பெயர் கொண்டு செய்யப்படுகின்றது.
சான்றாக h1, p ஆகியவற்றைக் கூறலாம்.
சான்று நிரல்-1
<!DOCTYPE html>  
<html>  
<head>  
<style>  
p{  
    text-align: center;  
    color: blue;  
}   
</style>  
</head>  
<body>  
<p>This style will be applied on every paragraph.</p>  
<p id="para1">Me too!</p>  
<p>And me!</p>  
</body>  
</html>    
2.      Css id செலக்டர்.
இது அந்த html எலெமெண்டின்  id என்பதின் துணை கொண்டு உருவாக்கப்படுகின்றது.ஒரு html பக்கத்தில் id என்பது யுனிக் ஆகும். அதாவது  ஒரு id ஆனது ஒரே ஒரு எலெமென்டிற்கு தான் .
இது # என்ற கேரக்டரை பயன்படுத்துகின்றது.
சான்று நிரல்-2
<!DOCTYPE html>  
<html>  
<head>  
<style>  
#para1 {  
    text-align: center;  
    color: blue;  
}  
</style>  
</head>  
<body>  
<p id="para1">Hello Javatpoint.com</p>  
<p>This paragraph will not be affected.</p>  
</body>  
</html>    
Css class செலெக்டர்.
இது ஒரு html எலெமெண்டின் class என்ற பணபின் உதவி கொண்டு செலெக்ட் செய்யப்படுகின்றது. ஒன்றுக்கு மேற்பட்ட எலெமெண்டிற்க்கு ஒரே கிளாஸ் பெயர் இருக்கலாம்.
இது .(டாட்) ஆபரேட்டர் கொண்டு செலெக்ட் செய்யப்படுகின்றது.
<!DOCTYPE html>  
<html>  
<head>  
<style>  
.center {  
    text-align: center;  
    color: blue;  
}  
</style>  
</head>  
<body>  
<h1 class="center">This heading is blue and center-aligned.</h1>  
<p class="center">This paragraph is blue and center-aligned.</p>   
</body>  
</html>  
யுனிவர்சல் செலெக்டர்கள்.
இது எல்லா html எலெமென்டிற்க்கும் பயன்படுத்த வேண்டிய டிசைன் செய்யப்பயன்படுகின்றது.
இது * என்ற ஆபரேட்டரை பயன்படுத்துகின்றது.
சான்று நிரல்.
<!DOCTYPE html>  
<html>  
<head>  
<style>  
* {  
   color: green;  
   font-size: 20px;  
}   
</style>  
</head>  
<body>  
<h2>This is heading</h2>  
<p>This style will be applied on every paragraph.</p>  
<p id="para1">Me too!</p>  
<p>And me!</p>  
</body>  
</html>    
Css குரூப் செலெக்டர்.
இது ஒன்றுக்கு மேற்பட்ட எலெமெண்டுகளுக்கு ஒரே டிசைன் அப்ளை செய்ய பயன்படுகின்றது.
<!DOCTYPE html>  
<html>  
<head>  
<style>  
h1, h2, p {  
    text-align: center;  
    color: blue;  
}  
</style>  
</head>  
<body>  
<h1>Hello Javatpoint.com</h1>  
<h2>Hello Javatpoint.com (In smaller font)</h2>  
<p>This is a paragraph.</p>  
</body>  
</html>  
இவ்வாறு css செலெக்டர்கள் வெப் டிசைனிங்கில் பயன்படுகின்றன.




நன்றி.
முத்து கார்த்திகேயன் ,மதுரை.


contact:
91 9629329142.

ads Udanz

No comments:

Post a Comment