আউটলাইন হল একটি লাইন যা কোন এইচটিএমএল এলিমেনটের চারপাশে অর্থাৎ বর্ডারের শেষপ্রান্তে প্রদর্শিত হয়। সিএসএস এর outline প্রোপার্টি ব্যবহার করে কোন এলিমেন্ট আউটলাইনের style, color এবং width নির্ধারণ করা হয়।
এটি একটি 20px প্রস্থ সম্পন্ন আউটলাইন যার 5px এর বর্ডার রয়েছে।
যে সকল আউটলাইন প্রোপার্টি ব্যবহার করে কোন এইচটিএমএল এলিমেন্ট এর স্টাইল করা যায় সেগুলো হল - outline-width, outline-style এবং outline-color.
সকল আউটলাইন প্রোপার্টি ব্যবহার করে নিচে একটি উদাহরন দেখুন।
div { outline-width:5px; outline-style:solid; outline-color: blue; }
সিএসএস এর outline-width প্রোপার্টি ব্যবহার করে কোন এলিমেন্ট বর্ডার এর চারপাশে আউটলাইন এর প্রস্থ বা width নির্ধারণ করা হয়। এই প্রোপার্টির মান বা value নির্ধারণ করা যায় thin (সাধারণত 1px), medium (সাধারণত 3px), thick (সাধারণত 5px) অথবা নির্দিষ্ট আকার যেমন - px, em, cm, % ইত্যাদি একক বা unit ব্যবহার করে।
বিভিন্ন রকম মান ব্যবহার করে, border-width প্রোপার্টির একটি উদাহরন নিচে দেখুন।
div#thick { border: 2px solid green; outline-style: solid; outline-color: blue; outline-width: thick; } div#thin { border: 2px solid blue; outline-style: solid; outline-color: green; outline-width: thin; }
সিএসএস এর outline-style প্রোপার্টি ব্যবহার করে কোন এলিমেন্ট বর্ডার এর চারপাশে আউটলাইন এর প্রকার বা style নির্ধারণ করা হয়। এই প্রোপার্টির মান বা value ৯ প্রকার হতে পারে, যেমন - solid, dotted, double ইত্যাদি।
বিভিন্ন রকম মান ব্যবহার করে, outline-style প্রোপার্টির একটি উদাহরন নিচে দেখুন।
div#solid { border: 2px solid blue; outline-style: solid; outline-color: green; outline-width: thin; } div#dotted { border: 2px solid blue; outline-style: dotted; outline-color: red; outline-width: thick; }
কোন প্রকার স্টাইলের আউটলাইন, বর্ডার এর সাথে প্রদর্শিত হবে তা নির্ধারণ করা হয় outline-style প্রপার্টির মাধ্যমে। outline-style প্রপার্টিতে যে সকল মান বা value ব্যবহার করা যায়, এগুলো হল - dotted, dashed, solid, double, groove, ridge, inset এবং outset.
নিচে outline-style প্রপার্টির এই মান গুলোর ব্যাবহারিক উদাহরণ দেখুন।
A solid outline
A dotted outline
A dashed outline
A double outline
A groove outline
A ridge outline
An inset outline
An outset outline
সিএসএস এর outline-color প্রোপার্টি ব্যবহার করে বর্ডার এর চারপাশের আউটলাইন এর রঙ নির্ধারণ করা হয়। সিএসএস সমর্থিত সকল পদ্ধতি ব্যবহার করে, outline-color প্রোপার্টির মান নির্ধারণ করা যায়।
বিভিন্ন রকম মান ব্যবহার করে, নিচে outline-color প্রোপার্টির একটি উদাহরন দেখুন।
div#name { outline-style: solid; outline-color: blue; } div#hex { outline-style: dotted; outline-color: #0000ff; } div#rgb { outline-style: dashed; outline-color: rgb(0, 0, 255); }
সিএসএস সমর্থিত রঙ এর ব্যবহার পদ্ধতি গুলো সম্পর্কে জানতে আমাদের সিএসএস - রঙ টিউটোরিয়াল ওয়েব পেজটি ব্রাউজ করুন।
সিএসএস এর outline-offset প্রোপার্টি ব্যবহার করে, আউটলাইন এবং এলিমেন্টের কিনারা অর্থাৎ বর্ডার এর মধ্যবর্তী স্থানে ফাঁকা স্থান বা space তৈরি করা হয়। এর মান বা value নির্ধারণ করা যায় px, em, cm ইত্যাদি একক ব্যবহার করে।
outline-offset প্রোপার্টি ব্যবহার করে, নিচে একটি উদাহরন দেখুন।
p { margin: 40px; border: 2px solid teal; outline: 10px solid red; outline-offset: 25px; }
কোন এলিমেন্ট বর্ডার এর আউটলাইন নির্ধারন করার জন্য outline-width, outline-style এবং outline-color প্রোপার্টি গুলোর শর্টহ্যান্ড হল outline প্রোপার্টি
নিচে outline প্রোপার্টির সিনট্যাক্স দেখুন।
silector {outline: width style color}
এক্ষেত্রে প্রথম মানটি আউটলাইন এর প্রস্থ বা width, দ্বিতীয়টি প্রকার বা style এবং তৃতীয়টি আউটলাইন এর রঙ নির্ধারণ করে।
নিচে outline প্রোপার্টি ব্যবহার করে একটি উদাহরন দেখুন
div { outline: 10px solid forestgreen; }
শর্টহ্যান্ড প্রোপার্টিকে আরও সুক্ষ ভাবে ব্যবহার করার জন্য নিচের প্রোপার্টি গুলো ব্যবহার করা যায় - outline-left outline-right outline-top outline-bottom
নিচে একটি উদাহরন দেখুন, যেখানে একটি এলিমেন্ট বর্ডার এর চারপাশে ৪ প্রকার ভিন্ন আউটলাইন নির্ধারণ করা হয়েছে।
div { bordar: 3px solid black; outline-left: 5px soltd red; outline-right: 6px dotted blue; outline-top: 7px dashed green; outline-bottom: 8px groove yellow; }
outline-style প্রোপার্টিকেও শর্টহ্যান্ড হিসেবে ব্যবহার করা যায়। নিচে একটি উদাহরন দেখুন, যেখানে একটি এলিমেন্ট বর্ডার এর চারপাশে ৪ প্রকার ভিন্ন আউটলাইন নির্ধারণ করা হয়েছে।
div { bordar: 3px solid black; outline-style: dotted dashed double solid; }
প্রোপার্টি | মান | বর্ণনা |
---|---|---|
outline | ||
outline-width | ||
outline-style | ||
outline-color | ||
outline-offset |