CSS பற்றிய இந்த
பகுதியில் நாம் மார்ஜின்(MARGIN) ப்ராப்பர்ட்டி பற்றிக் காண இருக்கின்றோம்.
மார்ஜின் என்பது
வெற்றிடத்தைக் குறிக்கும்.ஒரு ஆப்ஜெக்ட்டுக்கு இடது,வலது,மேல்,கீழ் என ஒவ்வொரு பக்கத்திலும்
உள்ள வெற்றிடத்தை மார்ஜின் ப்ராப்பர்ட்டி குறிக்கும்.
உதாரணத்திற்கு
ஒரு div டேக்கு ஒன்றை எடுத்துக் கொள்வோம்.
முதலில் html-ல்
ஒரு div டேக்கு ஒன்று வருமாறு ஒரு கோடிங் எழுதுகின்றேன்.
<!Doctype
html>
<html>
<head>
<title>
Margin
properties
</title>
<style
type="text/css">
h1{
text-align:center;
}
div{
width:300px;
height:300px;
background-color:red;
}
</style>
</head>
<body>
<h1>
welcome</h1>
<h1>
Muthu karthikeyan </h1>
<div></div>
</body>
</html>
அதன் வெளியீடு:
விளக்கம்:
மேலே உள்ள நிரலில்
முதலில் body டேக்கில் இரண்டு h1 டேக்கு உள்ளது
அதன் text-align என்கின்ற property மதிப்பாக center எனக் குறிப்பிட்டுள்ளோம்.
அதன் கீழ் ஒரு
div டேக்கு ஒன்று குறிப்பிட்டுள்ளோம். அதன் width மற்றும் height ஆகிய ப்ராப்பர்ட்டிக்கு
மதிப்பாக இரண்டுக்குமே 300px எனக் கொடுத்துள்ளோம். Background-color என்கின்ற ப்ராப்பர்டிக்கு
மதிப்பாக red எனக் குறிப்பிட்டுள்ளோம். அதன் படி வெளியீடானது வந்துள்ளது.
இப்பொழுது மார்ஜின்
ப்ராப்பர்ட்டி வகைகள் என்ன எனப் பார்ப்போம்.
மார்ஜின் ப்ராப்பர்ட்டியானது
margin-top,margin-bottom,margin-left,margin-right,margin என ஐந்து வகையாகக் குறிப்பிடலாம்.
margin-top என்பது
ஒரு ஆப்ஜெக்டின் மேலே உள்ள வெற்றிடத்தின் அளவை குறிப்பிடவும், margin-bottom என்பது
ஒரு ஆப்ஜெக்டின் கீழே உள்ள வெற்றிடத்தைக் குறிப்பிடவும்,margin-left என்பது ஆப்ஜெக்டின்
இடது புறம் உள்ள வெற்றிடத்தை குறிப்பிடவும், margin-right என்பது ஆப்ஜெக்டின் வலது
புறத்தில் உள்ள வெற்றிடத்தைக் குறிப்பிடவும் பயன்படுகின்றது.
<!Doctype
html>
<html>
<head>
<title>
Margin
properties
</title>
<style
type="text/css">
h1{
text-align: center;
}
div{
width:100px;
height:100px;
background-color
: red;
margin-left:15px;
margin-top:15px;
margin-right:15px;
margin-bottom:15px;
}
</style>
</head>
<body>
<h1>
welcome</h1>
<h1>
Muthu karthikeyan </h1>
<div></div>
<div></div>
<div></div>
</body>
</html>
வெளியீடு:
மேலே உள்ள நிரலில்
div எலெமென்டின் மார்ஜின் ப்ராப்பர்ட்டியின் நான்கு பக்கத்திற்கும் 15px மதிப்பு கொடுத்துள்ளோம்.
அதன் வெளியீடு மேலே உள்ள படத்தில் உள்ள படி இருக்கும். ஆனால் ஒவ்வொரு ஆப்ஜெக்டும் ஒன்றின்
கீழ் ஒன்றாய் உள்ளது.
அவை அடுத்தடுத்து
வர வேண்டுமென்றால் float என்கின்ற ப்ராப்பர்ட்டிக்கு
மதிப்பாக left எனக் கொடுக வேண்டும்.
div{
width:100px;
height:100px;
background-color:red;
margin-left:15px;
margin-top:15px;
margin-right:15px;
margin-bottom:15px;
float:left;
}
வெளியீடு:
மேலும் மார்ஜின்
ப்ராப்பர்ட்டி நான்கையும் மொத்தமாக ஒரே ப்ராப்பரட்டியாக கொகுக்கலாம்.
உதாரணத்திற்கு
div{
Margin:15px,10px,15px,10px;
}
இவைகள் முறையே
மேலே,வலது,கீழே,இடது என எடுத்துக் கொள்ளப் படும்.
Id
மற்றும் class .
<!Doctype
html>
<html>
<head>
<title>
Margin
properties
</title>
<style
type="text/css">
h1{
text-align:center;
}
p{
color:blue;
}
</style>
</head>
<body>
<h1>
welcome</h1>
<h1>
Muthu karthikeyan </h1>
<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>
வெளியீடு:
மேலே உள்ள நிரலில்
p என்கின்ற டேக்கிற்கு color என்கின்ற ப்ராப்பட்டிக்கு blue என க்கொடுத்துள்ளோம். எனவே
பாராகிராப் ஆனது நீல நிறத்தில் தோன்றுகின்றது.
இப்பொழுது இன்னொரு
பாராகிராப் உருவாக்கி அதன் id ப்ராப்பர்ட்டி para1 எனக் கொடுப்போம்.
<!Doctype
html>
<html>
<head>
<title>
Margin
properties
</title>
<style
type="text/css">
h1{
text-align:center;
}
p{
color:blue;
}
#para1{
color:red;
}
.green{
color:green;
background-color:lightblue;
}
</style>
</head>
<body>
<h1>
welcome</h1>
<h1>
Muthu karthikeyan </h1>
<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>
<P
id="para1">
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>
<P
class="green">
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>
<h3
class="green">good bye<h3>
</body>
</html>
மேலே உள்ள நிரலில்
மேலும் இரண்டு பாராகிராப் உருவாக்கி ஒன்றிற்கு
id என்பதிற்கு para1 எனவும் மற்றொன்றின் class என்பதிற்கு green எனவும் கொடுத்துள்ளோம்.
Id என்கின்ற ப்ராப்பர்ட்டியை
css-ல் ரெப்பர் (refer) செய்யும் பொழுது # என்கின்ற குறியீட்டையும் class என்கின்ற ப்ராப்பர்ட்டியை ரெப்பர் செய்யும்
பொழுது . (dot) என்கின்ற குறியீட்டையும் கொடுத்துள்ளோம். இதில் கவனிக்க வேண்டிய இரண்டு
விசயங்கள் நோக்க வேண்டும். id ப்ராப்பர்ட்டி unique ஆகவும் class ஒன்றிற்கு மேற்பட்டதற்கும்
பயன்படுத்தலாம்.
உதாரணத்திற்கு
மேலே உள்ள நிரலில் green என்கின்ற கிளாசை ஒரு பாராகிராப் மற்றும் ஒரு h3 என இரண்டு
எலெமெண்டிற்கு உபயொகித்துள்ளோம்.
வெளியீடு:
நன்றி மீண்டும்
அடுத்த இதழில் சந்திப்போம்.
முத்து கார்த்திகேயன்,
மதுரை.
No comments:
Post a Comment