CSS
Background என்றால்
என்ன?
CSS பேக்ரவுண்ட் ப்ராப்பர்ட்டி
(Background property)ஆனது டாக்குமெண்ட்டிற்கு பின்னனி எஃபக்ட் கொடுக்க
பயன்படுகின்றது. Html டேக்குகளுக்கு பின்னனி எஃபக்ட் கொடுக்க ஐந்து வகையான
ப்ராப்பர்ட்டிகள் உள்ளன.
அவையாவன:
background-color
background-image
background-repeat
background-attachment
background-position
மேலே உள்ள ஐந்து
பண்புகளையும் ஒவ்வொன்றாக காண்போம்.
1)
CSS background-color
இந்த ப்ராப்பர்ட்டி ஆனது
எலெமென்டின்(element) பின்னனி வண்ணம் கொடுக்க பயன்படுத்தப்படுகின்றது.கீழே உள்ள
நிரலில் h2,p என்ற டேக்குகளுக்கு பின்னனி வண்ணமாக நிறமானது ஹெக்சா டெசிமல் எண்ணாக
கொடுக்கப்பட்டுள்ளது. RGB நிற ஃபார்மெட்டில் இது உள்ளது. RGB நிற ஃபார்மட்டை
பொறுத்த வரை ரெட் நிறத்கிற்கு,பச்சை நிறத்திற்கு மற்றும் நீல நிறத்திற்கு
ஒவ்வொன்றிற்கும் 0 முதல் 255 வரை ஒரு மதிப்ப கொடுக்கப்படும்.மூன்றின் கலவையாக ஒரு
நிறம் உருவாக்கப்படும். மூன்றுமே 0 எனில் கறுப்பு நிறமும் மூன்றுமே 255 எனில்
வெள்ளை நிறமும் முறையே உருவாக்கப்படும்.உதாரணமாக 255 ன் ஹெக்சா டெசிமல் மதிப்பு FF
ஆகும்.
உதாரணம்.
<!DOCTYPE html>
<html>
<head>
<style>
h2,p{
background-color: #b0d4de;
}
</style>
</head>
<body>
<h2>My CSS page.</h2>
<p>I am muthu
karthikeyan</p>
</body>
</html>
வெளியீடு:
ஒவ்வொரு எலெமென்டிற்கும் தனிதனியே வெவ்வேறு நிறங்களை
கொடுக்கலாம்.
கீழே உள்ள நிரலில் color மதிப்பு ஹெக்சா
டெசிமலுக்கு பதிலாக அதன் பெயர் நேரடியாக குறிப்பிடப் பட்டுள்ளது.h1 டேக்கிற்கு
பின் புற வண்ணமாக பச்சை நிறமும், div
டேக்கின் பின்புற நிறமாக நீல நிறமும் p டேக்கின் பின்புற நிறமாக யெல்லோ(yellow)
நிறமும் குறிப்பிடப் பட்டுள்ளது.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: green;
}div {
background-color: blue;
}
p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS
different background-color example!</h1>
<div>
This is a sample
text inside a div element.
<p>This is a
sample paragraph inside a p tag</p>
</div>
</body>
</html>
வெளியீடு:
2)
CSS பேக்ரவுண்ட் படம்(background-image)
எவ்வாறு பயன்படுகின்றது?
Background-image ப்ராப்பர்ட்டி ஆனது எலெமெண்டின் பின்னால் படம் எது
என்றை குறிப்பிட பயன்படுகின்றது..இயல்பாக
இது மொத்த டாக்குமென்டின் பின் படமாக காட்சியளிக்கும். பேக்ரவுண்ட் படமானது
டாக்குமென்ட்டின் ஃபாண்ட் நிறத்திற்கு ஏற்றாற் போல் தேர்ந்தெடுக்கப்பட வேண்டும்
என்பது ஒரு முக்கியக் குறிப்பு.
<!DOCTYPE
html>
<html>
<head>
<style>
body {
background-image:
url("flower.jpg");
margin-left:50px;
}
</style>
</head>
<body>
<h1>Hello Muthu
karthikeyan</h1>
</body>
</html>
வெளியீடு:
.
3)
CSS background-repeat எண்றால் என்ன?
இயல்பாகவே பேக்ரவுண்ட்
இமேஜ் ஆனது வெர்டிக்கல் மற்றும் ஹரிசாண்டல் முறை இரண்டிலுமே ரீபீட் ஆகும். நாம்
நிணைத்தால் இதை வெர்டிக்கல் ஆக மட்டுமோ அல்லது ஹரிசாண்டல் மற்றுமோ ரீபிட்
செய்யலாம். மேலும் இதை மொத்ததிற்கு ரிபீட் செய்யாமல் ஒரே ஒரு தடவை தோன்றும்படி
அமைக்கலாம்.
ஹரிசாண்டல் ரிபீட்
உதாரணம்.
<style>
body {
background-image: url("flower.jpg”);
background-repeat: repeat-x;
}
</style>
வெளியீடு:
மேலே உள்ள நிரலில் background-repeat ப்ராப்பர்ட்டி ஆனது repeat-x என்ற மதிப்பை
கொண்டுள்ளது.எனவே பேக்ரவுண்ட் இமேஜ் ஆனது வெளியீட்டில் இடவலமாக ரிபீட் ஆகியுள்ளது.
வெர்டிக்கல் ரிபீட்
உதாரணம்:
<style>
body {
background-image: url("flower.jpg”);
background-repeat: repeat-y
}
</style>
வெளியீடு:
மேலே உள்ள நிரலில் background-repeat ப்ராப்பர்ட்டி ஆனது repeat-yஎன்ற மதிப்பை
கொண்டுள்ளது.எனவே பேக்ரவுண்ட் இமேஜ் ஆனது வெளியீட்டில் கீழ்மேலாக ரிபீட்
ஆகியுள்ளது
no-repeat உதாரணம்.
background-repeat:no-repeat; என்பதானது இமேஜானது எந்த திசையிலும்
ரிபீட் ஆகாமல் ஒரே ஒரு முறை தோன்ற வைக்கப்பயன் படுகின்றது.
உதாரணம்:
<style>
body {
background-image:
url("flower.jpg");
background-repeat:no-repeat;
}
</style>
வெளியீடு:
4) CSS background-attachment ப்ராப்பர்ட்டி என்பது என்ன?
இந்த ப்ராப்பர்ட்டி ஆனது டாக்குமெண்ட் ஸ்க்ரோல் (scroll)
செய்யப்படும் பொழுது பேக்ரவுண்ட் இமேஜும் சேர்த்து ஸ்க்ரோல் செய்யப்பட வேண்டுமா
அல்லது நிலையாக இருக்க வேண்டுமோ என்பதை குறிப்பிட பயன்படுகின்றது.fixed என்கின்ற
மதிப்பிருத்தப்படும் பொழுது பேக்ரவுண்ட் இமேஜ் நிலையாக இருக்கின்றது.
உதாரணம்:
<style>
body {
background-image:
url("flower.jpg");
background-repeat: repeat-y;
background-attachment:fixed;
}
Fixed என்பதற்கான மாற்று மதிப்பு scroll
ஆகும்
5)
CSS background-position
இந்த பண்பானது
தொடக்கத்தில் பேக்ரவுண்ட் இமேஜ் எங்கு தோன்ற வேண்டும் என்பதை குறிக்கின்றது.
இயல்பாக இது இடது
மேற்புறத்தில் தொன்றுகின்றது. அதை நாம் கீழே குறிப்பிடப் பட்டுள்ள ஏதாவது ஒரு இடத்தில்
தோன்ற வைக்கலாம்.
1.
center
2.
top
3.
bottom
4.
left
5.
right
உதாரணம்:
<style>
body {
background-image: url("flower.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:
center;
}
</style>
வெளியீடு:
----முத்து கார்த்திகேயன் ,மதுரை.
To learn programming in Madurai area please contact 96293 29142
No comments:
Post a Comment