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

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

হোম-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

 

সিএসএস display এবং visibility


সিএসএসের মাধ্যমে একটি ওয়েবপেজকে সুন্দরভাবে উপস্থাপনের জন্য সবচেয়ে বেশি ব্যবহৃত এবং গুরুত্বপূর্ন প্রোপার্টি হলো display প্রোপার্টি।


এক নজরে সিএসএস display এবং visibility প্রোপার্টি

display

এইচটিএমএল এলিমেন্ট কিভাবে প্রদর্শিত হবে তা উল্লেখ করে।

visibility

এইচটিএমএল এলিমেন্টটি দৃশ্যমান হবে কিনা তা উল্লেখ করে।



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

একটি এলিমেন্টকে কিভাবে প্রদর্শন করানো হবে তা display প্রোপার্টির মাধ্যমে নির্ধারণ করা হয়।

এলিমেন্টের ধরনের উপর ভিত্তি করে অধিকাংশ এইচটিএমএল এলিমেন্টেরই একটি ডিফল্ট display ভ্যালু রয়েছে। অধিকাংশ এলিমেন্টের ডিফল্ট ভ্যালু হলো inline অথবা block



এইচটিএমএল ইনলাইন এলিমেন্ট

একটি ইনলাইন এলিমেন্ট নতুন লাইনে শুরু হয় না এবং যতটুকু দৈর্ঘ্য প্রয়োজন ততটুকুই নেয়।

এটি একটি প্যারাগ্রাফ এলিমেন্ট। এই প্যারাগ্রাফের মধ্যে ইনলাইন <span> এলিমেন্ট রয়েছে।

