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

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

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

 

সিএসএস লিস্ট


এইচটিএমএল লিস্টকে বিভিন্নভাবে মার্কিং করার জন্য সিএসএস list-* প্রোপার্টি ব্যবহার করা হয়।



এইচটিএমএল লিস্ট এবং সিএসএস লিস্ট প্রোপার্টি

এইচটিএমএলে সাধারণত দুই ধরনের লিস্ট রয়েছেঃ

  • আন-অর্ডার লিস্ট (<ul>): - লিস্ট আইটেম গুলোকে বুলেট চিহ্ন দিয়ে মার্কিং করে।
  • অর্ডার লিস্ট (<ol>): - লিস্ট আইটেম গুলোকে সংখ্যা বা অক্ষর দিয়ে মার্কিং করে।


সিএসএস list প্রোপার্টির মাধ্যমে আপনি নিম্নোক্ত স্টাইলসমূহ করতে পারবেনঃ

  • অর্ডার লিস্টের আইটেমগুলোকে বিভিন্নভাবে মার্কিং করতে পারবেন।
  • আন-অর্ডার লিস্টের আইটেমগুলোকে বিভিন্নভাবে মার্কিং করতে পারবেন।
  • ইমেজ দিয়ে লিস্ট আইটেমকে মার্কিং করতে পারবেন।
  • লিস্ট এবং লিস্ট আইটেমে ব্যাকগ্রাউন্ড কালার সেট করতে পারবেন।

এক নজরে সিএসএস লিস্ট প্রোপার্টিসমূহ

প্রোপার্টি বর্ণনা
list-style একটি ডিক্লেয়ারেশনের মাধ্যমে সবগুলো লিস্ট প্রোপার্টি সেট করার জন্য একটি শর্টহ্যান্ড প্রোপার্টি।
list-style-image লিস্ট আইটেমে মার্কিং হিসেবে ইমেজ সেট করার জন্য ব্যবহার করা হয়।
list-style-position লিস্ট আইটেমের মার্কার কন্টেন্টের ভেতরে নাকি বাহিরে প্রদর্শিত হবে তা নির্ধারণ করে।
list-style-type লিস্ট আইটেমকে মার্কিং করার জন্য টাইপ নির্ধারণ করে।


লিস্ট আইটেমকে বিভিন্নভাবে মার্কিং করার উপায়

লিস্টের আইটেমসমূহকে বিভিন্নভাবে মার্কিং করতে হলে সিএসএস list-style-type প্রোপার্টিটি ব্যবহার করতে হবে।

নিচের উদাহরণে লিস্টের আইটেমসমূহে কিছু মার্কারের ব্যবহার দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  ul.circle {
    list-style-type: circle;
  }
  ul.square {
    list-style-type: square;
  }
  ol.roman {
    list-style-type: upper-roman;
  }
  ol.alpha {
    list-style-type: lower-alpha;
  }
  </style>
</head>
<body>

  <p>আনঅর্ডার লিস্টের উদাহরণঃ</p>
  <ul class="circle">
    <li>মোবাইল</li>
    <li>ল্যাপটপ</li>
    <li>কম্পিউটার</li>
  </ul>
  <ul class="square">
    <li>মোবাইল</li>
    <li>ল্যাপটপ</li>
    <li>কম্পিউটার</li>
  </ul>
  <p>অর্ডার লিস্টের  উদাহরণঃ</p>
  <ol class="roman">
    <li>মোবাইল</li>
    <li>ল্যাপটপ</li>
    <li>কম্পিউটার</li>
  </ol>
    <ol class="alpha">
    <li>মোবাইল</li>
    <li>ল্যাপটপ</li>
    <li>কম্পিউটার</li>
  </ol>

</body>
</html>

ফলাফল



বিঃদ্রঃ list-style-type প্রোপার্টির কিছু ভ্যালু আন-অর্ডার লিস্টের জন্য এবং কিছু ভ্যালু অর্ডার লিস্টের জন্য ব্যবহৃত হয়।



ইমেজ দিয়ে লিস্ট আইটেম মার্কিং

ইমেজ দিয়ে লিস্ট আইটেমকেে মার্কিং করতে হলে সিএসএস list-style-image প্রোপার্টিটি ব্যবহার করতে হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  ul {
    list-style-image: url('../images/sqpurple.gif');
  }
  </style>
