সিএসএস আউটলাইন (outline)
সিএসএস আউটলাইন
সিএসএস outline প্রোপার্টির মাধ্যমে আউটলাইনের স্টাইল, কালার এবং প্রস্থ সেট করা হয়।
আউটলাইন হলো একটি লাইন যা একটি এলিমেন্টকে আলাদাভাবে উপস্থাপন করার জন্য এলিমেন্টের বর্ডারের বাহিরে আঁকা হয়।
যাইহোক, আউটলাইন প্রোপার্টি বর্ডার হতে ভিন্ন একটি প্রোপার্টি। আউটলাইন একটি এলিমেন্টের মার্জিনের অংশ নয় এবং আউটলাইনের প্রস্থের(width) মাধ্যমে এলিমেন্টের সম্পূর্ন দৈর্ঘ্য এবং প্রস্থের উপরে কোন প্রভাব পড়ে না।
এই এলিমেন্টটিতে একটি লাল সরু বর্ডার এবং 7px চওড়া সবুজ কালারের একটি ডট আউটলাইন সেট করা হয়েছে।
এক নজরে সিএসএস আউটলাইন প্রোপার্টিসমূহ
একটি ডিক্লেয়ারেশনের মাধ্যমে আউটলাইনের সবগুলো প্রোপার্টি সেট করার জন্য একটি শর্টহ্যান্ড প্রোপার্টি।
আউটলাইনের স্টাইল সেট করার জন্য ব্যবহার করা হয়।
আউটলাইনের প্রস্থ(width) সেট করার জন্য ব্যবহার করা হয়।
আউটলাইনের কালার সেট করার জন্য ব্যবহার করা হয়।
একটি এলিমেন্টের আউটলাইন এবং বর্ডারের মাঝখানে স্পেস বা ফাঁকা রাখার জন্য এটি ব্যবহার করা হয়।
আউটলাইন স্টাইল
outline-style প্রোপার্টি দ্বারা আউটলাইনের স্টাইল নির্ধারণ করা হয়।
outline-style প্রোপার্টিতে নিচের ভ্যালুসমূহ ব্যবহার করা যায়ঃ
solid- একটি সলিড আউটলাইন নির্দেশ করে।double- একটি ডাবল আউটলাইন নির্দেশ করে।dotted- একটি ডটেড আউটলাইন নির্দেশ করে।dashed- একটি ড্যাশ আউটলাইন নির্দেশ করে।inset- একটি 3D inset আউটলাইন নির্দেশ করে।outline-colorএর ভ্যালুর উপর প্রভাব নির্ভর করে।outset- একটি 3D outset আউটলাইন নির্দেশ করে।outline-colorএর ভ্যালুর উপর প্রভাব নির্ভর করে।groove- একটি 3D groove আউটলাইন নির্দেশ করে।outline-colorএর ভ্যালুর উপর প্রভাব নির্ভর করে।ridge- একটি 3D ridge আউটলাইন নির্দেশ করে।outline-colorএর ভ্যালুর উপর প্রভাব নির্ভর করে।hidden- আউটলাইনকে হাইড করার জন্য ব্যবহার করা হয়।none- কোন আউটলাইন না প্রদর্শনের জন্য ব্যবহার করা হয়।
এই উদাহরণে, প্রত্যেকটি <p> এলিমেন্টের চারপাশে একটি সরু কালো বর্ডার সেট করে, ভিন্ন ভিন্ন outline-style প্রোপার্টির ভ্যালুসমূহ সেট করে দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p {
color: blue;
background: white;
border: 3px solid red;
outline-color: blue;
}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
</style>
</head>
<body>
<h2>outline-style প্রোপার্টির ব্যবহার</h2>
<p class="dotted">ডটেড আউটলাইন</p>
<p class="dashed">dashed আউটলাইন</p>
<p class="solid">সলিড আউটলাইন</p>
<p class="double">ডাবল আউটলাইন</p>
<p class="groove">groove আউটলাইন</p>
<p class="ridge">ridge আউটলাইন</p>
<p class="inset">inset আউটলাইন</p>
<p class="outset">outset আউটলাইন</p>
</body>
</html>
ফলাফল
আউটলাইনের প্রস্থ(width)
আউটলাইনের প্রস্থ সেট করার জন্য outline-width প্রোপার্টিটি ব্যবহার করা হয়।
সিএসএসে প্রস্থ নির্ণয়ের বিভিন্ন একক যেমন- px, pt, cm, em ইত্যাদি ব্যবহার করে আউটলাইনের প্রস্থ সেট করা হয় অথবা পূর্ব নির্দিষ্ট ভ্যালু যেমনঃ- thin, medium এবং thick ইত্যাদি ব্যবহার করেও আউটলাইনের প্রস্থ সেট করা যায়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p {border: 4px solid green;}
p.para1 {
outline-style: solid;
outline-color: royalblue;;
outline-width: thick;
}
p.para2 {
outline-style: solid;
outline-color: red;
outline-width: 4px;
}
</style>
</head>
<body>
<h2>outline-width প্রোপার্টির ব্যবহার</h2>
<p class="para1">প্রাকৃতিক সৌন্দর্যের দেশ বাংলাদেশ।</p>
<p class="para2">প্রাকৃতিক সৌন্দর্যের দেশ বাংলাদেশ।</p>
</body>
</html>
ফলাফল
আউটলাইন কালার
আউটলাইনের কালার সেট করার জন্য outline-color প্রোপার্টিটি ব্যবহার করা হয়।
নিচের যেকোনো একটি পদ্ধতি ব্যবহার করে কালার সেট করা যায়ঃ
- name - কালারের নাম ব্যবহার করে, যেমন
"red" - Hex - হেক্সাডেসিমাল ভ্যালু ব্যবহার করে, যেমন
"#ff0000" - RGB - RGB ভ্যালু ব্যবহার করে, যেমন
"rgb(255,0,0)"
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p {
color: blue;
border: 3px solid red;
outline-style: solid;
outline-color: black;
}
</style>
</head>
<body>
<h1>outline-color প্রোপার্টির ব্যবহার</h1>
<p>প্রাকৃতিক সৌন্দর্যের দেশ বাংলাদেশ।</p>
</body>
</html>
ফলাফল
আউটলাইন শর্টকাট প্রোপার্টি
আপনি উপরের উদাহরণ গুলো লক্ষ্য করলে দেখবেন যে, আউটলাইনের কিছু উপ-আউটলাইন প্রোপার্টি রয়েছে এবং এক্ষেত্রে কোডের দৈর্ঘ্যও বেড়ে গিয়েছে।
তাই কোড সংক্ষিপ্ত করার জন্য, একটি আউটলাইন প্রোপার্টির মধ্যে সবগুলো আউটলাইন প্রোপার্টি ব্যবহার করা হয়।
নিচের উপ-আউটলাইন প্রোপার্টিসমূহের শর্টকাট প্রোপার্টি হলো outline
outline-widthoutline-style(আবশ্যক)outline-color
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p {
color: green;
border: 3px solid blue;
outline: 4px dotted brown;
}
</style>
</head>
<body>
<h1>outline প্রোপার্টি</h1>
<p>প্রাকৃতিক সৌন্দর্যের দেশ বাংলাদেশ।</p>
</body>
</html>
ফলাফল