CSS பார்டர் ப்ராப்பர்ட்டி(Border property)
இது ஒரு எலெமென்டின் பார்டரை பற்றி விவரிக்க
உதவுகின்றது. இதை பயன்படுத்தி ஒரு .பார்டர் ஆனது எந்த ஸ்டைலில் இருக்க வேண்டும்
எந்த நிறத்தில் இருக்க வேண்டும் அதன் அகலம் எவ்வளவு பார்டர் ரேடியஸ் எவ்வளவு
போன்றவறை விவரிக்கலாம்,.
- border-style
- border-color
- border-width
- border-radius
CSS பார்டர் ஸ்டைல்:
None என்கின்ற இதற்கு
பொருத்தப் பட்டால் எந்த பார்டரும் தோன்றாது. Dotted என்கின்ற பண்பானது புள்ளிகள்
நிறைந்த பார்டரை தருகின்றது. Dashed என்கின்ற பண்பானது dash ஆக பார்டரில்
தோன்றும். Solid என்பது தொடர்ச்சியான பார்டரையும் double என்கின்ற பண்பானது இரட்டை
பார்டரையும் grove என்பது 3d பார்டரையும் தரும். Ridge என்கின்ற பண்பானது 3d ridge
பார்டரையும் தரும்
Css ஸ்டைல் பகுதி.
<style>
p.none {
border-style: none;
}
p.dotted {
border-style: dotted;
}
p.dashed {
border-style: dashed
;}
p.solid {
border-style: solid;
}
p.double {
border-style: double;
}
p.groove {
border-style: groove;
}
p.ridge {
border-style: ridge;
}
p.inset {
border-style: inset;
}
p.outset {
border-style: outset;
}
p.hidden {
border-style: hidden;
}
</style>
Html பகுதி:
<body>
<p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="hidden">A hidden border.</p>
</body>
</html>
Output:
2)
CSS பார்டர் அகலம்(
border-width)
இது பார்டர் எவ்வளவு அகலத்தில்(தடிமன்) இருக்க வேண்டும் என்பதை
குறிப்பிடப் பயன்படுகின்றது. இதற்கு thin, medium, thick போன்றவற்றையும் மதிப்பிருத்தலாம்..
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 10px;
}
p.two {
border-style: solid;
border-width: thin;
}
p.three {
border-style: solid;
border-width: 2px;
}
</style>
</head>
<body>
<p class="one">First paragraph.</p>
<p class="two">Second paragraph</p>
<p class="three">third paragraph</p>
</body>
</html>
கவனிக்கவும்:
பார்டர்
பண்பானது பெரும்பாலும் தனியாக பயன்படுத்தப்படுவதில்லை.
பார்டரின் நிறத்தை விவரித்தல்:
பார்டரின் நிறத்தை மூன்று வழிகளில் கூறலாம். அவையாவன
நேரடியாக நிறத்தை கூறுதல் உதாரணம்:
Blue
RGB பயன்படுத்தி விவரிக்கலாம். உதாரணம். Rgb(0,0,255)
அல்லது அந்த நிறத்தின்
ஹெக்சா டெசிமல் மதிப்பை பயன்படுத்தலாம்.உதாரணமாக நீல நிறத்தை கூறுவதற்கு
border-color:#0000ff
சான்று நிரல்:
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: blue;
}
p.two {
border-style: solid;
border-color: #ff0000;
}
</style>
</head>
<body>
<p class="one">This is a solid blue border</p>
<p class="two">This is a solid red border</p>
</body>
</html>
வெளியீடு:
இந்த
பண்பும் தனியே குறிப்பிடப்படுவதில்லை.
CSS display
இந்த பண்பானது ஒரு வெப் பக்கத்தின் லேய் அவுட்(layout) எவ்வாறு இருக்க
வேண்டும் என்பதை குறிப்பிடுவதற்கு பயன்படுகின்றது.
இந்த பண்பானது இயல்பாக inline என்கின்ற மதிப்பை கொண்டிருக்கும்.
Syntax
display:value;
CSS display மதிப்புகள்
பொதுவாக கீழ்வருவனை display என்கின்ற பண்பிற்கு மதிப்பிருத்தப்
படுகின்றது.
1. display:
inline;
2. display:
inline-block;
3. display:
block;
4. display:
run-in;
5. display:
none;
1)
CSS display inline
இந்த் ப்ராப்பர்ட்டியானது தொடர்ச்சியாக அதாவது லைன் ப்ரேக் ஆகாமல்
வெளியீடு அமைவதற்கு பயன்படுகின்றது.
சான்று நிரல்:
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: inline;
}
</style>
</head>
<body>
<p>hai!</p>
<p>I
am</p>
<p>muthu </p>
<p>karthikeyan</p>
</body>
</html>
வெளியீடு:
CSS display
inline-block
இதுவும் inline போன்றது தான் ஆனால் இதில் உங்களால் width, height
போன்ற மதிப்புகளை குறிப்பிட முடியும்.
<style>
p {
display: inline-block;
}
</style>
CSS
display block
இதன் மூலம் ஒரு எலெமெண்டை எவ்வளவு வித்(WIDTH) பயன்படுத்துவதற்கு
உள்ளதோ அனைதையும் பயன்படுத்துவதற்கு மற்றும் லைன் ப்ரேக் ஏற்படுத்துவதற்கு
இரண்டிற்கும் பயன் படுகின்றது.
சான்று நிரல்
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: block;
}
</style>
</head>
<body>
<p>Hello </p>
<p>I AM</p>
<p>MUTHU</p>
<p>KARTHIKEYAN</p>
</body>
</html>
வெளியீடு:
CSS display none
இந்த பண்பானது முற்றிலும் வெளியீட்டை மறைப்பதற்கு பயன்பபடுகின்றது.
மேலும் அந்த எலெமென்ட் ஆனது வெற்றிடத்தையும் ஏற்படுத்துவதில்லை.
சான்று நிரல்:
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
display: none;
}
</style>
</head>
<body>
<h1> Only
this heading is visible.</h1>
<h1 class="hidden">This is not visible.</h1>
</body>
</html>
வெளியீடு:
Only This heading is visible.
CSS
Float
இந்த பண்பானது positioning எனப்படும் குறிப்பிட்ட இடத்தில்
எலெமென்ட்டை இருத்துவதற்கு பயன் படுகின்றது. இது ஒரு எலெமெண்டை இடது அல்லது வலது
புறத்தில் இருத்துகின்றது. இது பொதுவாக இமேஜ் அல்லது லேய் அவுட் போன்ற வற்றிற்கு
பயன் படுகின்றது.
இது எவ்வாறு செயல்படுகின்றது?
இந்த பண்பை எலெமெண்டை இடது அல்லது வலது பக்கமாய் பொருத்த முடியுமே
தவிர மேலும் கீழுமாய் இருத்த முடியாது.
1. ஒரு எலெமெண்டை முடிந்த வரை இடது அல்லது வலது
புறத்தில் இருத்த பயன் படுகின்றது. இதை பயன்படுத்தி extreme இடது அல்லது வலது
புறத்திற்கு தள்ளலாம்
2. ஃப்ளோடிங் எலெமெண்டிற்கு அடுத்து வரும் எலெமெண்ட்
இதை சுற்றிலும் அமையும்
3. ஃப்ளோடிங் எலெமெண்டிற்கு முன்பு வரும் எலெமென்ட்
பாதிக்கப்படாது.
4. இமேஜ் ஆனது வலது புறத்தில் இருத்தப்பட்டால்
டெக்ஸ்ட் இடது புறத்திலும் இமேஜ் ஆனது இடது புறத்தில் இருத்தப\ப் பட்டால் டெக்ஸ்ட்
வலது புற்த்திலும் அமையும்.
சான்று நிரல்:
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<p>The following paragraph contains an image with style
<b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<img src="flower.jpg" alt="FLOWER IMAGE”/>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
வெளியீடு
முத்து கார்த்திகேயன்,மதுரை.
No comments:
Post a Comment