আপনি CSS বৈশিষ্ট্য প্রদর্শন ব্যবহার করে CSS-এ একটি উপাদান লুকাতে পারেন:কোনোটি বা দৃশ্যমানতা: লুকানো প্রদর্শন:কোনোটিই পৃষ্ঠা থেকে সম্পূর্ণ উপাদান সরিয়ে দেয় না এবং ম্যাট পৃষ্ঠার বিন্যাসকে প্রভাবিত করে। দৃশ্যমানতা: লুকানো স্থানটিকে একই রেখে উপাদানটিকে লুকিয়ে রাখে।

আপনি এমন একটি দৃশ্যের সম্মুখীন হতে পারেন যেখানে আপনি ওয়েব পৃষ্ঠায় একটি উপাদান লুকাতে চান৷ উদাহরণস্বরূপ, আপনার কাছে পাঠ্যের একটি ব্লক থাকতে পারে যা আপনি লুকিয়ে রাখতে চান এবং একজন ব্যবহারকারী একটি বোতামে ক্লিক করলে প্রদর্শিত হতে চান৷

CSS-এ একটি উপাদান লুকানোর জন্য দুটি প্রধান পদ্ধতি রয়েছে, ব্যবহার করে:

ডিসপ্লে:none attribute.
দৃশ্যমানতা:লুকানো বৈশিষ্ট্য।

প্রথম পদ্ধতি আপনার ওয়েব পৃষ্ঠার বিন্যাস প্রভাবিত করতে পারে. তবে, দ্বিতীয় পদ্ধতিটি তবুও জনপ্রিয়।

সিএসএস লুকান উপাদান:প্রদর্শন

ডিসপ্লে প্রপার্টি নিয়ন্ত্রণ করে কিভাবে একটি এলিমেন্ট একটি ওয়েব পেজে প্রদর্শিত হয়। একটি HTML নথির প্রতিটি উপাদানের প্রদর্শন সম্পত্তির জন্য একটি ডিফল্ট মান থাকে, যদিও সেই মানটি উপাদানটির উপর নির্ভর করে। বেশিরভাগ উপাদানের জন্য, ডিফল্ট প্রদর্শন মান হয় ব্লক অথবা ইনলাইন .

যদি আপনি একটি উপাদানের উপর একটি উপাদান প্রদর্শন করতে চান না, আপনি প্রদর্শন এর মান সেট করতে পারেন সম্পত্তি কারো কাছে নেই।

নিম্নলিখিত শৈলী নিয়ম একটি ওয়েব পৃষ্ঠায় একটি উপাদান লুকিয়ে রাখে:

আপনি যখন ডিসপ্লে এর মান সেট করেন কোনটিতেই, প্রভাবিত উপাদানটি অদৃশ্য হয়ে যাবে। এর অর্থ হল উপাদানটি আর ওয়েব পৃষ্ঠায় কোনো স্থান গ্রহণ করবে না৷

৷

প্রদর্শন:কোনোটিই উদাহরণ নয়

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

আমরা নিম্নলিখিত কোড ব্যবহার করে পৃষ্ঠায় ছবিটি লুকাতে পারি:

<html>
<div>
<h1>About Us</h1>
<img src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" />
<p>The Superstar Bakers Club, founded in 2014, is a community of passionate cookers and bakers from the Charleston, S.C. area. The club has over 100 members and meets each week to share ideas and experiment with new recipes.</p>
</div>
<style>
img {
 display: none;
}
<style>

ক্লিক করুন সিএসএস-এ উপাদানগুলি কীভাবে লুকাবেন:একটি বিস্তৃত ধাপে ধাপে টিউটোরিয়াল আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড সম্পাদকের বোতাম।

আমরা একটি HTML

ট্যাগের মধ্যে তিনটি উপাদান সংজ্ঞায়িত করেছি।

উপাদানটি আমাদের হেডার তৈরি করতে ব্যবহৃত হয় এবং এতে আমাদের সম্পর্কে পাঠ্য রয়েছে . আমাদের HTML উপাদান একটি কেকের একটি চিত্র তৈরি করে, যা 200px লম্বা এবং 200px চওড়া।
উপাদানটিতে ক্লাবের একটি সংক্ষিপ্ত বিবরণ রয়েছে।

আমাদের CSS কোডে, আমরা আমাদের পৃষ্ঠার সমস্ত ছবি ট্যাগ নির্বাচন করতে "img" নির্বাচক ব্যবহার করি। এই নিয়মটি সমস্ত ট্যাগের প্রদর্শন বৈশিষ্ট্যকে কোনও নয় সেট করে . অথবা, অন্য কথায়, শৈলীর নিয়ম আমাদের চিত্রকে লুকিয়ে রাখে।

যদিও আমাদের ছবিটি লুকানো আছে, তবুও এটি আমাদের ওয়েব পেজে বিদ্যমান। আমরা যদি আমাদের ছবি ফিরিয়ে আনতে চাই, আমরা হয় display:none; মুছে ফেলতে পারি শৈলী অথবা, আমরা অন্য প্রদর্শন শৈলী নির্দিষ্ট করতে পারি (যেমন block অথবা ইনলাইন )।

