সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

সিএসএস টিউটোরিয়াল

হোম-HOME পরিচিতি-Introduction গঠনপ্রণালী-Syntax ব্যবহার পদ্ধতি-Use কালার-Color ব্যাকগ্রাউন্ড-Background বর্ডার-Border মার্জিন-Margin প্যাডিং-Padding উচ্চতা/প্রস্থ-Height/Width বক্সমডেল-BoxModel আউটলাইন-Outline টেক্সট-Text ফন্ট-Font লিংক-Link লিস্ট-List টেবিল-Table প্রদর্শনী-Display সর্বোচ্চ উচ্চতা-Maxwidth পজিশন-Position ওভারফ্লো-Overflow ফ্লট-Float ইনলাইন-ব্লক-Inlineblock এলাইন-Align কম্বিন্যাটর-Combinator সুডো-ক্লাস-PseudoClass সুডো-এলিমেন্ট-PseudoElement প্রোপার্টি-Opacity ন্যাভিগেশনবার-NavigationBar ড্রপডাউন-Dropdown টুলটিপ-Tooltip ইমেজ গ্যালারী-ImageGallery ইমেজ স্প্রাইট-ImageSprite এট্রিবিউট সিলেক্টর-AttrSelector ফর্ম-Form কাউন্টার-Counter

সিএসএস-৩

ভূমিকা-Introduction রাউন্ডেড কর্নার-RoundedCorner বর্ডারইমেজ-Border Image ব্যাকগ্রাউন্ড-Background কালার-Color গ্র্যাডিয়েন্ট-Gradient স্যাডো-Shadow টেক্সট-Text 3ফন্ট-Font 2D ট্রান্সফর্ম-Transform 3D ট্রান্সফর্ম-Transform ট্রানজিশন-Transition এনিমেশন-Animation ইমেজ-Image বাটন-Button পেজিনেশন-Pagination মাল্টি-কলাম-MultColumn ইউজার ইন্টারফেস-UserInterface বক্স সাইজিং-BoxSizing ফ্লেক্সবক্স-Flexbox মিডিয়া কুয়েরি-MediaQuery মিডিয়া কুয়েরি উদাহরণ

সিএসএস রেসপন্সিভ

রেসপন্সিভ পরিচিতি-Introduction রেসপন্সিভ ভিউপোর্ট-Viewport রেসপন্সিভ গ্রাইড ভিউ-Grid View রেসপন্সিভ মিডিয়া কুয়েরি-Media Query রেসপন্সিভ ইমেজ-Image রেসপন্সিভভিডিও-Video ফ্রেমওয়ার্ক-Frameworks

সিএসএস রেফারেন্স

রেফারেন্স-Reference সিলেক্টর-Selector ফাংশন-Function রেফারেন্স আউরাল-ReferenceAural ওয়েব সেফ ফন্ট-WebSafeFont এনিমেটেবল-Animatable ইউনিট-Unit PX-EM কনভার্টার-Converter কালার-Color কালার ভ্যালু-ColorValue ডিফল্ট ভ্যালু-DefaultValue ব্রাউজার সাপোর্ট-BrowserSupport

 

সিএসএস float এবং clear প্রোপার্টির মাধ্যমে লে-আউট তৈরি


একটি এলিমেন্ট ভাসমান(float) হবে কিনা, অর্থাৎ একটি এলিমেন্ট ডানে না বামে থাকবে তা নির্ধারণের জন্য সিএসএস float প্রোপার্টি ব্যবহার করা হয়।

ফ্লোটিং এলিমেন্টসমূহের আচরণ নিয়ন্ত্রণে রাখার জন্য clear প্রোপার্টি ব্যবহার করা হয়।

নিচে দুটি বাটনের সাহায্যে float এবং clear প্রোপার্টির ব্যবহার দেখানো হলোঃ

float:left ব্যবহার করে বামদিকে নেওয়া হয়েছে

