நாம் சென்ற பகுதியிலிருந்து
டெக்ஸ்ட் மற்றும் ஃபாண்ட் பற்றி பார்த்துக் கொன்டிருக்கிறோம் அதன் தொடர்ச்சி:
முதலில்
font-family என்கின்ற ப்ராப்பர்ட்டி பற்றிக் காண்போம்.
எழுத்துருக்களின்(font)
வடிவம் வெவ்வேறு வகையாய் நிறைய இருக்கின்றது. உதாரணத்திற்கு Times new roman,
Arial, Verdana, Calibri போன்று விதவிதமாய் இருக்கின்றன. அதை தேர்வு செய்யவே
font-family என்கின்ற பண்பு பயன்படுகின்றது.
உதாரணத்திற்கு
பின் வரும் ஹெச்டிஎம்எல் நிரலை எடுத்துக் கொள்வோம்.
<!DOCTYPE
html>
<html>
<head>
<title></title>
<style>
</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>
இதன் வெளியீடு பின் வருவது போல் இருக்கும்.
இப்போது
font-family மாற்றப் போகின்றேன்.
<style>
p{
font-family:Arial;
}
</style>
இப்போது வெளியீடு:
முதல் படத்திற்கும்
இரண்டாவது படத்திற்கும் வேறுபாடு இரண்டாவது படத்தில் உள்ள எழுத்துருக்கள் verdana ஸ்டைலில்
இருக்கும்.
ஃபாண்ட் ஸ்டைல்(font-style)
இந்த பண்பானது
எழுத்துருக்கள் நேராக இருக்க வேண்டுமா அல்லது சாய்வாக இருக்க வேண்டுமா என்பதை விவரிக்க
உதவுகின்றது. Normal என்கின்ற பண்பு எழுத்துருக்களை நேராகவும் italic என்பது சாய்வாகவும்
இருக்க பயன் படுகின்றது.
<style>
p{
font-family:Arial;
font-style:italic;
}
</style>
வெளியீடு:
மேலே உள்ள படத்தில்
எழுத்துக்கள் சற்று சாய்வாக இருப்பதைக் காணலாம்.
ஏனென்றால்
font-style என்கின்ற ப்ராப்பர்ட்டிக்கு italic என மதிப்பிருத்தப்ப்பட்டுள்ளது.
ஃபாண்ட் வெய்ட்(font-weight)
இந்த பண்பானது
bold என மதிப்பிருத்தப் பட்டால் எழுத்துக்கள் தடிமனாக மாற்றப்படும். Normal என மதிப்பிருத்தப்பட்டால்
மீண்டும் சாதாரணமாக மாறும்.
<style>
p{
font-family:Arial;
font-style:italic;
font-weight:bold;
}
வெளியீடு:
ஃபாண்ட்-வேரியண்ட்.
இது
Small-caps என மதிப்பிருத்தப்பட்டால் ஆங்கில ஸ்மால் கேஸ் எழுத்துக்கள் கேப்பிடல் ஆகவும்
ஏற்கனவே கேப்பிடல் எழுத்தாக இருந்தவை சற்று பெரியதாகவும் இருக்கும்.
<style>
p{
font-family:Arial;
font-style:italic;
font-weight:bold;
font-variant:small-caps;
}
</style>
வெளியீடு:
ஃபான்ட் சைஸ்(font-size)
இது எழுத்துருக்களின்
அளவை மாற்ற உதவுகின்றது அளவில் சிறியதாகவோ அல்லது பெரியதாகவோ மாற்ற பயன்படுகின்றது.
இதன் மதிப்புக்கள்
பின் வருவனவற்றில் ஏதாவது ஒன்றாக இருக்கும்.
1.
xx-large
2.
x-large
3.
large
4.
medium
5.
small
6.
x-small
7.
xx-small
இப்போது ஃபாண்ட்
அளவை xx-large ஆக மாற்றுகின்றேன்
<style>
p{
font-family:Arial;
font-style:italic;
font-weight:bold;
font-variant:small-caps;
font-size:xx-large;
}
</style>
வெளியீடு:
மேலே உள்ள படத்தில்
எழுத்தின் அளவு பெரியதாக இருப்பதைக் காணலாம். ஏனென்றால் ஃபாண்ட் சைஸ் பண்பிற்கு
xx-large என மதிப்ப்பிருத்தியுள்ளோம்.
லிஸ்ட் ப்ராப்பர்ட்டிகள்(list-
properties)
ஹெச்டிஎம்எல்லில்
அன் ஆர்டர்டு லிஸ்ட்(unordered list) ,ஆர்டர்டு
லிஸ்ட் என இரு வகையுள்ளன. இவ்ற்றில் லிஸ்ட் ஐகான் ப்ராப்பர்ட்டியாக வெவ்வேறு
வகையான மதிப்புக்களைக் குறிப்பிடலாம். அதை சிஎஸ்எஸ் ஸ்டைல் ஷீட் மூலமாக எவ்வாறு மாற்றலாம்
என பார்ப்போம்.
பொதுவாக இதன் மதிப்புகள் பின்வருவன வற்றில் ஏதாவது ஒன்றாக
இருக்கும்.
1.
Disk
2.
Circle
3.
Square
4.
Decimal
5.
Lower-roman
6.
Upper-roman
7.
Lower-alpha
8.
Upper-alpha
9.
None
டிஸ்க் என்கின்ற
மதிப்பு இயல்பானதாகும்.
அவற்றை மதிப்புகளை
மேலே உள்ள லிஸ்டில் ஏதாவது ஒன்றை மதிப்பிருத்தலாம். உதாரணத்திற்கு square என மதிப்பிருத்துகின்றேன்.
<!DOCTYPE
html>
<html>
<head>
<title></title>
<style>
ul
li{
list-style-type:square;
}
</style>
</head>
<body>
<ul>
<li>
Apple</li>
<li>orange</li>
<li>mango</li>
</ul>
</body>
</html>
வெளியீடு:
மேலே உள்ள படத்தில்
லிஸ்ட் ஐகான் சதுரமாக உள்ளதை பார்க்கவும்.
இப்பொழுது ஹெச்டிஎம்எல்லில்
ஆர்டர்டு லிஸ்ட் ஆக மாற்றாமலே css மூலமாகவே அதை ஆர்டர்டு லிஸ்டாக மாற்றலாம்.
<style>
ul
li{
list-style-type:upper-alpha;
}
</style>
</head>
<body>
<ul>
<li>
Apple</li>
<li>orange</li>
<li>mango</li>
</ul>
</body>
வெளியீடு:
மேலே உள்ள நிரலில்
ul என்கின்ற அன் ஆர்டர் லிஸ்ட் ஆகத் தான் குறிப்பிடப்பட்டுள்ளது. ஆனால் ஸ்டைல் ஷீட்டில்
லிஸ்ட் ஸ்டைல் மதிப்பாக அப்பர் ஆல்பாவாக மாற்றியுள்ளோம்.அதன் மாறுபாட்டை படத்தில் காணலாம்.
லிஸ்ட்-ஸ்டைல்-இமேஜ்(list-style-image)
இப்பொழுது ஸ்டைல்
ஐகானாக ஏதாவது ஒரு இமேஜைக் குறிப்பிடலாம்.
உதாரணமாக லிஸ்ட்-ஸ்டைல்
–இமேஜாக ஒரு படத்தைக் குறிப்பிடுகின்றோம்.
<!DOCTYPE
html>
<html>
<head>
<title></title>
<style>
ul
li{
margin:15px;
list-style-image:url(tick.png);
}
</style>
</head>
<body>
<ul>
<li>
Apple</li>
<li>orange</li>
<li>mango</li>
</ul>
</body>
</html>
வெளியீடு:
மேலே உள்ள படத்தில்
லிஸ்ட் ஐகானாக ஒரு இமேஜ் இருப்பதைக் காணலாம். நன்றி மீண்டும் அடுத்த இதழில் சந்திப்போம்.
---முத்து கார்த்திகேயன்.,மதுரை.
No comments:
Post a Comment