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

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

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

 

সিএসএস বক্স মডেল


সিএসএস বক্স মডেল

সকল এইচটিএমএল এলিমেন্টকে বক্স হিসেবে বিবেচনা করা যেতে পারে। আমরা যখন সিএসএসের মাধ্যমে ওয়েবপেজের ডিজাইন এবং লেআউট নিয়ে কথা বলি, তখন একটি টার্ম আমাদের কাছে চলে আসে তা হলো "box model"

বক্স মডেল স্বাভাবিকভাবেই একটি বক্স যা প্রত্যেকটি এইচটিএমএল এলিমেন্টকে একটি বক্সের মধ্যে মুড়িয়ে দেয়। ইহা মার্জিন, বর্ডার, পেডিং এবং প্রকৃত কন্টেন্ট নিয়ে গঠিত হয়। নিচে ছবির মাধ্যেম বক্স মডেলের ব্যখ্যা দেওয়া হলঃ

উপরের ছবির বিভিন্ন অংশের ব্যাখ্যাঃ

  • কন্টেন্ট - যা বক্সের কন্টেন্ট, যেখানে টেক্সট এবং ছবি প্রদর্শিত হয়।
  • প্যাডিং - যা কন্টেন্টের চারপাশে ফাঁকা অংশের সৃষ্টি করে এবং ইহা স্বচ্ছ।
  • বর্ডার - যা প্যাডিং এবং কন্টেন্টের চতুর্দিকে থাকে।
  • মার্জিন - যা বর্ডারের বাহিরে ফাঁকা অংশের সৃষ্টি করে। প্যাডিং এর মত ইহাও স্বচ্ছ।

আমরা বক্স মডেল ব্যবহার করেও একটি এলিমেন্টের চারপাশে বর্ডার সেট করতে পারি এবং এলিমেন্টের মধ্যে স্পেস(space) রাখতে পারি।



উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  div {
    background-color: lightgrey;
    width: 350px;
    color: brown;
    border: 30px solid blue;
    padding: 25px;
    margin: 25px;
  }
  </style>
</head>
<body>

  <h2>বক্স মডেল সাজানো</h2>
  <p>বাংলাদেশের সাংবিধানিক নাম গণপ্রজাতন্ত্রী বাংলাদেশ। ভূ-রাজনৈতিকভাবে বাংলাদেশের পশ্চিম, 
     উত্তর ও পূর্ব সীমান্তে ভারত, দক্ষিণ-পূর্ব সীমান্তে মায়ানমার ও দক্ষিণ উপকূলের দিকে বঙ্গোপসাগর অবস্থিত।
     বাংলাদেশের ভূখণ্ড ভৌগোলিকভাবে একটি উর্বর ব-দ্বীপের অংশ বিশেষ।</p>
  <div>বাংলাদেশের সাংবিধানিক নাম গণপ্রজাতন্ত্রী বাংলাদেশ। ভূ-রাজনৈতিকভাবে বাংলাদেশের পশ্চিম, 
     উত্তর ও পূর্ব সীমান্তে ভারত, দক্ষিণ-পূর্ব সীমান্তে মায়ানমার ও দক্ষিণ উপকূলের দিকে বঙ্গোপসাগর অবস্থিত। 
     বাংলাদেশের ভূখণ্ড ভৌগোলিকভাবে একটি উর্বর ব-দ্বীপের অংশ বিশেষ।</div>

</body>
</html>

ফলাফল





width এবং height সেট করা

প্রত্যেকটি ব্রাউজারের জন্য এলিমেন্টের প্রস্থ(width) এবং দৈর্ঘ্য(height) সঠিকভাবে সেট করতে হলে আপনাকে অবশ্যই বক্স মডেলের ব্যবহার সম্পর্কে জানতে হবে।

বিঃদ্রঃ সিএসএস এর মাধ্যমে আপনি যখন একটি এলিমেন্টের দৈর্ঘ্য এবং প্রস্থ সেট করেন, তখন শুধুমাত্র কন্টেন্টের আয়তনের দৈর্ঘ্য এবং প্রস্থ সেট করেন।

কিন্তু একটি এলিমেন্টের সম্পূর্ণ আয়তন সেট করতে এর দৈর্ঘ্য এবং প্রস্থের সহিত আপনাকে অবশ্যই প্যাডিং, বর্ডার এবং মার্জিন সংযুক্ত করতে হবে।

ধরুন, আপনি একটি <div> এলিমেন্টকে স্টাইল করতে চাচ্ছেন যার width হবে 350px, তাহলে সেটিকে নিচের উদাহরণের মত স্টাইল করতে পারেনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  div {
    background-color: lightsalmon;
    width: 320px;
    padding: 15px;
    border: 5px solid black;
    margin: 0;
  }
  </style>
</head>
<body>

  <h2>সম্পূর্ণ প্রস্থ পরিমাপ করুন</h2>
  <img src="images/natural.jpg" width="360" height="263" alt="natural">
  <div> উপরের ছবিটির প্রস্থ 360px এবং এই এলিমেন্টটিরও সর্বমোট প্রস্থ 360px।</div>

</body>
</html>

ফলাফল





এখানে উপরের উদাহরণের সহজ হিসাব দেখানো হলোঃ

  320px (width)
+ 30px (বাম + ডান পাশের প্যাডিং)
+ 10px (বাম + ডান পাশের বর্ডার)
+   0px (বাম + ডান পাশের মার্জিন)
= 360px


একটি এলিমেন্টের সম্পূর্ণ প্রস্থ হিসাবের সূত্র হলোঃ

এলিমেন্টের সম্পূর্ণ প্রস্থ = কন্টেন্টের প্রস্থ + বাম পাশের প্যাডিং + ডান পাশের প্যাডিং + বাম পাশের বর্ডার + ডান পাশের বর্ডার + বাম পাশের মার্জিন + ডান পাশের মার্জিন

একটি এলিমেন্টের সম্পূর্ণ উচ্চতা হিসাবের সূত্র হলোঃ

এলিমেন্টের সম্পূর্ণ উচ্চতা = কন্টেন্টের উচ্চতা + উপরের প্যাডিংন + নিচের প্যাডিং + উপরের বর্ডার + নিচের বর্ডার + উপরের মার্জিন + নিচের মার্জিন

বিঃদ্রঃ ইন্টারনেট এক্সপ্লোরার-৮ এবং এর আগের ভার্সনগুলোতে width প্রোপার্টির মধ্যে padding এবং border যুক্ত হয়ে যায়। তাই এই সমস্যা সমাধানের জন্য এইচটিএমএল পেজে <!DOCTYPE html> যুক্ত করুন।