float:right ব্যবহার করে ডানদিকে নেওয়া হয়েছে






এক নজরে সিএসএসে ব্যবহৃত float প্রোপার্টিসমূহ

float

একটি এলিমেন্ট ভাসমান(float) হবে কিনা তা নির্ধারণ করে।

clear

একটি এলিমেন্টকে ফ্লোটিং এলিমেন্টের নিচে(বামে বা ডানে) থাকতে বাধ্য করে।

overflow

কন্টেন্ট তার এলিমেন্ট বক্স থেকে উপচে পড়লে(overflow) কি ঘটে তা নির্ধারণ করে।

overflow-x

একটি এলিমেন্ট যদি তার কন্টেন্ট বক্স থেকে ডানে বা বামে উপচে পড়ে(overflow হয়) তাহলে কি হবে তা নির্ধারণ করে।

overflow-y

একটি এলিমেন্ট যদি তার কন্টেন্ট বক্স থেকে উপরে বা নিচে উপচে পড়ে(overflow হয়) তাহলে কি হবে তা নির্ধারণ করে।



float প্রোপার্টির ব্যবহার

সাধারণত ইমেজের চারপাশকে টেক্সট দিয়ে মোড়ানোর জন্য float প্রোপার্টি ব্যবহার করা হয়।

নিচের উদাহরণে টেক্সটের বামপাশে এবং ডানপাশে ইমেজকে ফ্লোট করে দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  .floatimg2 {
    float: right;
    margin: 0 010px 10px;
  }
  </style>
</head>
<body>

  <p>এই উদাহরণে, ইমেজটি অনুচ্ছেদের ডানদিকে ভেসে থাকবে এবং অনুচ্ছেদের লেখাগুলো ইমেজের বামদিকে থাকবেঃ</p>
  <div>
    <img class="floatimg2" src="images/satt.png" alt="Satt" width="100" height="120">
    <p>কম্পিউটার শিক্ষা বর্তমান সময়ের দাবি। যা ডিজিটালের সিড়ি। তাই দেশকে সত্যিকারেরর ডিজিটাল হিসাবে দেখতে চাইলে সরকারের
    সহিত আমাদেরকেও সমানভাবে এগিয়ে আসতে হবে, এবং কম্পিউটার শিক্ষা অর্জন করতে হবে। কিন্তু আমরা জেলাশহরে থাকার কারণে এবং 
    রাজধানী ঢাকা আমাদের থেকে অনেক দুরে অথবা অার্থিক কারণে আমরা যেমন ওয়েব ডিজাইন & ডেভেলোপমেন্ট/এন্ড্রয়েড/আই ও এস
    অ্যাপ্স তৈরির কথা চিন্তাও করতে পারিনা। এসব সমস্যার সমাধান হিসাবে SATT -এর জন্ম। স্যাট একাডেমি সম্পূর্ণ বিনামূল্যে ওয়েব ডিজাইন &
    ডেভেলোপমেন্টের উপর প্রশিক্ষণ দিচ্ছে।<p>
  </div>

</body>
</html>

ফলাফল





clear প্রোপার্টির ব্যবহার

ফ্লোটিং এলিমেন্টের আচরণ নিয়ন্ত্রনের জন্য clear প্রোপার্টি ব্যবহার করা হয়।

সাধারণত float এর কার্যকারিতা এর পরবর্তী এলিমেন্ট গুলো এর উপরে চলে আসে। তাই এটাকে এড়িয়ে যাওয়ার জন্য clear প্রোপার্টি ব্যবহার করা হয়।

একটি এলিমেন্টকে ফ্লোটিং এলিমেন্টের কোন পাশে ফ্লোট হওয়া থেকে বাধা দেবে তা নির্ধারণের জন্য clear প্রোপার্টিটি প্রয়োগ করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  .div1 {
    float: left;
    width: 100px;
    height: 50px;
    margin: 10px;
    border: 3px solid teal;
  }
  .div2 {
    border: 1px solid maroon;
  }
  .div3 {
    float: left;
    width: 100px;
    height: 50px;
    margin: 10px;
    border: 3px solid teal;
  }
  .div4 {
    border: 1px solid maroon;
    clear: left;
  }
  </style>
