ওয়েব স্কুল বিডি : সুপ্রিয় শিক্ষার্থী বন্ধুরা, শুভেচ্ছা নিয়ো। আমরা গত পর্বে মার্জিন এবং প্যাডিং নিয়ে আলোচনা করেছিলাম। আজ তোমাদের
আউট লাইন নিয়ে আলোচনা করা হলো :
আউট লাইন:
আউট লাইন স্ট্যাইল:
আউট লাইন স্ট্যাইল নির্দেশ করে আউট লাইনটি দেখতে কেমন হবে।আউট লাইন স্ট্যাইল তৈরির জন্য Declaration করতে হবে, outline-style:dotted; এর অনুরূপ। সি এস এস ব্যবহার করে বিভিন্ন ধরণের আউট লাইন তৈরি করা যায়। ডটেড স্ট্যাইল আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-style:dotted; ড্যাসেড স্ট্যাইল আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-style:dashed; ডাবল স্ট্যাইল আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-style:double; গ্রোভ স্ট্যাইল আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-style:groove; রিডজ স্ট্যাইল আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-style:ridge; ইনসেট স্ট্যাইল আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-style:inset; আউটসেট স্ট্যাইল আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-style:outset; ।
আউট লাইন ওয়াইডথ (Outline Width):
আউট লাইন ওয়াইডথ নির্দেশ করে আউট লাইনটি কতটা মোটা হবে।আউট লাইন ওয়াইডথ নির্ধারণের জন্য Declaration করতে হবে, outline-width:thin; এর অনুরূপ। সি এস এস ব্যবহার করে বিভিন্ন ধরণের আউট লাইন ওয়াইডথ নির্ধারণ করা যায়।থিন আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-width:thin; মিডিয়াম আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-width:medium; থিক আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-width:thick; 1px বা ১ পিক্সেল চওড়া আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-width:1px; 10px বা ১০ পিক্সেল চওড়া আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-width:10px;।
আউট লাইন কালার (Outline Color):
আউট লাইন কালার নির্দেশ করে আউট লাইনটির রং কেমন হবে।আউট লাইন কালার নির্ধারণের জন্য Declaration করতে হবে, outline-color:yellow; এর অনুরূপ। সি এস এস ব্যবহার করে বিভিন্ন ধরণের আউট লাইন কালার নির্ধারণ করা যায়।হলুদ রঙের আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-color:yellow; পিংক কালারের আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-color:pink; rgb পদ্ধতিতেও আউট লাইন কালার রির্ধারণ করা যায়, এ পদ্ধতিতে আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-color:rgb(240,060,155); hex পদ্ধতিতেও আউট লাইন কালার রির্ধারণ করা যায়, এ পদ্ধতিতে আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-color:#ff0000; ।
আউট লাইন:
বর্ডার এর অনূরূপ ওয়েব পেজের অপর একটি গুরুত্বপূর্ণ উপাদান আউট লাইন।এইচ টি এম এল এবং সি এস এস ব্যবহার করে টেমপ্লেট ডিজাইন করার সময় বিভিন্ন মেসেজ বক্স, সাইডবার ইত্যাদি ডিজাইনের ক্ষেত্রে আউট লাইন ব্যবহার করা হয়।সি এস এস ব্যবহার করে বিভিন্ন ধরণের আউট লাইন তৈরি করা যায়।
বিভিন্ন ধরণের আউট লাইন তৈরির ক্ষেত্রে বেশ কিছু বিষয়ের উপর কাজ করতে হয়। এগুলো হচ্ছে
- আউট লাইন স্টাইল (Outline Style)
- আউট লাইন ওয়াইডথ (Outline Width)
- আউট লাইন কালার (Outline Color)
আউট লাইন স্ট্যাইল:
আউট লাইন স্ট্যাইল নির্দেশ করে আউট লাইনটি দেখতে কেমন হবে।আউট লাইন স্ট্যাইল তৈরির জন্য Declaration করতে হবে, outline-style:dotted; এর অনুরূপ। সি এস এস ব্যবহার করে বিভিন্ন ধরণের আউট লাইন তৈরি করা যায়। ডটেড স্ট্যাইল আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-style:dotted; ড্যাসেড স্ট্যাইল আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-style:dashed; ডাবল স্ট্যাইল আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-style:double; গ্রোভ স্ট্যাইল আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-style:groove; রিডজ স্ট্যাইল আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-style:ridge; ইনসেট স্ট্যাইল আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-style:inset; আউটসেট স্ট্যাইল আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-style:outset; ।
আউট লাইন ওয়াইডথ (Outline Width):
আউট লাইন ওয়াইডথ নির্দেশ করে আউট লাইনটি কতটা মোটা হবে।আউট লাইন ওয়াইডথ নির্ধারণের জন্য Declaration করতে হবে, outline-width:thin; এর অনুরূপ। সি এস এস ব্যবহার করে বিভিন্ন ধরণের আউট লাইন ওয়াইডথ নির্ধারণ করা যায়।থিন আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-width:thin; মিডিয়াম আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-width:medium; থিক আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-width:thick; 1px বা ১ পিক্সেল চওড়া আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-width:1px; 10px বা ১০ পিক্সেল চওড়া আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-width:10px;।
আউট লাইন কালার (Outline Color):
আউট লাইন কালার নির্দেশ করে আউট লাইনটির রং কেমন হবে।আউট লাইন কালার নির্ধারণের জন্য Declaration করতে হবে, outline-color:yellow; এর অনুরূপ। সি এস এস ব্যবহার করে বিভিন্ন ধরণের আউট লাইন কালার নির্ধারণ করা যায়।হলুদ রঙের আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-color:yellow; পিংক কালারের আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-color:pink; rgb পদ্ধতিতেও আউট লাইন কালার রির্ধারণ করা যায়, এ পদ্ধতিতে আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-color:rgb(240,060,155); hex পদ্ধতিতেও আউট লাইন কালার রির্ধারণ করা যায়, এ পদ্ধতিতে আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-color:#ff0000; ।
অনুশীলন প্রজেক্ট:
<html>
<head>
<title> www.webschoolbd.com</title>
<style>
body{background:#00CC99;}
h3{border:solid #666 10px;}
#dotted{
<head>
<title> www.webschoolbd.com</title>
<style>
body{background:#00CC99;}
h3{border:solid #666 10px;}
#dotted{
outline-style:dotted;
outline-width:thin;
outline-color:yellow;
}
#dashed{
#dashed{
outline-style:dashed;
outline-width:medium;
outline-color:pink;
}
#double{
#double{
outline-style:double;
outline-width:thick;
outline-color:rgb(240,060,155);
}
#groove{
#groove{
outline-style:groove;
outline-width:1px;
outline-color:#ff0000;
}
#ridge{
#ridge{
outline-style:ridge;
outline-width:10px;
outline:red 10px double;
}
#inset{
#inset{
outline-style:inset;
outline-width:5px;
}
#outset{ outline-style:outset;}
</style>
</head>
<body >
<h3 id="dotted">This is an example of dotted outline.</h3>
<h3 id="dashed">This is an example of dashed outline.</h3>
<h3 id="double">This is an example of double outline.</h3>
<h3 id="groove">This is an example of groove outline.</h3>
<h3 id="ridge">This is an example of ridge outline.</h3>
<h3 id="inset">This is an example of inset outline.</h3>
<h3 id="outset">This is an example of outset outline.</h3>
</body> </body>
</html>
#outset{ outline-style:outset;}
</style>
</head>
<body >
<h3 id="dotted">This is an example of dotted outline.</h3>
<h3 id="dashed">This is an example of dashed outline.</h3>
<h3 id="double">This is an example of double outline.</h3>
<h3 id="groove">This is an example of groove outline.</h3>
<h3 id="ridge">This is an example of ridge outline.</h3>
<h3 id="inset">This is an example of inset outline.</h3>
<h3 id="outset">This is an example of outset outline.</h3>
</body> </body>
</html>
Tags
CSS