কয়েকটি ইনলাইন এলিমেন্ট নিম্নে দেখানো হলোঃ

  • <a>
  • <span>
  • <img>
  • <input>

  • উদাহরণ

    <!DOCTYPE html>
    <html>
    <body>
    
      <h2>ইনলাইন এলিমেন্টের ব্যবহার</h2>
    
      <a href="index.php" target="_blank">সিএসএস হোম</a>
      <span>span</span>
      <input placeholder="input">
    
    </body>
    </html>
    

    ফলাফল

    
    
    


    এইচটিএমএল ব্লক-লেভেল এলিমেন্ট

    এইচটিএমএল ব্লক-লেভেল(block-level) এলিমেন্ট সবসময়ই একটি নতুন লাইন দিয়ে শুরু হয় এবং এর কন্টেইনারের বাম পাশ থেকে ডান পাশ পর্যন্ত সম্পূর্ণ অংশ দখল করে।

    এটি একটি <div> এলিমেন্ট, যা একটি ব্লক লেভেল এলিমেন্ট।

    কয়েকটি ব্লক-লেভেল এলিমেন্ট নিম্নে দেখানো হলঃ

  • <div>
  • <h1> - <h6>
  • <p>
  • <ul>
  • <form>
  • <li>
  • <header>
  • <footer>
  • <article>
  • <section>

  • উদাহরণ

    <!DOCTYPE html>
    <html>
    <body>
    
      <h2>ব্লক-লেভেল এলিমেন্টের ব্যবহার</h2>
    
      <h3>শিরোনাম</h3><p>প্যারাগ্রাফ</p><article>আর্টিকেল</article>
    
    </body>
    </html>
    

    ফলাফল

    
    
    


    এলিমেন্টের ডিফল্ট display ভ্যালু পরিবর্তন

    আমরা ইতিমধ্যেই দেখেছি যে, প্রত্যেকটি এইচটিএমএল এলিমেন্টের জন্য একটি ডিফল্ট display ভ্যালু ব্যবহৃত হয়। যেমন- inline অথবা block। আপনি সিএসএস display প্রোপার্টি ব্যবহার করে এই ভ্যালু পরিবর্তন করতে পারেন।

    এইচটিএমএল এলিমেন্ট সমূহকে আপনি আপনার মত করে উপস্থাপন করার জন্য একটি ইনলাইন এলিমেন্টকে একটি ব্লক লেভেল এলিমেন্ট অথবা একটি ব্লক লেভেল এলিমেন্টকে ইনলাইন এলিমেন্টে রূপান্তরিত করতে পারেন। এতে ওয়েবে স্ট্যান্ডার্ড ভঙ্গ হয় না।

    হরিজন্টাল মেনুবার তৈরি করার জন্য <li> এলিমেন্টকে আমরা প্রায়ই ইনলাইন এলিমেন্টে রূপান্তরিত করি।

    উদাহরণ

    <!DOCTYPE html>
    <html>
    <head>
      <title>সিএসএস উদাহরণ</title>
      <style>
      li {
        display: inline;
      }
      </style>
    </head>
    <body>
    
      <p>লিস্টের লিংক গুলো হরিজন্টাল ভাবে প্রদর্শিত হবে।</p>
      <ul>
        <li><a href="../html/index.php" target="_blank">এইচটিএমএল</a></li>
        <li><a href="../css/index.php" target="_blank">সিএসএস</a></li>
        <li><a href="../js/index.php" target="_blank">জাভাস্ক্রিপ্ট</a></li>
      </ul>
    
    </body>
    </html>
    

    ফলাফল

    
    
    

    বিঃদ্রঃ একটি এইচটিএমএল এলিমেন্ট কিভাবে প্রদর্শিত হবে তা ঠিক করে দেওয়ার জন্য সিএসএস display প্রোপার্টি ব্যবহার করা হয়। এলিমেন্টের ধরণ পরিবর্তন করার জন্য display প্রোপার্টি ব্যবহার করা হয় না। সুতরাং প্রোপার্টি-ভ্যালু display: block; সম্বলিত কোনো এইচটিএমএল এলিমেন্টের মধ্যে একই লাইনে অন্য কোনো এলিমেন্ট অবস্থান নিতে পারে না।


    নিচের উদাহরণে <span> এলিমেন্টকে ব্লক এলিমেন্ট হিসাবে প্রদর্শন করানো হলোঃ

    উদাহরণ

    <!DOCTYPE html>
    <html>
    <head>
      <title>সিএসএস উদাহরণ</title>
      <style>
      span {
        display: block;
      }
      </style>
    </head>
    <body>
    
      <p>নিচের span এলিমেন্টগুলো দুটি ভিন্ন লাইনে প্রদর্শিত হবে।</p>
      <span>এটি একটি span এলিমেন্ট</span><span>এটিও একটি span এলিমেন্ট</span>
    
    </body>
    </html>
    

    ফলাফল

    
    
    

    নিচের উদাহরণে <a> এলিমেন্টকে ব্লক এলিমেন্ট হিসাবে প্রদর্শন করানো হলোেঃ

    উদাহরণ

    <!DOCTYPE html>
    <html>
    <head>
      <title>সিএসএস উদাহরণ</title>
      <style>
      li {
        display: block;
      }
      </style>
    </head>
    <body>
    
      <p>লিস্টের লিংক গুলো ব্লক এলিমেন্টে প্রদর্শিত হবে।</p>
      <ul>
        <li><a href="../html/index.php" target="_blank">এইচটিএমএল</a></li>
        <li><a href="../css/index.php" target="_blank">সিএসএস</a></li>
        <li><a href="../js/index.php" target="_blank">জাভাস্ক্রিপ্ট</a></li>
      </ul>
    
    </body>
    </html>
    

    ফলাফল

    
    
    


    display: none; এর ব্যবহার

    একটি এলিমেন্টকে ডিলেট না করে বা পূনরায় সৃষ্টি না করে লুকানো অথবা দেখানোর জন্য জাভাস্ক্রিপ্টের সাথে display: none; প্রোপার্টি ব্যবহার করা হয়।

    <script> এলিমেন্টে ডিফল্টভাবে display: none; ব্যবহৃত হয়।



    উদাহরণ

    <!DOCTYPE html>
    <html>
    <head>
      <title>সিএসএস উদাহরণ</title>
      <style>
      li.display_none {
        display: none;
      }
      </style>
    </head>
    <body>
    
      <h2>"display:none;" এর ব্যবহার</h2>
      <ul>
        <li><a href="../html/index.php" target="_blank">এইচটিএমএল</a></li>
        <li class="display_none"><a href="../css/index.php" target="_blank">সিএসএস</a></li>
        <li><a href="../js/index.php" target="_blank">জাভাস্ক্রিপ্ট</a></li>
      </ul>
    
    </body>
    </html>
    

    ফলাফল

    
    
    


    এলিমেন্টকে সুপ্ত অবস্থায় রাখা

    এইচটিএমএল এলিমেন্টকে সুপ্ত(hidden) অবস্থায় রাখতে হলে প্রোপার্টি-ভ্যালু display: none; অথবা visibility:hidden ব্যবহার করতে হয়।

    display: none; ব্যবহার করলে এইচটিএমএল পেজ এমনভাবে প্রদর্শিত হবে মনে হবে সুপ্ত এলিমেন্টটি এই পেজে নেই।

    উদাহরণ

    <!DOCTYPE html>
    <html>
    <head>
      <title>সিএসএস উদাহরণ</title>
      <style>
      li.hidden {
        visibility: hidden;
      }
      </style>
    </head>
    <body>
    
      <h2>"visibility:hidden;" এর ব্যবহার</h2>
      <ul>
        <li><a href="../html/index.php" target="_blank">এইচটিএমএল</a></li>
        <li class="hidden"><a href="../css/index.php" target="_blank">সিএসএস</a></li>
        <li><a href="../js/index.php" target="_blank">জাভাস্ক্রিপ্ট</a></li>
      </ul>
    
    </body>
    </html>
    

    ফলাফল