</head>
<body>

  <h2>clear ছাড়া কেমন হবে</h2>
  <div class="div1">div1</div>
  <div class="div2">div2 এ clear প্রোপার্টি ব্যবহার না করায়, div2 এর এলিমেন্ট div1 এ চলে এসেছে।</div>

  <h2>clear ব্যবহারের ফলে কেমন হবে</h2>
  <div class="div3">div3</div>
  <div class="div4">এখানে div3 এর নিচে div4 চলে এসেছে। clear প্রোপার্টির ভ্যালু "left" ব্যবহার করে বামদিকে নিয়ে আসা হয়েছে।
  আপনি ইচ্ছে করলে "right" এবং "both" যেকোন কিছু ব্যবহার করতে পারবেন।</div>
  
</body>
</html>

ফলাফল





overflow: auto; এর ব্যবহার

একটি এলিমেন্ট যদি তার কন্টেইনারের চেয়ে বড় এবং ফ্লোটিং হয় তাহলে ইহা এর কনটেইনার থেকে উপচে পড়বে।আরেকটি এলিমেন্ট আকারে বড় হয় তাহলে বড় অংশটি কন্টেইনারের বাহিরে ওভারফ্লো করবে।

এই সমস্যা সমাধাণের জন্য আমরা overflow: auto; ব্যবহার করতে পারি।

এই অধ্যায়ের পূর্ববর্তী অধ্যায়ে overflow সম্পর্কে বিস্তারিত আলোচনা করা হয়েছে।



ওয়েব লেআউটের উদাহরণ

float প্রোপার্টি ব্যবহারের মাধ্যমে একটি সাধারণ ওয়েবপেজের লে-আউট তৈরি করে দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  div {
    border: 1px solid teal;
  }
  .clearfix {
    overflow: auto;
  }
  nav {
    float: left;
    width: 200px;
    border: 1px solid OrangeRed;
  }
  section {
    margin-left: 206px;
    border: 1px solid Crimson;
  }
  </style>
</head>
<body>

  <div class="clearfix">
    <nav>
      <span>ন্যাভিগেশন</span>
      <ul>
        <li><a target="_blank" href="../index.php">হোম</a></li>
        <li><a target="_blank" href="index.php">সিএসএস</a></li>
        <li><a target="_blank" href="html/index.php">এইচটিএমএল</a></li>
        <li><a target="_blank" href="js/index.php">জাভাস্ক্রিপ্ট</a></li>
      </ul>
    </nav>

    <section>
      <span>সেকশন-১</span>
      <p>লক্ষ্য করুন div কন্টেনারে আমরা একটি clearfix রেখেছি। এই উদাহরণে এটির প্রয়োজন নাই,
      কিন্তু যদি সেকশন কন্টেন্ট থেকে নেভ এলিমেন্ট বড় হয় তখন এটির প্রয়োজন।</p>
    </section>

    <section>
      <span>সেকশন-২</span>
      <p>আমাদের প্রিয় জন্মভূমি বাংলাদেশ। ১৯৭১ সালের ১৬ই ডিসেম্বর লাখো শহিদের রক্তের বিনিময়ে প্রতিষ্ঠিত হয় স্বাধীন বাংলাদেশ।
      বাংলাদেশ প্রকৃতির আদুরে কন্যা।ছয়টি ঋতুে আলাদা রূপ-মাধুর্য নিয়ে আসে প্রকৃতিতে। নানা প্রজাতির ফুল, পাখি, গাছপালা, পাহাড়,
      সাগর এদেশের প্রকৃতিকে সমৃদ্ধ করেছে।</p>
    </section>
  </div>

</body>
</html>

ফলাফল