জয়েন লগইন

সিএসএস

🌈সিএসএস কি?

📋সিএসএস হলো বক্স মডেল তৈরি করার পদ্ধতি।

⚒️সিএসএস বক্স মডেল তৈরি করতে ব্যবহৃত হয়।

সিএসএস সমূহ

সিএসএস এবং সেগুলোর ব্যবহারের তালিকা

  • ➡️ box-decoration-break - বক্সের ডেকোরেশন বিরতি নির্ধারণ করা
  • ➡️ box-reflect - বক্সের প্রতিফলন প্রদর্শন করা
  • ➡️ box-shadow - বক্সের ছায়া যুক্ত করা
  • ➡️ box-sizing - বক্সের আকার নির্ধারণ করা

box-decoration-break - বক্সের ডেকোরেশন বিরতি নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
span {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  text-decoration: underline;
}
</style>
</head>
<body>

<p>
  এইচটিএমএল <span>হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ</span>
</p>

</body>
</html>

box-reflect - বক্সের প্রতিফলন প্রদর্শন করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  -webkit-box-reflect: below 5px;
}
</style>
</head>
<body>

<h1>সিএসএস</h1>

</body>
</html>

box-shadow - বক্সের ছায়া যুক্ত করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  box-shadow: 5px 5px 10px gray;
  padding: 15px;
  width: fit-content;
}
</style>
</head>
<body>

<h1>সিএসএস</h1>

</body>
</html>

box-sizing - বক্সের আকার নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
.box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid blue;
}
</style>
</head>
<body>

<h1>সিএসএস</h1>

<div class="box">
  ক্যাসকেডিং স্টাইল শিট
</div>

</body>
</html>

সিএসএস সম্পর্কিত বিস্তারিত তথ্য

কার্যকর কোডিং উদাহরণ এবং সেগুলোর রেফারেন্স লিংক

নাম বিবরণ
box-decoration-break বক্সের ডেকোরেশন বিরতি নির্ধারণ করতে ব্যবহৃত হয়।
box-reflect বক্সের প্রতিফলন প্রদর্শন করতে ব্যবহৃত হয়।
box-shadow বক্সের ছায়া যুক্ত করতে ব্যবহৃত হয়।
box-sizing বক্সের আকার নির্ধারণ করতে ব্যবহৃত হয়।