அறிமுகம்.
1.
Css
என்பது ascaded style sheet என்பதாகும்.
2.
இது
html டேகுகளை வடிவமைக்க பயன்படுகின்றது.
3.
இது
இணைய தள வடிவமைப்பிற்கு பரவலாக பயன் படுத்தப்படுகின்றது.
4.
Html,css3,java
script மூன்றும் சேர்ந்து இனையதளை வடிவமைப்பிறிகு பயன்படுகின்றது.
சான்று
நிரல்-1;
<!DOCTYPE>
<html>
<head>
<style>
h1{
color:white;
background-color:red;
padding:10px;
}
p{
color:light blue;
}
</style>
</head>
<body>
<h1> First CSS Example</h1>
<p>This is a
Paragraph.</p>
</body>
</html>
வெளியீடு:
Css3
ஆனது html ஃபைலின் style டேகு பயன்படுத்தி எழுதப்படுகின்றது. Css அறிமுகவாவதற்கு முன்
html டேகுகளின் பண்புகளை கொண்டே இணைய தளமானது வடிவமைக்கப்ப்ட்டது. Css 3 ஆனது
அந்த வேலையை எளிமை படுத்துவதுடன் மேலும் அதிக பண்புகளைக் கொண்டுள்ளது.
Css
மூலம் என்ன செய்ய முடியும்?
இதன்
மூலம் உங்கள் html ஃபைலிற்கு புதிய தோற்றத்தை கொடுக்கலாம்.
முற்றிலும்
புதியதொரு இணைய தள வடிவமைப்பை உருவாக்கலாம்.
Css3 நண்மைகள்:
css3 பயன்பாட்டிற்க்கு
வருவதற்கு முன்னால் font color,background color,font name போன்றவற்றை html மூலமாகவே
செய்யவேண்டியிருந்தது. இப்போது css3-க்கு பிறகு அவை எளிதாயிருக்கின்றது.
ஒரு தடவை எழுதி
விட்டு ஒன்றுக்கும் மேற்பட்ட இடங்களில் அவற்றை பயன்படுத்துவதால் வேலை சுலபமாகின்றது.
நேரம் மிச்சப்படுகின்றது.
புதிய பண்புகள்
நிறைய css3-ல் அறிமுகப்படுத்தப்பட்டுள்ளது.
மேலே உள்ள படத்தில் p என்பது செலக்டர் ஆகும்.
அதாவது எந்த உறுப்புக்கு குறிப்பிட்ட வடிவமைப்பு பயன்படுத்தப்படுகின்றது என்பதை குறிக்கும்.margin,font-size,
font-family போன்றவை property ஆகும். அதாவது பண்புகள் ஆகும். 10px,12px,verdana பண்புகளுக்கு
நாம் கொடுக்கும் மதிப்பாகும்.
பண்புகளும் ,மதிப்புகளும்
{ மற்றும் } –(curly braces) –க்கு இடையே எழுதப்பட்டிருக்கின்றது. பண்புகளும் மதிப்புகளும்
: (colon) மூலம் பிரிக்கப்பட்டிருக்கின்றது.. ஒவ்வொரு பண்புகளும் மற்ற பண்புகளிருந்து
; (semicolon) மூலம் பிரிக்கப்பட்டிருக்கின்றது.
P என்பது செலக்டர்
ஆகும் என்று பார்த்தோம். இங்கு உறுப்பின் வகையை குறிப்பிட்டிருக்கின்றோம்.இதற்கு பதிலாக
உறுப்பின் id யை குறிப்பிடலாம் அல்லது உறுப்பின் class-யை குறிபிடலாம். அவை பற்றி இப்போது
விரிவாகப் பார்ப்போம்.
முதலில்
Element வகையை குறிப்பிட்டு எழுதப்பட்டுள்ள css னிரல் ஒன்றை பார்ப்போம்.
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<style>
5.
p{
6.
text-align: center;
7.
color: blue;
8.
}
9.
</style>
10.
</head>
11.
<body>
12.
<p>This style will be applied on every paragraph.</p>
13.
<p id="para1">in this paragraph also< /p>
14.
<p>And me!</p>
15.
</body>
16.
</html>
வெளியீடு:
இப்பொழுது element id மூலம் எவ்வாறு style sheet எழுதுவது என்று
பார்க்கலாம். Id ஆனது எதாவது ஒரே ஒரு மெம்பருக்கு மட்டுமே உபயோகப்படும். அதாவது
நாம் p,h1 என்று மெம்பர் டைப்பை குறிப்பிட்டு எழுதினால் எல்லா paragraph அல்லது
எல்லா ஹெட்டிங்கிற்கு பயன்படும். ஆனால் id ஒரே ஒரு மெம்பருக்கு மட்டுமே பயன்படும்.
பின் வரும் சான்று நிரலை பார்த்தால் புரியும்.
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<style>
5.
#para1 {
6.
text-align: center;
7.
color: blue;
8.
}
9.
</style>
10.
</head>
11.
<body>
12.
<p id="para1">Hello muthu karthikeyan/p>
13.
<p>This paragraph will not be affected.</p>
14.
</body>
15.
</html>
வெளியீடு:
Id ஆனது செலக்டராக பன்படுத்தப்படும்
பொழுது ஒரு # குறியீட்டுடன் எழுதப்படுகின்றது .உதாரணத்திற்கு மேலே உள்ள நிரலில்
#para1 என குறிப்பிட பட்டிருப்பதை காணுங்கள்.
இப்பொழுது கிளாஸ் பெயரை குறிப்பிட்டு எவ்வாறு style sheet எழுதலாம்
என்று பார்ப்போம்.வெவ்வேறு வகை உறுப்பிற்கு ஒரே class பெயரை குறிப்பிடுவதன் மூலம்
ஒரே வடிவமைப்பை ஏற்படுத்தலாம்.
<!DOCTYPE html>
1.
<html>
2.
<head>
3.
<style>
4.
.center {
5.
text-align: center;
6.
color: blue;
7.
}
8.
</style>
9.
</head>
10.
<body>
11.
<h1 class="center">This heading is affected</h1>
12.
<p class="center">This paragraph is blue and center-aligned.</p>
13.
</body>
14.
</html>
வெளியீடு
இப்பொழுது
style sheet ஒன்றினை எங்கெல்லாம் எழுதலாம் எனப் பார்ப்போம்.
Style
sheet-ன் மூன்று வகைகள்:
1.
Inline style sheet
2.
Internal
style sheet
3.
External
style sheet.
முதலில் inline style sheet எவ்வாறு
எழுதுவது என்று பார்ப்போம். இவை html உறுப்புடன் style என்கின்ற property
பயன்படுத்தி எழுதப்படுகின்றது. இது குறிப்ட்ட ஓரே ஒரு உறுப்பிற்கு மட்டுமே
பயன்படும்.
சான்று நிரல்.
<!DOCTYPE html>
<html>
<body>
<h1
style="color:red;margin-left:40px;">Inline CSS is applied on this
heading.</h1>
<p>This paragraph is not
affected.</p>
</body>
</html>
Internal style sheet:
இவை head டேகுக்கு உள்ளே
எழுதப்படுகின்றது. இவை குறிப்ப்ட்ட வெப் பக்கத்திற்கு மட்டும் பயன்படும்.
சான்றி நிரல்:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: Red;
margin-left: 80px;
}
</style>
</head>
<body>
<h1>The internal style sheet
is applied on this heading.</h1>
<p>This paragraph will not be
affected.</p>
</body>
</html>
வெளியீடு:
External style sheet:
இவை தனி ஃபைல்களாக எழுதப்பட்டு .css
எங்கின்ற நீட்டுவிப்புடன் சேமிக்கப்படுகின்றது. இவை வெப் பக்கத்தின் உள்ளே ரெஃபெர்
செய்யப்படுகின்றது.
1.
body {
2.
background-color: lightblue;
3.
}
4.
h1 {
5.
color: navy;
6.
margin-left: 20px;
7.
}
மேலே உள்ளது தனியாக எழுதப்பட்டு
mystyle.css எங்கின்ற பெயரில் சேமிக்கப்படுகின்றது.
இப்பொழுது html பக்கத்தின் உள்ளே பின்
வருமாறு எழுதப்படுகின்றது.
1.
<head>
2.
<link rel="stylesheet" type="text/css" href="mystyle.css">
3.
</head>
External style sheet மூலம் நாம் ஒரே
வடிவமைப்பை இரு இணையதளத்தின் எல்லா
பக்கத்திற்கும் பயன் படுத்தலாம். மேலும் css பற்றி அடுத்தடுத்த இதழ்களில்
பார்ப்போம்..
-முத்து கார்த்திகேயன்,மதுரை
No comments:
Post a Comment