আপনি এই নিয়মটিকে একটি ইনলাইন HTML অ্যাট্রিবিউট হিসেবে সংজ্ঞায়িত করতে পারেন:

ইনলাইন HTML এবং CSS বৈশিষ্ট্য সম্পর্কে আরও জানতে, আমাদের ইনলাইন CSS গাইড দেখুন।

সিএসএস লুকান উপাদান:দৃশ্যমানতা

ওয়েব পৃষ্ঠায় একটি উপাদান দৃশ্যমান কিনা তা নিয়ন্ত্রণ করতে CSS দৃশ্যমানতা বৈশিষ্ট্য ব্যবহার করা হয়।

ডিফল্টরূপে, দৃশ্যমানতার মান সম্পত্তি দৃশ্যমান . যাইহোক, যদি আপনি একটি চিত্রকে অদৃশ্য করতে চান, আপনি দৃশ্যমানতা এর মান সেট করতে পারেন লুকানো করতে .

নিম্নলিখিত শৈলী নিয়মটি লুকানো একটি উপাদানের দৃশ্যমানতা সেট করে:

আগের থেকে কুকিং ক্লাবের উদাহরণে ফিরে আসা যাক। ধরুন আমরা আমাদের আমাদের সম্পর্কে কেকের চিত্রটি লুকিয়ে রাখতে চাই ওয়েব পেজ আমরা এই কোডটি ব্যবহার করে তা করতে পারি:

<html>
<div>
<h1>About Us</h1>
<img src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" />
<p>The Superstar Bakers Club, founded in 2014, is a community of passionate cookers and bakers from the Charleston, S.C. area. The club has over 100 members and meets each week to share ideas and experiment with new recipes.</p>
</div>
<style>
img {
 display: visibility;
}
<style>

এই উদাহরণে আমাদের HTML কোড একই। আমাদের CSS ফাইলে, ডিসপ্লে ব্যবহার করার পরিবর্তে সম্পত্তি, আমরা দৃশ্যমানতা ব্যবহার করেছি আমাদের উপাদান লুকাতে. আপনি উপরে দেখতে পাচ্ছেন, আমাদের ছবিটি ওয়েব পৃষ্ঠা থেকে লুকানো হয়েছে।

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

সিএসএস দৃশ্যমানতা বনাম প্রদর্শন

আমরা একটি উপাদান লুকানোর জন্য যে দুটি পদ্ধতি নিয়ে আলোচনা করেছি তা একই বলে মনে হয়, কিন্তু দুটির মধ্যে পার্থক্য রয়েছে৷

প্রদর্শন:কোনোটিই নয় নিয়ম একটি HTML নথি থেকে একটি উপাদান সরিয়ে দেয়। লুকানো উপাদানটির কোডটি এখনও উপস্থিত থাকলেও, উপাদানটি নিজেই প্রদর্শিত হবে না৷

৷

দৃশ্যমানতা:লুকানো৷ নিয়ম, অন্যদিকে, একটি উপাদান লুকিয়ে রাখে, কিন্তু উপাদানটি এখনও ওয়েব পৃষ্ঠায় স্থান নেয়। আপনি যদি একটি উপাদান লুকিয়ে রাখতে চান কিন্তু দৃশ্যমানতা:লুকানো; ব্যবহার করে ওয়েব পৃষ্ঠায় সেই উপাদানটির স্থানটি রাখতে চান। নিয়ম সবচেয়ে ভালো।

সিএসএস-এ উপাদানগুলি কীভাবে লুকাবেন:একটি বিস্তৃত ধাপে ধাপে টিউটোরিয়াল

"ক্যারিয়ার কর্ম আমার জীবনে প্রবেশ করেছিল যখন আমার এটির সবচেয়ে বেশি প্রয়োজন ছিল এবং দ্রুত আমাকে একটি বুটক্যাম্পের সাথে মেলাতে সাহায্য করেছিল। স্নাতক হওয়ার দুই মাস পরে, আমি আমার স্বপ্নের চাকরি পেয়েছি যা আমার মূল্যবোধ এবং জীবনের লক্ষ্যগুলির সাথে সামঞ্জস্যপূর্ণ!"

ভেনাস, রকবটের সফটওয়্যার ইঞ্জিনিয়ার

আপনার বুটক্যাম্প ম্যাচ

খুঁজুন

উপসংহার

প্রদর্শন:কোনোটিই নয় নিয়ম একটি নথি থেকে একটি উপাদান সরিয়ে দেয় এবং এটি দৃশ্য থেকে লুকিয়ে রাখে। দৃশ্যমানতা:লুকানো৷ নিয়ম একটি নথিতে একটি উপাদান লুকিয়ে রাখে এবং সেই স্থানটি ছেড়ে দেয় যেখানে উপাদানটি খালি দেখা যেত।

আপনি কি CSS সম্পর্কে আরও জানতে চান? আমাদের কিভাবে সিএসএস শিখবেন নির্দেশিকা পড়ুন। এই নির্দেশিকাটি কীভাবে CSS শিখতে হয় সে সম্পর্কে কার্যকর পরামর্শে পূর্ণ। এছাড়াও আপনি শীর্ষ সম্পদের একটি তালিকা পাবেন যা আপনি আপনার জ্ঞানকে এগিয়ে নিতে ব্যবহার করতে পারেন।