CSS ফ্লোট

আপনি যখন একটি ওয়েব পৃষ্ঠা ডিজাইন করছেন, তখন আপনি সিদ্ধান্ত নিতে পারেন যে একটি নির্দিষ্ট উপাদান পৃষ্ঠায় একটি নির্দিষ্ট অবস্থানে উপস্থিত হওয়া উচিত। উদাহরণস্বরূপ, আপনি একটি পৃষ্ঠার ডানদিকে একটি ছবি সম্বলিত একটি বাক্স দেখতে চাইতে পারেন৷

CSS-এ, ফ্লোট প্রপার্টি ব্যবহার করা হয় একটি এলিমেন্টের অবস্থান কেমন হওয়া উচিত তা নির্দিষ্ট করতে। ফ্লোট একটি ওয়েব পৃষ্ঠার বাম বা ডানে একটি উপাদান স্থাপন করতে ব্যবহার করা যেতে পারে৷

এই টিউটোরিয়ালটি উদাহরণের রেফারেন্স সহ আলোচনা করবে, কিভাবে একটি ওয়েব পেজে উপাদানের অবস্থানের জন্য CSS ফ্লোট প্রপার্টি ব্যবহার করতে হয়। এই টিউটোরিয়ালটি পড়ার শেষে, আপনি CSS ব্যবহার করে একটি ওয়েব পৃষ্ঠায় ফ্লোটিং উপাদানগুলিতে বিশেষজ্ঞ হয়ে উঠবেন।

CSS ফ্লোট প্রপার্টি

ফ্লোট সম্পত্তি একটি ওয়েব পৃষ্ঠার বাম বা ডানে একটি উপাদান অবস্থান করতে ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, ফ্লোট একটি ওয়েব পৃষ্ঠার একটি বাক্সে পাঠ্যের ডানদিকে একটি চিত্র স্থাপন করতে ব্যবহার করা যেতে পারে৷

ফ্লোট প্রপার্টি শুধুমাত্র সেই উপাদানগুলির জন্য প্রযোজ্য যা বাক্স তৈরি করে এবং ওয়েব পৃষ্ঠায় একেবারেই অবস্থান করে না। একেবারে পজিশনেড এলিমেন্ট হল ওয়েব এলিমেন্ট যা প্রথম প্যারেন্ট এলিমেন্টের সাপেক্ষে অবস্থান করে যার অবস্থান স্ট্যাটিক ব্যতীত অন্য।

ফ্লোট সম্পত্তির সাথে ব্যবহৃত চারটি সবচেয়ে সাধারণ মান হল:

• বাম (পাত্রের বাম দিকে একটি উপাদান ভাসিয়ে দেয়)
• ডান (কন্টেইনারের ডানদিকে একটি উপাদান ভাসিয়ে দেয়)
• কোনটিই নয় (কোনও উপাদানে কোন ফ্লোট প্রয়োগ করা হয় না)
• উত্তরাধিকার (উপাদানটি তার মূল কন্টেইনারে প্রয়োগকৃত ফ্লোট সম্পত্তি ব্যবহার করে ভাসানো হয়)।

ফ্লোট প্রপার্টির সবচেয়ে সাধারণ ব্যবহার হল CSS-এ একটি ছবির চারপাশে টেক্সট মোড়ানো।

CSS ফ্লোট উদাহরণ

ধরা যাক আমরা স্থানীয় Stargazer Blazers-এর জন্য একটি ওয়েবসাইট ডিজাইন করছি তারা তাকানো সমাজ। ক্লাব একটি ওয়েব পৃষ্ঠা থাকতে চায় যা তাদের সংগঠনের ইতিহাসের রূপরেখা দেয়। এই ওয়েব পৃষ্ঠাটিতে ক্লাবের একটি সংক্ষিপ্ত বিবরণ থাকা উচিত, সেইসাথে পৃষ্ঠার বাম দিকে অবস্থানরত তারকাদের একটি চিত্র থাকতে হবে৷

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগদানের পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।

আমরা এই ওয়েব পেজ তৈরি করতে ফ্লোট প্রপার্টি ব্যবহার করতে পারি। এখানে মৌলিক কোড যা আমরা আমাদের ওয়েব পৃষ্ঠার জন্য ব্যবহার করব, কোনো ফ্লোট প্রয়োগ ছাড়াই:

index.html

<div>
<p><img src="https://images.unsplash.com/photo-1465101162946-4377e57745c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1357&q=80" height="200" width="200" /> The Stargazer Blazers society, founded in 2017, is dedicated to viewing the stars in San Francisco, CA. The society was created after a meeting of two passionate stargazers in the Bay Area, Jeff Holmes and Paula Ingleson, who were looking to find other people with whom to discuss their passion. Today, our organization has over 200 members in the Bay Area, and meets monthly to gaze at the stars and discuss our members' discoveries.
</p>
</div>

আমাদের কোড ফিরে আসে:

এই উদাহরণে, আমাদের চিত্রটি আমাদের পাঠ্যের আগে উপস্থিত হয় এবং সামগ্রিকভাবে পৃষ্ঠাটি খুব নান্দনিকভাবে আনন্দদায়ক নয়। যাইহোক, ফ্লোট প্রপার্টি ব্যবহার করে, আমরা আমাদের টেক্সটের পাশে আমাদের ইমেজ রাখতে পারি।

এই কোডটি আমরা পাঠ্যের ডানদিকে আমাদের চিত্র স্থাপন করতে ব্যবহার করব (যা ছিল স্টারগেজিং সোসাইটি অনুরোধ করেছিল):

styles.css

img {
	float: right;
}

