Links
ஒரு link-ஐ அழகுபடுத்த color, font-family, font size என்று மேற்கூறிய அனைத்து விஷயங்களையும் பயன்படுத்தலாம். இவை அனைத்தும் கீழ்வரும் நான்கு விதங்களுக்குள் வரையறுக்கப்படும்.
a:link = ஒரு link எவ்வாறு இருக்க வேண்டும் என்பதை வரையறுக்கிறது.
a:hover = Mouse cursor-ஐ அந்த link-ன் அருகே கொண்டு செல்லும்போது அந்த link எவ்வாறு காட்சியளிக்க வேண்டும் என்பது இங்கு வரையறுக்கப்படுகிறது.
a:active = அந்த link-ன் மீது சொடுக்கும்போது அது எவ்வாறு காட்சியளிக்க வேண்டும் என்பது இங்கு வரையறுக்கப்படுகிறது.
a:visited = அந்த link-ஐ சொடுக்கியபின் அது எவ்வாறு காட்சியளிக்க வேண்டும் என்பது இங்கு வரையறுக்கப்படுகிறது.
[code]
<html>
<head>
<style>
a:hover {color:red;background-color:yellow;}
a:active {color:white;background-color:black;}
</style>
</head>
<body>
<a href=”<a href="www.kaniyam.com/mysql-book-in-tamil/">http://www.kaniyam.com/mysql-book-in-tamil/</a>” target=”_blank”> Click here for MYSQL book </a>
</body>
</html>
[/code]
Lists
பொதுவாக HTML-ல் Ordered list என்பது 1,2,3… என வரிசைப்படுத்தப்பட்டும், Unordered list என்பது புள்ளிகள் மூலம் வரிசைப்படுத்தப்பட்டும் காணப்படும். ஆனால் CSS-ல் அவற்றையெல்லாம் நாம் விரும்பும் முறையில் வரிசைப்படுத்த முடியும். ஒரு குட்டி படத்தைக் கொண்டோ அல்லது, (a,b,c…), (I, II, III) , (A,B,C..) என்பது போன்று எந்த வகையில் வேண்டுமானாலும் வரிசைப்படுத்தலாம். இது பின்வருமாறு .
[code]
<html>
<head>
<style>
ol li {list-style-type:upper-roman;}
ol li {list-style-type:circle;}
</style>
</head>
<body>
Types of Testing
<ol>
<li>Functional Testing</li>
<li>Non-functional Testing</li>
</ol>
Types of non-functional testing
<ul>
<li>Performance Testing</li>
<li>Automation Testing</li>
</ul>
</body>
</html>
[/code]
list-type-style என்பது list-ல் உள்ளவை எந்த வரிசை முறையில் வெளிப்பட வேண்டும் என்பதைக் குறிக்கும்.
Visibility என்பது ஒரு விஷயம் வெளிப்பட வேண்டுமா இல்லையா என்பதை முடிவு செய்யும். இதன் மதிப்பு hidden என்றிருந்தால் அந்த விஷயம் வெளிப்படாமல் அதற்கான காலியிடம் மட்டுமே வெளிப்படும்.
Display என்பதன் மதிப்பு Inline என்றிருக்கும் போது list-ல் உள்ளவை ஒன்றன் கீழ் ஒன்றாக வெளிப்படாமல் அடுத்தடுத்து தொடர்ச்சியாக வெளிப்படும்.
[code]
<html>
<head>
<style>
ol li {visibility: hidden;}
ol li {display: inline;}
</style>
</head>
<body>
Types of Testing
<ol>
<li>Functional Testing</li>
<li>Non-functional Testing</li>
</ol>
Types of non-functional testing
<ul>
<li>Performance Testing</li>
<li>Automation Testing</li>
</ul>
</body>
</html>
[/code]
து. நித்யா
தொடரின் பிற பகுதிகளைப் படிக்க – www.kaniyam.com/category/css-in-tamil/