டெக்ஸ்ட் பண்புகள்:
டெக்ஸ்ட் என்பது ஒரு முக்கியமான
பண்பாகும். இதை எளிதாக புரிந்து கொள்ள வேண்டுமென்றால் முதலில் மைக்ரோ சாஃப்ட் வேர்டில்
நாம் எவ்வாறெல்லாம் ஃபார்மட் செய்வோம் என்பதை முதலில் நிணைவு கூறுங்கள்.
ஒரு எழுத்துருவின் நிறம் மாற்றலாம்.
அதை வேறொரு டைப்பாக (உதாரணத்திற்கு ஃபாண்ட் ஃபேமிலி Arial-ல் இருந்து vardana ஆக மாற்றுதல்),
ஃபாண்டை போல்ட் ஆக்கலாம். Italic ஆக மாற்றலாம். இது போன்று தாம் css-லும் நாம் பண்புகளை
பயன் படுத்துவோம்.
சான்றாக கீழே வருமாரு ஒரு
h1 டேக்கை உருவாக்கிக் கொள்வோம்.
<h1> Muthu
karthikeyan</h1>
இப்பொழுது h1 டேக்கிற்கு ஸ்டைல் கொடுப்போம்.
<style>
h1{
color:blue;
}
</style>
இப்பொழுது Muthu kathikeyan என்பதன் நிறம்
நீல நிறத்தில் இருக்கும்.
Letter spacing
இது ஒரு டெக்ஸ்டில் ஒரு எழுத்துக்கும் மற்றொரு
எழுத்திற்கும் உள்ள இடைவெளியைக் குறிப்பிட பயன்படுகின்றது.
இந்த பண்பானது இரண்டு விதமான மதிப்புகளை
கொண்டிருக்கும்.
அவையாவன:
Normal|length
Normal என்பது இயல்பான மதிப்பாகும். லெங்க்த்
என்ற பாண்பிற்கு மூன்று விதமான அலகுகளில் நாம் மதிப்பு கொடுக்கலாம்.
1. Pt
2. Px
3. em
சான்று:
<style>
h1{
letter-spacing:5pt;
}
</style>
Em என்பது 5em என்றால் முன்பு இருந்ததைப்
போன்று ஐந்து மடங்கு பெரிதாக மாறும்.
சான்று நிரல்_1:
<html>
<head>
<style>
h1{
color:blue;
letter-spacing:5px;
text-align:center;
}
</style>
</head>
<Body>
<h1>Muthu karthikeyan</h1>
</body>
<html>
வெளியீடு:
.டெக்ஸ்ட் டெகரேசன்: (text-decoration)
இந்த பண்பானது டெக்ஸ்டை அடிக்கோடிடுதல்,
மேற்கோடிடுதல் போன்றவற்றிற்கு பயன்படுகின்றது.
இது பின் வரும் மதிப்புகளில் ஏதாவது ஒன்றை
ஏற்றுக் கொள்ளும்.
1. None
2. Underline
3. Overline
4. Line-through
சான்று நிரல்-2:
<html>
<head>
<style>
h1{
color:blue;
letter-spacing:5px;
text-align:center;
text-decoration:underline;
}
h2{
text-align:center;
text-decoration:overline;
}
h3{
text-align:center;
text-decoration:line-through
}
h4{
text-align:center;
text-decoration:none;
}
</style>
</head>
<Body>
<h1>Muthu karthikeyan</h1>
<h2>I am from Madurai</h2>
<h3>I like programming</h3>
<h4> I love my job</h4>
</body>
<html>
வெளியீடு:
மேலே உள்ள நிரலில் h1 டேக்கானது
underline பண்ணப் பட்டுள்ளது. H2 டேக்கானது overline பண்ணப்பட்டுள்ளது. H3 டேக்கானது
line-through மூலம் அடித்துக் காட்டப்பட்டுள்ளது. H4 டேக்கானது மேற்கண்ட எதுவும் இல்லாமல்
வழக்கம் போல் உள்ளது.
வெர்டிகள் அலைன்(vertical-align)
இந்த பண்பானது டெக்ஸ்டை subscript மற்றும்
superscript செய்யப் பயன்படுகின்றது.
இந்த பண்பிற்கான மதிப்புகள்:
1. Sub
2. Super
Sub என்பது h2o என்பதில் 2 என்பது
வெர்டிகல் ஆக கீழே வருகின்றதல்லவா அதை பயன்படுத்த உதவுகின்றது.
Super என்பது டெக்ஸ்ட் வெர்டிகல் ஆக மேலே
வர உதவுகின்றது.
சான்று நிரல்:
<!DOCTYPE html>
<html>
<head>
<style>
i{
vertical-align:sub;
}
b{
vertical-align:super;
}
</style>
</head>
<body>
h<i>2</i>o<br/>
2<b>3</b>
</body>
</html>
வெளியீடு:
டெக்ஸ்ட் ட்ரான்ஸ்ஃபார்ம்(text-transform)
இந்த பண்பானது டெக்ஸ்டை பெரிய(uppercase)
மற்றும் சிறிய (lowercase) எழுத்தாக மாற்ற
பயன்படுகின்றது.
Uppercase என்பது முற்றிலும்
capital letter ஆகவும் lowercase என்பது முற்றிலும் small letter ஆகவும் மற்றும்
capitalize என்பது ஒவ்வொரு வார்த்தையின் முதல் எழுத்தும் capital letter ஆகவும் பயன்படுகின்றது.
சான்று நிரல்-4:
<!DOCTYPE html>
<html>
<head>
<style>
h1{
text-transform:uppercase;
}
h2{
text-transform:lowercase;
}
h3{
text-transform:capitalize;
}
</style>
</head>
<body>
<h1> I am Muthu
karthikeyan</h1>
<h2> I love teaching</h2>
<h3> I love writing and coding also</h3>
</body>
</html>
வெளியீடு:
டெக்ஸ்ட் அலைன்:
இந்த பண்பானது டெக்ஸ்டை இடது,வலது மற்றும் மத்தியில் அலைன் செய்யப்
பயன்படுகின்றது.இது பின் வரும் மதிப்புகளில் ஏதாவது ஒன்றை ஏற்கின்றது.
1.
left
2.
right
3.
center
4.
justify
இதில் justify என்பது ஒரு பாராவை இடது மற்றும் வலது இரு புறத்திலும்
ஒரே போல் சீர்செய்யப்பயன்படுகின்றது.
சான்று நிரல்-5:
<!DOCTYPE html>
<html>
<head>
<style>
h1{
text-align:center;
}
h2{
text-align:left;
}
p{
text-align:justify;
}
</style>
</head>
<body>
<h1> I am
Muthu karthikeyan</h1>
<h2> I
love teaching</h2>
<p>
On the Insert
tab, the galleries include items that are designed to coordinate with the
overall look of your document. You can use these galleries to insert tables,
headers, footers, lists, cover pages,and other document building blocks. When
you create pictures, charts, or diagrams, they also coordinate with your current document look.
</p>
</body>
</html>
வெளியீடு:
மேலே உள்ள நிரலில்
h1 டேக்கானது
மத்தியிலும்
h2 டேக்கானது
இடது
புறத்திலும்
அலைன்
செய்யப்பட்டுள்ளது.
பாராவானது இடது மற்றும் வலது இரு புறத்திலும் சீர் செய்யப்பயன்படுகின்றது.
லைன் ஹைட்(line height)
இந்த பண்பானது ஒரு பாராவில் உள்ள ஒவ்வொரு
வரியின் உயரத்தையும் மாற்றியமைக்கப்பயன்படுகின்றது.
சான்று நிரல்-6:
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align:justify;
line-height::40px;
}
</style>
</head>
<body>
<p>
On the Insert tab, the galleries include
items that are designed to coordinate with the overall look of your document. You can use these galleries
to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures,
charts, or diagrams, they also coordinate
with your current document look.
</p>
</body>
</html>
வெளியீடு:
-----------முத்து
கார்த்திகேயன்,மதுரை.
No comments:
Post a Comment