সিএসএস
🌈সিএসএস কি?
📋সিএসএস হলো বক্স মডেল তৈরি করার পদ্ধতি।
⚒️সিএসএস বক্স মডেল তৈরি করতে ব্যবহৃত হয়।
সিএসএস সমূহ
সিএসএস এবং সেগুলোর ব্যবহারের তালিকা
- ➡️ 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 | বক্সের আকার নির্ধারণ করতে ব্যবহৃত হয়। |