আউট লাইন এবং আউট লাইন স্টাইল |সি এস এস বাংলা টিউটোরিয়াল

আউট লাইন এবং আউট লাইন  স্টাইল

বর্ডার এর অনূরূপ ওয়েব পেজের অপর একটি গুরুত্বপূর্ণ উপাদান আউট লাইন।এইচ টি এম এল এবং সি এস এস ব্যবহার করে টেমপ্লেট ডিজাইন করার সময় বিভিন্ন মেসেজ বক্স, সাইডবার ইত্যাদি ডিজাইনের ক্ষেত্রে আউট লাইন ব্যবহার করা হয়।সি এস এস ব্যবহার করে বিভিন্ন ধরণের আউট লাইন তৈরি করা যায়।

বিভিন্ন ধরণের আউট লাইন তৈরির ক্ষেত্রে বেশ কিছু বিষয়ের উপর কাজ করতে হয়। এগুলো হচ্ছে,



  • আউট লাইন স্টাইল (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; ।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;}
h3{border:solid #666 10px;}
#dotted{outline-style:dotted;}
#dashed{outline-style:dashed;}
#double{outline-style:double;}
#groove{outline-style:groove;}
#ridge{outline-style:ridge;}
#inset{outline-style:inset;}
#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>

একটা  নোটপ্যাড  open  করে  উপরের code  টুকু  লিখে  file  মেনু  থেকে  Save as এ ক্লিক করে File name:  index.html  ,   Save as type : All files,  দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।



লেখকঃ অসীম কুমার
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।

কপি রাইট © ২০১১-২০১২ সর্বস্বত্ত্ব সংরক্ষিত, টিউটরিয়ালবিডি, একটি টিউটো ওয়েবস প্রতিষ্ঠান.