</head>
<body>

  <p>ইমেজ লিস্ট মার্কিং</p>
  <ul>
    <li>মোবাইল</li>
    <li>ল্যাপটপ</li>
    <li>কম্পিউটার</li>
  </ul>

</body>
</html>

ফলাফল





লিস্ট আইটেমে মার্কারের পজিশন

লিস্ট আইটেমে মার্কার কন্টেন্টের ভেতরে প্রদর্শিত হবে নাকি বাহিরে প্রদর্শিত হবে তা সেট করার জন্য সিএসএস list-style-position প্রোপার্টিটি ব্যবহার করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  ul.inside {
    list-style-position: inside;
  }
  ul.outside {
    list-style-position: outside;
  }
  </style>
</head>
<body>

  <p>list-style-position: inside; এর ব্যবহার</p>
  <ul class="inside">
    <li>মোবাইল</li>
    <li>ল্যাপটপ</li>
    <li>কম্পিউটার</li>
  </ul>

  <p>list-style-position: outside; এর ব্যবহার</p>
  <ul class="outside">
    <li>মোবাইল</li>
    <li>ল্যাপটপ</li>
    <li>কম্পিউটার</li>
  </ul>

</body>
</html>

বিঃদ্রঃ list-style-position: inside; এবং list-style-position: outside; এর মধ্যে outside; ভ্যালুটি ডিফল্ট।

ফলাফল





লিস্টকে কালার করা

লিস্ট আইটেমগুলোকে আরোও দর্শনীয় করে উপস্থাপন করতে আমরা লিস্ট এবং লিস্ট আইটেমের ব্যাকগ্রাউন্ডকে কালার করতে পারি।

<ol> বা <ul> ট্যাগে কোনো স্টাইল যোগ করলে সম্পূর্ণ লিস্টেই এর প্রভাব পড়ে। কিন্তু <li> ট্যাগে স্টাইল যোগ করে আমরা লিস্ট আইটেমসমূহকে পৃথকভাবে স্টাইল করতে পারি।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  ul {
    background: lightgreen;
    padding: 20px;
  }
  ul li {
    background: lightcyan;
    margin-left: 25px;
    padding: 5px;
    color: red;
  }
  </style>
</head>
<body>

  <h2>লিস্ট এবং লিস্ট আইটেম কালার</h2>
  <ul>
    <li>মোবাইল</li>
    <li>ল্যাপটপ</li>
    <li>কম্পিউটার</li>
  </ul>

</body>
</html>

ফলাফল





লিস্ট শটকার্ট প্রোপার্টি

list-style প্রোপার্টি হল লিস্টের জন্য একটি শর্টকার্ট প্রোপার্টি। একটি ডিক্লেয়ারেশনের মধ্যে সবগুলো লিস্ট প্রোপার্টি সেট করার জন্য এই প্রোপার্টি ব্যবহার করতে হয়।

শর্টকার্ট প্রোপার্টি ব্যবহার করতে হলে প্রোপার্টির নিম্নোক্ত ধারা মেনে চলতে হবেঃ

  1. list-style-type:- লিস্ট আইটেমকে মার্কিং করার জন্য যদি list-style-image প্রোপার্টি সেট করা হয়, কিন্তু কোনো কারণে যদি ইমেজ না প্রদর্শিত হয় তাহলে list-style-type প্রোপার্টির ভ্যালু প্রদর্শিত হবে।
  2. list-style-position:- লিস্ট আইটেমে মার্কার কন্টেন্টের ভেতরে না বাহিরে প্রদর্শিত হবে তা ঠিক করে দেয়।
  3. list-style-image:- ইমেজ দিয়ে লিস্ট আইটেমকেে মার্কিং করার জন্য এটি ব্যবহার করা হয়।

উপরের কোন একটি প্রোপার্টির ভ্যালু যদি বাদ পড়ে, তাহলে বাদ পড়া প্রোপার্টির জন্য ডিফল্ট ভ্যালু যুক্ত হবে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  ul {
    list-style: square inside url('../images/sqpurple.gif');
  }
  </style>
</head>
<body>

  <h2>list-style শর্টকাট প্রোপার্টির ব্যবহার</h2>
  <ul>
    <li>মোবাইল</li>
    <li>ল্যাপটপ</li>
    <li>কম্পিউটার</li>
  </ul>

</body>
</html>

ফলাফল