Awesome! টিউনস
সকল Awesome! টিউনস

সিএসএস শিখুন ক্যারিয়ার গড়ুন [পর্ব-০৬] :: ইনলাইন ব্লক যেভাবে করবেন

2,675 দেখা 0 টিউমেন্টস জোসস
টিউন বিভাগ সিএসএস
প্রকাশিত
Level 2

13 টিউনস 9 টিউমেন্টস 1 ফলোয়ার

হ্যালো আপনারা সবাই কেমন আছেন। আজ অনেকদিন পর আমার চেইন টিউনের একটি পর্ব আপনাদের সাথে শেয়ার করতেছি। আশা করতেছি এখন থেকে নিয়মিত ভাবে টিউন করব। যাই হোক,

আমি আজ আপনাদের বলব সিএসএস-এ ইনলাইন ব্লক কিভাবে করবেন। তো চলুন কথা না বাড়িয়ে আমাদের আজকের টপিকে চলে যাই। শুরুতে আপনাদের আমি কিছু কোড দিচ্ছি লক্ষ করুন।

<!DOCTYPE html>
<html>
<head>
<style>
span.a {display: inline; /* the default for span */ width: 100px; height: 100px; padding: 5px; border: 1px solid red; background-color: yellow;}

span.b {display: inline-block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow;}

span.c {display: block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow;}
</style>
</head>
<body>

<h1>The display Property</h1>

<h2>display: inline</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="a">Aliquam</span> <span class="a">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>

<h2>display: inline-block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="b">Aliquam</span> <span class="b">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>

<h2>display: block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="c">Aliquam</span> <span class="c">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>

</body>
</html>

এখন আপনি যদি এই কোড রান করেন তাহলে দেখতে পারবেন যে একটা আর্টিকেলে এর মাঝে কিছু বক্স তৈরী হয়েছে এবং সেই সাথে বিভিন্ন কালার ধারণ করেছে।

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

সিএসএস-এ ইনলাইন ব্যবহার একটি প্রয়োজনীয় বিষয় তাই যখন এর কাজ করবেন তখন অবশ্যই এর কালার ডিফেনেশন এর ব্যাপারটাও মনে রাখতে হবে। তাছাড়াও বক্সের মডেল, সাইজ, মার্জিন, ব্যাকগ্রাউন্ড এগুলোও খেয়াল রাখতে হবে। উল্লেখ্য, মার্জিন আর ব্যাকগ্রাউন্ড এর কালার আলাদা হতে হবে।

আজ এই পর্যন্ত কোনো কিছু জানার প্রয়োজন হলে আমাকে জানান। আর অবশ্যই নিযমিত চর্চা করুন। একমাত্র চর্চাই আপনার দক্ষতা বৃদ্ধিতে সহায়ক।

Level 2

আমি মাহাদী হাসান। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 5 বছর 4 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 13 টি টিউন ও 9 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 1 টিউনারকে ফলো করি।

নতুন কিছু শিখতে ভীষণ আগ্রহী

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস