এই এলিমেন্টের একটি গোলাপি বর্ডার এবং 10px প্রস্থের একটি নীল আউটলাইন আছে।
একটি আউটলাইন হলো এলিমেন্টের চারপাশে, বর্ডারের বাইরে আঁকা একটি লাইন, যা এলিমেন্টটিকে "স্ট্যান্ড আউট" করাতে সাহায্য করে।
CSS-এ নিচের আউটলাইন প্রপার্টিগুলো আছে:
outline-styleoutline-coloroutline-widthoutline-offsetoutlineমনে রাখবেন: আউটলাইন বর্ডার থেকে আলাদা! বর্ডারের বিপরীতে, আউটলাইন এলিমেন্টের বর্ডারের বাইরে আঁকা হয়, এবং অন্য কনটেন্টের সাথে ওভারল্যাপ করতে পারে। এছাড়াও, আউটলাইন এলিমেন্টের ডাইমেনশনের অংশ নয়; আউটলাইনের প্রস্থ এলিমেন্টের মোট প্রস্থ ও উচ্চতাকে প্রভাবিত করে না।
outline-style প্রপার্টি আউটলাইনের স্টাইল নির্ধারণ করে, এবং এর নিচের যেকোনো একটি মান থাকতে পারে:
dotted - একটি ডটেড আউটলাইন নির্ধারণ করেdashed - একটি ড্যাশড আউটলাইন নির্ধারণ করেsolid - একটি সলিড আউটলাইন নির্ধারণ করেdouble - একটি ডাবল আউটলাইন নির্ধারণ করেgroove - একটি 3D গ্রুভড আউটলাইন নির্ধারণ করেridge - একটি 3D রিজড আউটলাইন নির্ধারণ করেinset - একটি 3D ইনসেট আউটলাইন নির্ধারণ করেoutset - একটি 3D আউটসেট আউটলাইন নির্ধারণ করেnone - কোনো আউটলাইন নির্ধারণ করে নাhidden - একটি লুকানো আউটলাইন নির্ধারণ করেনিচের উদাহরণে বিভিন্ন outline-style মান দেখানো হয়েছে:
একটি ডটেড আউটলাইন।
একটি ড্যাশড আউটলাইন।
একটি সলিড আউটলাইন।
একটি ডাবল আউটলাইন।
একটি গ্রুভ আউটলাইন। প্রভাবটি outline-color মানের উপর নির্ভর করে।
একটি রিজ আউটলাইন। প্রভাবটি outline-color মানের উপর নির্ভর করে।
একটি ইনসেট আউটলাইন। প্রভাবটি outline-color মানের উপর নির্ভর করে।
একটি আউটসেট আউটলাইন। প্রভাবটি outline-color মানের উপর নির্ভর করে।
বিভিন্ন আউটলাইন স্টাইলের একটি প্রদর্শনী:
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;}মনে রাখবেন: outline-style প্রপার্টি সেট না করা পর্যন্ত অন্য কোনো আউটলাইন প্রপার্টির কোনো প্রভাব থাকবে না!
আউটলাইনের রঙ সেট করতে outline-color প্রপার্টি ব্যবহার করা হয়।
রঙ সেট করা যায় এভাবে:
নিচের উদাহরণে বিভিন্ন রঙের কিছু আউটলাইন দেখানো হয়েছে। এটাও লক্ষ্য করুন যে এই এলিমেন্টগুলোর আউটলাইনের ভেতরে একটি পাতলা কালো বর্ডারও আছে:
একটি সলিড লাল আউটলাইন।
একটি ডাবল সবুজ আউটলাইন।
একটি আউটসেট হলুদ আউটলাইন।
p.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
}
p.ex2 {
border: 1px solid black;
outline-style: double;
outline-color: green;
}
p.ex3 {
border: 1px solid black;
outline-style: outset;
outline-color: yellow;
}নিচের উদাহরণে outline-color: invert ব্যবহার করা হয়েছে, যা একটি কালার ইনভার্সন করে। এটি নিশ্চিত করে যে যেকোনো ব্যাকগ্রাউন্ড রঙের ক্ষেত্রেই আউটলাইন দৃশ্যমান থাকবে:
একটি সলিড ইনভার্ট আউটলাইন।
p.ex1 {
border: 1px solid yellow;
outline-style: solid;
outline-color: invert;
}outline-width প্রপার্টি আউটলাইনের প্রস্থ নির্ধারণ করে,
এবং এর নিচের যেকোনো একটি মান থাকতে পারে:
নিচের উদাহরণে বিভিন্ন প্রস্থের কিছু আউটলাইন দেখানো হয়েছে:
একটি পাতলা আউটলাইন।
একটি মাঝারি আউটলাইন।
একটি মোটা আউটলাইন।
একটি 4px মোটা আউটলাইন।
p.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thin;
}
p.ex2 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: medium;
}
p.ex3 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thick;
}
p.ex4 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: 4px;
}outline প্রপার্টি হলো নিচের পৃথক আউটলাইন প্রপার্টিগুলো
সেট করার একটি শর্টহ্যান্ড প্রপার্টি:
outline-widthoutline-style (বাধ্যতামূলক)outline-colorউপরের তালিকা থেকে এক,
দুই, বা তিনটি মান দিয়ে outline প্রপার্টি নির্ধারণ করা হয়। মানগুলোর ক্রম
কোনো ব্যাপার নয়।
নিচের উদাহরণে শর্টহ্যান্ড outline
প্রপার্টি দিয়ে নির্ধারিত কিছু আউটলাইন দেখানো হয়েছে:
একটি ড্যাশড আউটলাইন।
একটি ডটেড লাল আউটলাইন।
একটি 5px সলিড হলুদ আউটলাইন।
একটি মোটা রিজ গোলাপি আউটলাইন।
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}outline-offset প্রপার্টি একটি এলিমেন্টের আউটলাইন এবং
এজ/বর্ডারের মধ্যে জায়গা যোগ করে। একটি এলিমেন্ট এবং তার আউটলাইনের মধ্যেকার
জায়গা স্বচ্ছ থাকে।
নিচের উদাহরণে বর্ডার এজের 15px বাইরে একটি আউটলাইন নির্ধারণ করা হয়েছে:
এই প্যারাগ্রাফের বর্ডার এজের 15px বাইরে একটি আউটলাইন আছে।
p {
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}নিচের উদাহরণে দেখানো হয়েছে যে একটি এলিমেন্ট এবং তার আউটলাইনের মধ্যেকার জায়গা স্বচ্ছ:
এই প্যারাগ্রাফের বর্ডার এজের 15px বাইরে একটি আউটলাইন আছে।
p {
margin: 30px;
background: yellow;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}| প্রপার্টি | বিবরণ |
|---|---|
| outline | এক ঘোষণায় outline-width, outline-style এবং outline-color সেট করার একটি শর্টহ্যান্ড প্রপার্টি |
| outline-color | একটি আউটলাইনের রঙ সেট করে |
| outline-offset | একটি আউটলাইন এবং এলিমেন্টের এজ বা বর্ডারের মধ্যেকার জায়গা নির্ধারণ করে |
| outline-style | একটি আউটলাইনের স্টাইল সেট করে |
| outline-width | একটি আউটলাইনের প্রস্থ সেট করে |