সিএসএস
🌈সিএসএস কি?
📋সিএসএস হলো কনটেন্ট তৈরি নিয়ন্ত্রণ করার পদ্ধতি।
⚒️সিএসএস কনটেন্ট তৈরি নিয়ন্ত্রণ করতে ব্যবহৃত হয়।
সিএসএস সমূহ
সিএসএস এবং সেগুলোর ব্যবহারের তালিকা
- ➡️ overflow - অতিরিক্ত প্রদর্শনের বৈশিষ্ট্য নির্ধারণ করা
- ➡️ overflow-anchor - স্ক্রল অবস্থান সংরক্ষণের নিয়ম নির্ধারণ করা
- ➡️ overflow-wrap - দীর্ঘ শব্দ ভাঙার নিয়ম নির্ধারণ করা
- ➡️ overflow-x - অনুভূমিক অতিরিক্ত প্রদর্শন নির্ধারণ করা
- ➡️ overflow-y - উল্লম্ব অতিরিক্ত প্রদর্শন নির্ধারণ করা
overflow - অতিরিক্ত প্রদর্শনের বৈশিষ্ট্য নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
overflow: auto;
background-color: lightblue;
}
.hidden {
overflow: hidden;
}
.clip {
overflow: clip;
}
.scroll {
overflow: scroll;
}
.auto {
overflow: auto;
}
</style>
</head>
<body>
<div class="hidden">
প্রোগ্রামিং শিখুন
প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন
</div>
<br>
<div class="scroll">
প্রোগ্রামিং শিখুন
প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন
</div>
<br>
<div class="clip">
প্রোগ্রামিং শিখুন
প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন
</div>
<br>
<div class="auto">
প্রোগ্রামিং শিখুন
প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন
</div>
</body>
</html>
overflow-anchor - স্ক্রল অবস্থান সংরক্ষণের নিয়ম নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 250px;
height: 120px;
overflow: auto;
overflow-anchor: none;
background-color: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
<p>হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ</p>
<p>ক্যাসকেডিং স্টাইল শিট</p>
</div>
</body>
</html>
overflow-wrap - দীর্ঘ শব্দ ভাঙার নিয়ম নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 250px;
background-color: lightblue;
padding: 10px;
overflow-wrap: break-word;
}
</style>
</head>
<body>
<div>
প্রোগ্রামিং শিখুন - প্রোগ্রামিং দিয়ে আপনার ক্যারিয়ার গড়ুন
</div>
</body>
</html>
overflow-x - অনুভূমিক অতিরিক্ত প্রদর্শন নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 250px;
height: 100px;
overflow-x: auto;
background-color: lightblue;
padding: 10px;
white-space: nowrap;
}
</style>
</head>
<body>
<div>
প্রোগ্রামিং শিখুন
প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন
</div>
</body>
</html>
overflow-y - উল্লম্ব অতিরিক্ত প্রদর্শন নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 250px;
height: 50px;
overflow-y: auto;
background-color: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div>
প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন
হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ
ক্যাসকেডিং স্টাইল শিট
</div>
</body>
</html>
সিএসএস সম্পর্কিত বিস্তারিত তথ্য
কার্যকর কোডিং উদাহরণ এবং সেগুলোর রেফারেন্স লিংক
| নাম | বিবরণ |
|---|---|
| overflow | অতিরিক্ত প্রদর্শনের বৈশিষ্ট্য নির্ধারণ করতে ব্যবহৃত হয়। |
| overflow-anchor | স্ক্রল অবস্থান সংরক্ষণের নিয়ম নির্ধারণ করতে ব্যবহৃত হয়। |
| overflow-wrap | দীর্ঘ শব্দ ভাঙার নিয়ম নির্ধারণ করতে ব্যবহৃত হয়। |
| overflow-x | অনুভূমিক অতিরিক্ত প্রদর্শন নির্ধারণ করতে ব্যবহৃত হয়। |
| overflow-y | উল্লম্ব অতিরিক্ত প্রদর্শন নির্ধারণ করতে ব্যবহৃত হয়। |