আমাদের কোড ফিরে আসে:

আসুন আমাদের কোড ভাঙ্গা যাক। প্রথমে, আমরা একটি

সংজ্ঞায়িত করেছি যেখানে আমাদের ওয়েব পেজের কোড লেখা আছে। তারপরে আমরা আমাদের পাঠ্যের বডি তৈরি করতে একটি

ট্যাগ ব্যবহার করেছি, যার মধ্যে Stargazer Blazers ক্লাবের ইতিহাস সম্পর্কে একটি বিবরণ রয়েছে। আমাদের

ট্যাগের ভিতরে, আমরা তারার একটি ছবিও অন্তর্ভুক্ত করেছি, যার আকার 200×200।

আমাদের styles.css ফাইলে, যা আমাদের ওয়েব পৃষ্ঠার জন্য স্টাইল কোড অন্তর্ভুক্ত করে, আমরা float:right; টেক্সটের ডানদিকে আমাদের ইমেজ ভাসানোর বৈশিষ্ট্য। আপনি উপরের উদাহরণে দেখতে পাচ্ছেন, আমাদের চিত্রটি আমাদের পাঠ্যের ডানদিকে অবস্থিত। ডিফল্টরূপে, ছবিটি আমাদের পাঠ্যের আগে উপস্থিত হবে৷

৷

এখন, ধরুন স্টারগেজিং ক্লাব আমাদের ছবিটিকে পাঠ্যের বাম দিকে অবস্থান করতে বলেছে। আমরা এই কোডটি ব্যবহার করে তা করতে পারি:

styles.css

img {
	float: left;
	margin-right: 20px;
}

আমাদের কোড ফিরে আসে:

এই উদাহরণে, আমরা আমাদের পাঠ্যের বাম দিকে আমাদের চিত্রটি ভাসিয়েছি। আমরা একটি মার্জিন-ডানও নির্দিষ্ট করেছি:20px; সম্পত্তি, যা আমাদের চিত্রের বাম এবং আমাদের পাঠ্যের মধ্যে একটি স্থান তৈরি করে।

ফ্লোট সহ বক্স গ্রিড

ফ্লোট প্রপার্টি আপনাকে কন্টেন্টের বাক্স তৈরি করতে দেয় যা পাশাপাশি দেখা যায়।

ধরুন স্টারগেজিং সোসাইটি তিনটি ছবি পাশাপাশি দেখাতে চেয়েছিল, যাতে তারা দেখায় যে তারা যোগ দিলে তারা দেখতে পাবে।

আমরা এই কাজটি সম্পন্ন করতে নিম্নলিখিত কোড ব্যবহার করতে পারি:

index.html

<div>
<img src="https://images.unsplash.com/photo-1492446190781-58ac4285911d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1294&q=80" height="200" width="200" class="image" />
<img src="https://images.unsplash.com/photo-1456154875099-97a3a56074d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80" height="200" width="200" class="image" />
<img src="https://images.unsplash.com/photo-1435224668334-0f82ec57b605?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" class="image" />
</div>

styles.css

* { box-sizing: border-box };

.image {
	float: left;
	width: 25%;
	padding: 25px;
}

আমাদের কোড রিটার্ন করে:

আসুন আমাদের কোড ভাঙ্গা যাক। আমাদের HTML ফাইলে, আমাদের একটি

ট্যাগ রয়েছে যাতে তিনটি ছবি রয়েছে ( ট্যাগ দ্বারা উপস্থাপিত)। প্রতিটি চিত্র 200×200 মাত্রার এবং তারার একটি অনন্য চিত্রের সাথে লিঙ্ক করে। এছাড়াও, প্রতিটি ছবিকে image ক্লাস বরাদ্দ করা হয় .

আমাদের styles.css ফাইলে, আমরা:

• বক্স-আকার প্রয়োগ করুন:বর্ডার-বক্স; আমাদের তালিকার প্রতিটি আইটেমের শৈলী, তাই একটি উপাদানের প্যাডিং এবং সীমানা তার মোট প্রস্থ এবং উচ্চতায় অন্তর্ভুক্ত করা হবে। এটি আমাদেরকে কোনো ডিফল্ট স্পেস ছাড়াই আমাদের উপাদানগুলিকে পাশাপাশি অবস্থান করতে দেয়৷
• ফ্লোট ব্যবহার করুন:বাম; আমাদের ছবিগুলিকে পাশাপাশি দেখাতে৷
• প্রস্থ ব্যবহার করুন:25% প্রতিটি ছবি ওয়েব পৃষ্ঠার প্রস্থের 25% নিতে পারে।
• প্যাডিং ব্যবহার করুন:25px; প্রতিটি ছবির মধ্যে একটি 25px স্পেস তৈরি করতে।

উপসংহার

CSS ফ্লোট প্রপার্টি তার কন্টেইনারের বাম বা ডান দিকে একটি উপাদান স্থাপন করতে ব্যবহৃত হয়। এটি পাঠ্য এবং অন্যান্য উপাদানগুলিকে ভাসমান উপাদানের চারপাশে মোড়ানোর অনুমতি দেয়৷

এই টিউটোরিয়ালে আলোচনা করা হয়েছে, উদাহরণের রেফারেন্স সহ, সিএসএস-এ একটি কন্টেইনারের বাম এবং ডানে অবস্থান উপাদানের জন্য কীভাবে CSS ফ্লোট অ্যাট্রিবিউট ব্যবহার করবেন। এখন আপনি সিএসএস বিশেষজ্ঞের মতো ফ্লোট অ্যাট্রিবিউট ব্যবহার শুরু করতে প্রস্তুত!