இந்த இதழில் சூடோ கிளாஸ்(pseudo class) பற்றிக்
காண இருக்கின்றோம்.
சூடோ கிளாஸ் எனப்படுவது ஒரு எலெமண்டின் ஸ்பெசல்
ஸ்டேட்டை குறிக்க பயன் படுகின்றது.
உதாரணமாக பின் வருவதை எடுத்துக் கொள்ளுங்கள்
v
ஒரு எலெமண்ட் ஆனது மவுஸால் தொடப்படும் பொழுது
அதன் டிசைனை மாற்ற.
v
ஹைபர் லிங்கின் ஏற்கனவே பார்வையிடப்பட்டது
மற்றும் இது வரை பார்வையிடப்படாதது இரண்டையும் வித்தியாசப் படுத்தி டிசைன் செய்வது.
v
ஒரு எலெமென்ட் ஆனது ஃபோகஸ்(focus) செய்யப்படும்
போது அதன் டிசைனை மாற்றுவது.
சிண்டாக்ஸ்(syntax)
selector:pseudo-class {
property:value;
}
property:value;
}
சான்று
நிரல்:
<!DOCTYPE
html>
<html>
<head>
<style>
/*
unvisited link */
a:link
{
color: red;
}
/*
visited link */
a:visited
{
color: green;
}
/*
mouse over link */
a:hover
{
color: hotpink;
}
/*
selected link */
a:active
{
color: blue;
}
</style>
</head>
<body>
<p><b><a
href="default.asp" target="_blank">This is a
link</a></b></p>
<p><b>Note:</b>
a:hover MUST come after a:link and a:visited in the CSS definition in order to
be effective.</p>
<p><b>Note:</b>
a:active MUST come after a:hover in the CSS definition in order to be
effective.</p>
</body>
</html>
வெளியீடு:
This is a link
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.
Note: a:active MUST come after a:hover in the CSS definition in order to be effective.
குறிப்பு
சூடோ
கிளாஸின் பெயர் case- sensitive கிடையாது.
சூடோ
கிளாஸ் மற்றும் css கிளாஸ்
சூடோ
கிளாஸ் மற்றும் css கிளாஸ் இரண்டையும் இணைத்துப்பயன் படுத்தலாம்
சான்று
நிரல்:
<!DOCTYPE
html>
<html>
<head>
<style>
a.highlight:hover
{
color: #ff0000;
}
</style>
</head>
<body>
<p><a
class="highlight" href="css_syntax.asp">CSS
Syntax</a></p>
<p><a
href="default.asp">CSS Tutorial</a></p>
</body>
</html>
வெளியீடு:
CSS Syntax
CSS Tutorial
நிரல்
விளக்கம்.
மேலே
உள்ள நிரலில் இரண்டு ஹைபர்லிங்குகள் உள்ளன. ஆனால் முதல் எலெமெண்டிற்கு மட்டுமே
கிளாஸ் பெயர் highlight என மதிப்பிடப்பட்டுள்ளது.
எனவே
ஸ்டைல் சீட்டில் a.highlight :hover எனப்படுவது முதல் ஹைபர் லிங்க் மவுசால்
தொடப்படும் போது மட்டும் தான் அதன் நிறம் சிவப்பாக மாறும். Highlight என்பது ஒரு
கிளாஸ் மேலும் ஒரு கிளாஸை குறிப்பிட .(டாட்) ஆபரேட்டர் பயன்படுத்த வேண்டும் என்பதை
நிணைவில் கொள்ளவும்.
சான்று
நிரல்-3
<!DOCTYPE
html>
<html>
<head>
<style>
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover
p {
display: block;
}
</style>
</head>
<body>
<div>Hover
over me to show the p element
<p>Tada! Here I am!</p>
</div>
</body>
</html>
வெளியீடு:
Hover
over me to show the p element
Tada! Here I am!
நிரல் விளக்கம்
மேலே உள்ள நிரலில் பாராகிராப்பின்
display என்கின்ற பண்பிற்கு none என மதிப்பிருத்தப்பட்டுள்ளது. எனவே தொடக்கத்தில் பாராகிராப்
தோன்றாது. எனினும் div:hover p என்பதில் display என்பதில் block என குறிப்பிட பட்டுள்ளதால்
அந்த எலெமெண்டானது மவுஸால் தொடப்படும் பொழுது பாராகிராப் காட்சியளிக்கின்றது.
Display:none என்பது ஒரு எலெமெண்டின் visible ஆனதை மறைக்கின்றது என்பதையும்
display:block என்பது மறைக்கப்பட்ட எலெமெண்டை மீண்டும் தோற்றுவிக்கின்றது என்பதையும்
நிணைவில் கொள்ளவும்.
First-letter சூடோ கிளாஸ்:
சான்று நிரல்-4:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p:first-letter{
color:red;
font-size:40px;
}
</style>
</head>
<body>
<P>I </P>
<P>love </P>
<P> programming</P>
<P>very much </P>
</body>
</html>
வெளியீடு:
I
love
programming
very much
நிரல் விளக்கம்.
மேலே உள்ள நிரலில் பாராகிராப் எலெமெண்டின்
முதல் எழுத்து மட்டும் நிறம் சிவப்பு எனவும் எழுத்தின் அளவு 40 px எனவும் குறிப்பிடப்பட்டுள்ள
உற்று நோக்கவும்.
First-child சூடோ கிளாஸ்.
First child என்கின்ற பண்பானது ஒரு பேரன்ட்
எலெமெண்டின் முதல் சைல்ட் எலெமெண்டின் டிசைனை மாற்றுவதற்கு பயன்படுகின்றது.
சான்று நிரல்
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
color: blue;
}
</style>
</head>
<body>
<p>This is some text.</p>
<p>This is some text.</p>
<p><b>Note:</b> For
:first-child to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
வெளியீடு:
This is some text.
This is some text.
Note: For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.
நிரல் விளக்கம்.
மேலே உள்ள நிரலில் ஒன்றுக்கு மேற்பட்ட p
எலெமெண்ட் இருந்தாலும் first-child என்கின்ற
ப்ராப்பர்ட்டியானது முதல் எலெமண்டை குறிப்பிடுவதால் அதன் நிறம் மட்டும் மாறியுள்ளது.
இதே நிரலில் first-child என்பதற்கு பதில் last-child என்கின்ற சூடோ கிளாஸை பயன்படுத்தியிருந்தால்
கடைசி பாரகிராப்பின் நிறம் மட்டும் மாறியிருக்கும்
-முத்து கார்த்திகேயன்,,மதுரை.
No comments:
Post a Comment