Home-theater-designers
CSS ডিসপ্লে প্রপার্টি ওয়েব ডিজাইনারদের জন্য একটি শক্তিশালী টুল। এটি আপনাকে ন্যূনতম স্টাইলিং সহ ওয়েবসাইট উপাদান লেআউটগুলিকে নিয়ন্ত্রণ করতে দেয়, সাধারণ মানগুলি যা মনে রাখা সহজ।
কিন্তু এই মানগুলির প্রতিটি কী করে এবং তারা কীভাবে কাজ করে? খুঁজে বের কর.
দিনের মেকইউজের ভিডিও
CSS ডিসপ্লে প্রপার্টি কি?
ডিসপ্লে প্রপার্টি একটি ওয়েবপেজে HTML এলিমেন্টের জন্য ব্যবহৃত বক্স রেন্ডারিংয়ের ধরন নির্দিষ্ট করে। এর ফলে দেখা না যাওয়া সহ বিভিন্ন ধরনের আচরণ হয়। আপনি স্টাইল শীট বা উপযুক্ত CSS কাস্টমাইজেশন বিভাগগুলির মাধ্যমে আপনার ওয়েবসাইটে এই মানগুলি সম্পাদনা করতে পারেন৷ ওয়ার্ডপ্রেসের মতো সিএমএস টুল .
সিএসএস ডিসপ্লে সহ উপাদানগুলিকে লাইনে রাখুন: ইনলাইন
ইনলাইন ডিসপ্লে সহ একটি উপাদানের ক্ষেত্রে প্রস্থ এবং উচ্চতার মান প্রযোজ্য নয়; ভিতরের বিষয়বস্তু তার মাত্রা নির্ধারণ করে। ইনলাইন এইচটিএমএল উপাদানগুলি অন্যান্য উপাদানগুলির সাথে পাশাপাশি বসতে পারে, একটি মত আচরণ করে . ডিসপ্লে ইনলাইন সবচেয়ে বেশি ব্যবহৃত হয় পাঠ্যের জন্য।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline {
display: inline;
font-size: 3rem;
}
#inline-1 {
background-color: yellow;
padding: 10px 0px 10px 10px;
}
#inline-2 {
background-color: lightgreen;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<body>
<h1>CSS Display Inline</h1>
<div class="inline" id="inline-1">This is text</div>
<div class="inline" id="inline-2">with the inline property value.</div>
</body>
</html>
উপরের এই HTML মার্কআপ এবং CSS ডিসপ্লে ইনলাইন মানের একটি ভালো উদাহরণ হিসেবে কাজ করে। একসাথে ব্যবহার করা হলে, এটি দুটি ভিন্ন HTML উপাদান দিয়ে তৈরি করা পাঠ্যের একটি লাইন প্রদর্শন করবে।
একটি নিবন্ধ প্রকাশিত হওয়ার তারিখটি কীভাবে সন্ধান করবেন
CSS ডিসপ্লে দিয়ে ওয়েবসাইট লেআউট নিয়ন্ত্রণ করুন: ব্লক
কিছু উপায়ে, প্রদর্শন ব্লক মান ইনলাইন মানের বিপরীত। উচ্চতা এবং প্রস্থের মাত্রা সেট করা যেতে পারে এবং এই মান সহ উপাদানগুলি একে অপরের পাশে বসতে পারে না। উপরের উদাহরণটি ব্লক মান সহ দুটি উপাদান দেখায়। ব্লক ডিসপ্লে মান সহ উপাদানগুলি তাদের মূল উপাদানের সর্বাধিক প্রস্থে ডিফল্ট।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.block {
display: block;
font-size: 3rem;
width: fit-content;
}
#block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Block</h1>
<div class="block" id="block-1">This is text</div>
<div class="block" id="block-2">with the block property value.</div>
</body>
</html>ইনলাইন শৈলীর উদাহরণের বিপরীতে, এই প্রদর্শন ব্লক মান উদাহরণটি পাঠ্যের লাইনকে দুটি ভিন্ন লাইনে বিভক্ত করে। ফিট-কন্টেন্ট প্রস্থ মান পাঠ্যের দৈর্ঘ্যের সাথে মেলে উপাদানগুলির প্রস্থ সেট করে।
সিএসএস ডিসপ্লে সহ সাইড-বাই-সাইড এইচটিএমএল উপাদান: ইনলাইন-ব্লক
CSS ডিসপ্লে ইনলাইন-ব্লক মান একটি নিয়মিত ইনলাইন মানের মতো কাজ করে, শুধুমাত্র নির্দিষ্ট মাত্রা যোগ করার ক্ষমতার সাথে। এটি প্যারেন্ট এলিমেন্ট না রেখে গ্রিডের মতো লেআউট তৈরি করা সম্ভব করে তোলে। পূর্ববর্তী উদাহরণে ফিরে যাওয়া, ইনলাইন-ব্লক মান যোগ করা উপাদানগুলিকে একে অপরের পাশে বসতে দেয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-block {
display: inline-block;
font-size: 3rem;
width: fit-content;
}
#inline-block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#inline-block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Block (width set)</h1>
<div class="inline-block" id="inline-block-1">This is text</div>
<div class="inline-block" id="inline-block-2">with the inline-block property
value.</div>
</body>
</html>
ইনলাইন-ব্লক মান ইনলাইন মান থেকে খুব বেশি আলাদা দেখায় না। এটা মনে রাখা গুরুত্বপূর্ণ যে আপনি এই মান দিয়ে উপাদানের মাত্রা সেট করতে পারেন, যদিও কিছু ক্ষেত্রে কাজ করা সহজ করে তোলে।
CSS ডিসপ্লে সহ ওয়েবসাইটের উপাদান লুকান: কোনোটিই নয়
সবচেয়ে সহজ প্রদর্শন মান হল 'কোনটিই নয়'। এই মানটি উপাদান এবং যেকোনো শিশু উপাদান, মার্জিন এবং অন্যান্য ব্যবধান বৈশিষ্ট্য সহ লুকিয়ে রাখে। CSS ডিসপ্লে সহ উপাদানগুলির কোনো মান এখনও ব্রাউজার পরিদর্শকদের মধ্যে দৃশ্যমান নয়।
CSS ডিসপ্লে দিয়ে নমনীয় এবং প্রতিক্রিয়াশীল উপাদান তৈরি করুন: flex
ডিসপ্লে ফ্লেক্স হল নতুন CSS লেআউট মোডগুলির মধ্যে একটি। যখন ডিসপ্লে ফ্লেক্স একটি প্যারেন্ট এলিমেন্টে থাকে, তখন এর ভিতরে থাকা সমস্ত উপাদান নমনীয় CSS এলিমেন্টে পরিণত হয়। এই কনফিগারেশনের মূল উপাদান হল একটি ফ্লেক্সবক্স।
ফ্লেক্সবক্সগুলি প্রস্থ এবং উচ্চতার মতো পূর্বনির্ধারিত ভেরিয়েবল সহ প্রতিক্রিয়াশীল ডিজাইন তৈরি করে। মূল্যবান এইচটিএমএল/সিএসএস ফ্লেক্সবক্স সম্পর্কে শেখা আপনি শুরু করার আগে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.flex {
display: flex;
font-size: 3rem;
}
#flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Flex</h1>
<div class="flex">
<div id="flex-1"></div>
<div id="flex-2"></div>
<div id="flex-3"></div>
</div>
</body>
</html> ডিসপ্লে সহ ফ্লেক্সবক্সের পাশাপাশি অবস্থান করুন: ইনলাইন-ফ্লেক্স
ইনলাইন-ফ্লেক্স একটি নিয়মিত ফ্লেক্সবক্সের মতো আচরণ করে, উপাদানটির অতিরিক্ত সুবিধা অন্যান্য উপাদানের পাশে বসতে সক্ষম।
একটি উচ্চ রিফ্রেশ হার ভাল
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-flex {
display: inline-flex;
font-size: 3rem;
width: 49.8%;
}
#inline-flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#inline-flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#inline-flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Flex</h1>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
</body>
</html>CSS ডিসপ্লে দিয়ে জটিল টেবিল তৈরি করুন: টেবিল
ডিসপ্লে টেবিলের মান ওয়েবসাইট ডিজাইনের পুরোনো দিনের কথা মনে করিয়ে দেয়। যদিও বেশিরভাগ ওয়েবসাইট আজ তাদের লেআউটের জন্য টেবিল ব্যবহার করে না, তারা এখনও একটি পঠনযোগ্য বিন্যাসে ডেটা এবং সামগ্রী দেখানোর জন্য বৈধ।
একটি এইচটিএমএল এলিমেন্টে টেবিলের মান যোগ করলে এটি একটি টেবিল এলিমেন্টের মতো কাজ করবে, কিন্তু আপনার টেবিলটি সঠিকভাবে কাজ করতে আপনার অতিরিক্ত মান প্রয়োজন।
যিনি আমাকে ইনস্টাগ্রামে ফলো করেন না
CSS প্রদর্শন: টেবিল-সেল
টেবিল-কোষ মান সহ উপাদানগুলি প্রধান টেবিলের মধ্যে পৃথক কোষ হিসাবে কাজ করে। এবং টেবিল-কলাম এবং টেবিল-সারির মানগুলি এই পৃথক কোষগুলিকে একত্রিত করে।
CSS প্রদর্শন: টেবিল-সারি
টেবিল-সারির মানটি ঠিক একটি
CSS প্রদর্শন: টেবিল-কলাম
টেবিল-কলাম মান টেবিল-সারি মানের অনুরূপ কাজ করে, শুধুমাত্র এটি আপনার টেবিলকে বিভক্ত করে না। পরিবর্তে, আপনি ইতিমধ্যে বিদ্যমান বিভিন্ন কলামে নির্দিষ্ট CSS নিয়ম যোগ করতে এই মানটি ব্যবহার করতে পারেন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.table {
display: table;
font-size: 3rem;
}
.header {
display: table-header-group;
font-size: 3rem;
}
#column-1 {
display: table-column-group;
background-color: yellow;
}
#column-2 {
display: table-column-group;
background-color: lightgreen;
}
#column-3 {
display: table-column-group;
background-color: lightblue;
}
#row-1 {
display: table-row;
}
#row-2 {
display: table-row;
}
#row-3 {
display: table-row;
}
#cell {
display: table-cell;
padding: 10px;
width: 20%;
}
</style>
</head>
<body>
<h1>CSS Display Table</h1>
<div class="table">
<div id="column-1"></div>
<div id="column-2"></div>
<div id="column-3"></div>
<div class="header">
<div id="cell">Name</div>
<div id="cell">Age</div>
<div id="cell">Country</div>
</div>
<div id="row-1">
<div id="cell">Jeff</div>
<div id="cell">21</div>
<div id="cell">USA</div>
</div>
<div id="row-2">
<div id="cell">Sue</div>
<div id="cell">34</div>
<div id="cell">Spain</div>
</div>
<div id="row-3">
<div id="cell">Boris</div>
<div id="cell">57</div>
<div id="cell">Singapore</div>
</div>
</div>
</body>
</html>সিএসএস ডিসপ্লে দিয়ে সাইড-বাই-সাইড টেবিল তৈরি করুন: ইনলাইন-টেবিল
অন্যান্য ইনলাইন ভেরিয়েন্টের মতো আমরা ইতিমধ্যেই দেখেছি, ইনলাইন-টেবিল অন্যান্য উপাদানের পাশে টেবিল উপাদান স্থাপন করা সম্ভব করে তোলে।
CSS ডিসপ্লে দিয়ে রেসপন্সিভ ওয়েবসাইট লেআউট তৈরি করুন: গ্রিড
CSS ডিসপ্লে গ্রিডের মান টেবিলের মানের অনুরূপ, শুধুমাত্র একটি গ্রিডের কলাম এবং সারিতে নমনীয় আকার থাকতে পারে। এটি ওয়েব পৃষ্ঠাগুলির জন্য প্রধান লেআউট তৈরি করার জন্য গ্রিডগুলিকে আদর্শ করে তোলে। তারা পূর্ণ-প্রস্থ শিরোনাম এবং পাদচরণগুলির জন্য স্থান ছেড়ে দেয় এবং বিভিন্ন আকারের বিষয়বস্তু এলাকাগুলিকে সম্ভব করে তোলে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.grid {
display: grid;
font-size: 3rem;
grid-template-areas:
'header header header header'
'left-sidebar content content right-sidebar'
'footer footer footer footer';
gap: 10px;
}
#grid-1 {
grid-area: header;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
#grid-2 {
grid-area: left-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-3 {
grid-area: content;
background-color: lightblue;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-4 {
grid-area: right-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-5 {
grid-area: footer;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS Display Grid</h1>
<div class="grid">
<div id="grid-1">Header</div>
<div id="grid-2">Left Sidebar</div>
<div id="grid-3">Content</div>
<div id="grid-4">Right Sidebar</div>
<div id="grid-5">Footer</div>
</div>
</body>
</html>
গ্রিডগুলি ফ্লেক্সবক্সের অনুরূপ, শুধুমাত্র তারা একটির নীচে এবং একটির পাশে উপাদান স্থাপন করতে পারে। এর জন্য গ্রিড-টেমপ্লেট-এরিয়া সম্পত্তি অত্যাবশ্যক। আপনি কোড থেকে দেখতে পাচ্ছেন, আমাদের হেডার এবং ফুটার অ্যারেতে চারটি স্পেস নেয়, কারণ সেগুলি পূর্ণ-প্রস্থ। সাইডবার প্রতিটি একটি স্লট নেয়, যখন বিষয়বস্তু দুটি লাগে, কার্যকরভাবে গ্রিডের মধ্যবর্তী সারিটিকে তিনটি কলামে বিভক্ত করে।
CSS প্রদর্শন: ইনলাইন-গ্রিড
ইনলাইন-গ্রিড মান ব্যবহার করা আপনার গ্রিডকে অন্যান্য উপাদানের পাশে বসতে সক্ষম করবে, ঠিক এই গাইডের অন্যান্য ইনলাইন মানগুলির মতো।
ওয়েব ডিজাইনের জন্য CSS ডিসপ্লে ব্যবহার করা
CSS ডিসপ্লে প্রপার্টি HTML মার্কআপ পরিবর্তন না করেই ওয়েবসাইট এলিমেন্ট স্ট্রাকচার সামঞ্জস্য করার একটি সহজ উপায় অফার করে। যারা শপিফাই বা ওয়ার্ডপ্রেসের মতো কন্টেন্ট ডেলিভারি প্ল্যাটফর্ম ব্যবহার করেন তাদের জন্য এটি আদর্শ, তবে এটি সাধারণ ওয়েব ডিজাইনের জন্যও কার্যকর হতে পারে।