সিএসএসের ক্ষেত্রে <div class="">
এবং এর মধ্যে পার্থক্য কী <div id="">
? এটি কি ঠিক আছে <div id="">
?
আমি বিভিন্ন বিকাশকারীকে উভয় উপায়ে এটি করতে দেখছি এবং যেহেতু আমি নিজেই শিখিয়েছি, আমি সত্যিই এটি কখনই খুঁজে পাইনি।
সিএসএসের ক্ষেত্রে <div class="">
এবং এর মধ্যে পার্থক্য কী <div id="">
? এটি কি ঠিক আছে <div id="">
?
আমি বিভিন্ন বিকাশকারীকে উভয় উপায়ে এটি করতে দেখছি এবং যেহেতু আমি নিজেই শিখিয়েছি, আমি সত্যিই এটি কখনই খুঁজে পাইনি।
উত্তর:
ids
যেমন অনন্য হতে হবে যেখানে class
অনেকগুলি ক্ষেত্রে প্রয়োগ করা যেতে পারে। সিএসএসে, id
চেহারা দেখতে #elementID
এবং class
উপাদানগুলির মতো দেখতে.someClass
সাধারণভাবে, id
আপনি যখনই কোনও নির্দিষ্ট উপাদানটিকে উল্লেখ করতে চান এবং class
যখন আপনার কাছে বেশ কয়েকটি জিনিস একই রকম থাকে তখন ব্যবহার করুন। উদাহরণস্বরূপ, সাধারণ id
উপাদান ভালো জিনিস হয় header
, footer
, sidebar
। সাধারণ class
উপাদানগুলি হ'ল highlight
বা এর মতো জিনিস external-link
।
ক্যাসকেডটি পড়তে এবং বিভিন্ন নির্বাচকদের অর্পিত নজিরটি বোঝা ভাল ধারণা: http://www.w3.org/TR/CSS2/cascade.html
আপনার যে বুনিয়াদি নজিরটি বুঝতে হবে তা হ'ল id
নির্বাচকরা নির্বাচকদের চেয়ে বেশি পছন্দ করেন class
। আপনার যদি এটি ছিল:
<p id="intro" class="foo">Hello!</p>
এবং:
#intro { color: red }
.foo { color: blue }
পাঠ্যটি লাল হবে কারণ id
নির্বাচক নির্বাচকটির চেয়ে বেশি পছন্দ করে class
।
<li>
একটি ইন <ul>
) এবং আপনি একটি করতে চান একক পৃথক (কিনা সিএসএস বা জাতীয় ব্যাপার না) আচরণ করে তাদের মধ্যে একজন, তারপর আপনি ব্যবহার id
অ্যাট্রিবিউট ।
সম্ভবত একটি উপমা পার্থক্য বুঝতে সাহায্য করবে:
<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />
শিক্ষার্থীদের আইডি কার্ডগুলি আলাদা। ক্যাম্পাসে দু'জন শিক্ষার্থীর একই শিক্ষার্থীর আইডি কার্ড থাকবে না। তবে, অনেক শিক্ষার্থী একে অপরের সাথে কমপক্ষে একটি ক্লাস ভাগ করে নিতে এবং করতে পারে ।
একাধিক শিক্ষার্থীকে জীববিজ্ঞানের মতো এক শ্রেণির শিরোনামে রাখা ঠিক আছে । তবে একাধিক শিক্ষার্থীকে এক শিক্ষার্থীর আইডির আওতায় আনা কখনই গ্রহণযোগ্য নয় ।
স্কুল ইন্টারকম সিস্টেমের উপর বিধি দেওয়ার সময় , আপনি কোনও শ্রেণিকে বিধি দিতে পারেন :
"আগামীকাল, সমস্ত শিক্ষার্থী জীববিজ্ঞানের ক্লাসে একটি লাল শার্ট পরতে হবে।"
.Biology {
color: red;
}
অথবা আপনি কোনও নির্দিষ্ট ছাত্রকে তার অনন্য আইডি কল করে বিধি দিতে পারেন :
"জোনাথন সাম্পসনকে আগামীকাল সবুজ শার্ট পরতে হবে।"
#JonathanSampson {
color: green;
}
এক্ষেত্রে জোনাথন সাম্পসন দুটি কমান্ড পাচ্ছেন: একটি জীববিজ্ঞানের ক্লাসে একজন শিক্ষার্থী এবং অন্যটি প্রত্যক্ষ প্রয়োজন হিসাবে। কারণ জোনাথনকে আইডি অ্যাট্রিবিউটের মাধ্যমে সবুজ শার্ট পরার জন্য সরাসরি বলা হয়েছিল, তিনি লাল শার্ট পরার আগের অনুরোধটিকে অগ্রাহ্য করবেন।
আরও নির্দিষ্ট নির্বাচকরা জিতেন।
<student id="JonathanSampson" class="Physics" />
<div id="SomeId" class="SomeClass"></div>
পুরোপুরি বৈধ
<student id="JonathanSampson" class="Biology" />
এবং<student id="JonathanSampson" class="Physics" />
<student id="JonathanSampson" class="Biology Physics" />
দুজনের মধ্যে সহজ পার্থক্য হ'ল যখন কোনও ক্লাসটি কোনও পৃষ্ঠায় বারবার ব্যবহার করা যায়, তখন আইডি অবশ্যই প্রতি পৃষ্ঠায় একবার ব্যবহার করা উচিত। সুতরাং, পৃষ্ঠার মূল বিষয়বস্তু চিহ্নিত করার জন্য ডিভ উপাদানটিতে আইডি ব্যবহার করা উপযুক্ত, কারণ কেবলমাত্র একটি প্রধান বিষয়বস্তু বিভাগ থাকবে। বিপরীতে, আপনি একটি টেবিলের মধ্যে বিকল্প সারি রঙ সেট আপ করতে অবশ্যই একটি ক্লাস ব্যবহার করতে হবে, কারণ সেগুলি সংজ্ঞায়িতভাবে একাধিকবার ব্যবহৃত হবে।
আইডি একটি অবিশ্বাস্যভাবে শক্তিশালী সরঞ্জাম। কোনও আইডি সহ একটি উপাদান জাভাস্ক্রিপ্টের কোনও অংশের লক্ষ্য হতে পারে যা কোনও উপায়ে উপাদান বা এর সামগ্রীগুলিকে ম্যানিপুলেট করে। আইডি অ্যাট্রিবিউটটি অন্তর্গত লিঙ্কের লক্ষ্য হিসাবে ব্যবহার করা যেতে পারে, অ্যাঙ্কর ট্যাগগুলি নামের বৈশিষ্ট্যগুলির সাথে প্রতিস্থাপন করে। অবশেষে, আপনি যদি আপনার আইডিগুলি পরিষ্কার এবং যৌক্তিক করেন তবে তারা নথির মধ্যে "স্ব স্ব ডকুমেন্টেশন" বাছাই করতে পারে। উদাহরণস্বরূপ, ব্লকের আগে কোনও মন্তব্য যোগ করার দরকার নেই যে উল্লেখ করে যে কোডের একটি ব্লকে মূল বিষয়বস্তু থাকবে যদি ব্লকের খোলার ট্যাগটিতে একটি আইডি থাকে, বলুন, "প্রধান", "শিরোনাম", "পাদচরণ ", ইত্যাদি।
একটি আইডি অবশ্যই পুরো পৃষ্ঠায় অনন্য হতে হবে।
একটি শ্রেণি অনেক উপাদান প্রয়োগ করতে পারে।
কখনও কখনও, আইডিএস ব্যবহার করা ভাল ধারণা।
একটি পৃষ্ঠায় আপনার সাধারণত একটি পাদলেখ, একটি শিরোনাম থাকে ...
তারপরে পাদচরণটি একটি আইডি সহ একটি ডিভের মধ্যে থাকতে পারে
<ডিভিডি আইডি = "পাদলেখ" শ্রেণি = "...">
এবং এখনও একটি ক্লাস আছে
আপনি একই স্টাইলিংটি চান এমন একাধিক উপাদানগুলির জন্য একটি ক্লাস ব্যবহার করা উচিত। একটি আইডি একটি অনন্য উপাদানের জন্য হওয়া উচিত। এই টিউটোরিয়াল দেখুন ।
আপনি পড়ুন উচিত W3C এর মান যদি আপনি একটি কঠোর প্রথানুসারী হতে চান, অথবা যদি আপনি চান আপনার পৃষ্ঠাগুলি করা যাচাই মান।
আইডিগুলি অনন্য। ক্লাস হয় না। উপাদানগুলির একাধিক ক্লাসও থাকতে পারে। এছাড়াও ক্লাসগুলি একটি উপাদানটিতে গতিশীলভাবে যুক্ত এবং সরানো যেতে পারে।
আপনি যে কোনও আইডি ব্যবহার করতে পারেন আপনি পরিবর্তে একটি ক্লাস ব্যবহার করতে পারেন। বিপরীত সত্য নয়।
কনভেনশনটি মনে হয় যে প্রতিটি পৃষ্ঠায় থাকা পৃষ্ঠ উপাদানগুলির জন্য আইডি ব্যবহার করা হবে (যেমন "নভবার" বা "মেনু") এবং অন্য কিছুর জন্য ক্লাস তবে এটি কেবল কনভেনশন এবং আপনি ব্যবহারের বিভিন্ন প্রকরণ দেখতে পাবেন।
অন্য একটি পার্থক্য হ'ল ফর্ম ইনপুট উপাদানগুলির জন্য, <label>
উপাদানটি আইডি দ্বারা কোনও ক্ষেত্রের উল্লেখ করে তাই আপনি যদি ব্যবহার করতে যাচ্ছেন তবে আপনাকে আইডি ব্যবহার করতে হবে <label>
। একটি অ্যাক্সেসযোগ্যতার জিনিস এবং আপনার সত্যই এটি ব্যবহার করা উচিত।
বছরের পর বছরগুলিতে আইডিগুলিও পছন্দ করা হত কারণ তারা জাভাস্ক্রিপ্টে সহজেই অ্যাক্সেসযোগ্য (getElementById) পান। JQuery এবং অন্যান্য জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কের আবির্ভাবের সাথে এটি এখন অনেকটাই একটি নন-ইস্যু।
ক্লাসগুলি বিভাগগুলির মতো। অনেক এইচটিএমএল উপাদানগুলি একটি শ্রেণীর অন্তর্ভুক্ত হতে পারে এবং একটি এইচটিএমএল উপাদানগুলির একাধিক শ্রেণি থাকতে পারে। ক্লাসগুলি সাধারণ স্টাইল বা শৈলী প্রয়োগ করতে ব্যবহৃত হয় যা একাধিক এইচটিএমএল উপাদান জুড়ে প্রয়োগ করা যেতে পারে।
আইডি সনাক্তকারী হয়। তারা অনন্য; অন্য কারও কাছে একই আইডি রাখার অনুমতি নেই। আইডি এইচটিএমএল উপাদানটিতে অনন্য শৈলী প্রয়োগ করতে ব্যবহৃত হয়।
আমি এই ফ্যাশনে আইডি এবং ক্লাস ব্যবহার করি:
<div id="header">
<h1>I am a header!</h1>
<p>I am subtext for a header!</p>
</div>
<div id="content">
<div class="section">
<p>I am a section!</p>
</div>
<div class="section special">
<p>I am a section!</p>
</div>
<div class="section">
<p>I am a section!</p>
</div>
</div>
এই উদাহরণে, শিরোনাম এবং সামগ্রী বিষয়গুলি # হেডার এবং # কনটেন্টের মাধ্যমে স্টাইল করা যেতে পারে can সামগ্রীর প্রতিটি বিভাগকে # কনটেন্ট .এসেকশনের মাধ্যমে একটি সাধারণ শৈলী প্রয়োগ করা যেতে পারে। শুধু কিকের জন্য, আমি মধ্য বিভাগের জন্য একটি "বিশেষ" শ্রেণি যুক্ত করেছি। মনে করুন আপনি একটি নির্দিষ্ট বিভাগের একটি বিশেষ স্টাইলিং করতে চান। এটি বিশেষ শ্রেণীর সাহায্যে অর্জন করা যায়, তবুও বিভাগটি # কনটেন্ট। সেকশন থেকে সাধারণ শৈলীর উত্তরাধিকার সূত্রে প্রাপ্ত।
আমি যখন জাভাস্ক্রিপ্ট বা সিএসএস ডেভেলপ করি, আমি সাধারণত খুব নির্দিষ্ট এইচটিএমএল উপাদান অ্যাক্সেস / পরিচালনা করতে আইডি ব্যবহার করি এবং আমি বিস্তৃত উপাদানগুলির শৈলীতে অ্যাক্সেস / প্রয়োগ করতে ক্লাস ব্যবহার করি।
সিএসএস প্রয়োগ করার সময় এটি একটি শ্রেণিতে প্রয়োগ করুন এবং কোনও আইডিতে যতটা সম্ভব এড়াতে চেষ্টা করুন। আইডিটি কেবল উপাদানটি আনার জন্য বা কোনও ইভেন্টের বাইন্ডিংয়ের জন্য জাভাস্ক্রিপ্টে ব্যবহার করা উচিত।
ক্লাসগুলি সিএসএস প্রয়োগ করতে ব্যবহার করা উচিত।
কখনও কখনও ইভেন্ট বাঁধার জন্য আপনার ক্লাস ব্যবহার করতে হবে। এই জাতীয় ক্ষেত্রে, CSS প্রয়োগের জন্য যে ক্লাসগুলি ব্যবহৃত হচ্ছে তা এড়িয়ে চলার চেষ্টা করুন এবং পরিবর্তে নতুন ক্লাস যুক্ত করুন যা সম্পর্কিত সিএসএস নেই। আপনি যখন কোনও ক্লাসের জন্য সিএসএস পরিবর্তন করতে বা যে কোনও উপাদানগুলির জন্য সিএসএস শ্রেণির নাম একসাথে পরিবর্তন করতে হবে তখন এটি সাহায্য করবে।
সিএসএস নির্বাচকের স্থানটি শর্তাধীন আইডি শৈলীর জন্য অনুমতি দেয়:
h1#my-id {color:red}
p#my-id {color:blue}
প্রত্যাশার হিসাবে রেন্ডার হবে। কেন আপনি এই করবেন? কখনও কখনও আইডিগুলি গতিময়ভাবে তৈরি হয় ইত্যাদি etc.
body#list-page #title {font-size:56px}
body#detail-page #title {font-size:24px}
ব্যক্তিগতভাবে, আমি দীর্ঘতর ক্লাসের নাম বাছাইকারীদের পছন্দ করি:
body#list-page .title-block > h1 {font-size:56px}
যেমন আমি দেখতে পেয়েছি নেস্টেড আইডি ব্যবহার করে চিকিত্সাটিকে কিছুটা বিঘ্নিত হতে পারে ti কেবলমাত্র জেনে থাকুন যে সাস / এসসিএসএস বিশ্বের বিকাশকারীরা এই জিনিসগুলিতে হাত পেতে থাকায় নেস্টেড আইডি প্রচলিত হয়ে উঠছে।
অবশেষে, যখন এটি নির্বাচক কর্মক্ষমতা এবং অগ্রাধিকার আসে, আইডি জিতে যায়। এটি সম্পূর্ণ অন্যান্য বিষয়।
যে কোনও উপাদান একটি ক্লাস বা একটি আইডি থাকতে পারে।
একটি শ্রেণি নির্দিষ্ট ধরণের প্রদর্শনকে উল্লেখ করতে ব্যবহৃত হয়, উদাহরণস্বরূপ আপনার কাছে একটি ডিভের জন্য সিএসএস ক্লাস থাকতে পারে যা এই প্রশ্নের উত্তরকে উপস্থাপন করে। যেহেতু অনেক উত্তর থাকবে, একাধিক ডিভাইসের জন্য একই স্টাইলিংয়ের প্রয়োজন হবে এবং আপনি একটি ক্লাস ব্যবহার করবেন।
একটি আইডি কেবল একটি একক উপাদানকে বোঝায়, উদাহরণস্বরূপ ডানদিকে সম্পর্কিত বিভাগটি নির্দিষ্ট স্টাইলিং থাকতে পারে এটি অন্য কোথাও পুনরায় ব্যবহার করা হয়নি, এটি একটি আইডি ব্যবহার করবে।
প্রযুক্তিগতভাবে আপনি এগুলির জন্য ক্লাস ব্যবহার করতে পারেন বা এগুলিকে যুক্তিযুক্তভাবে বিভক্ত করতে পারেন। আপনি একাধিক উপাদানগুলির জন্য আইডি এর পুনরায় ব্যবহার করতে পারবেন না।
শ্রেণি উপাদানগুলির একটি গোষ্ঠীতে আপনার স্টাইল প্রয়োগ করার জন্য। আইডি শৈলীগুলি সেই আইডি সহ কেবলমাত্র উপাদানটিতে প্রযোজ্য (সেখানে কেবল একটি হওয়া উচিত)। সাধারণত আপনি ক্লাস ব্যবহার করেন, তবে যদি এক-বন্ধ থাকে তবে আপনি আইডি ব্যবহার করতে পারেন (বা কেবল স্টাইলটিকে উপাদানটির সাথে সোজা করে রাখতে পারেন)।
উন্নত বিকাশ আইডিতে আমরা মূলত জাভাস্ক্রিপ্ট ব্যবহার করতে পারি।
পুনরাবৃত্তিযোগ্য উদ্দেশ্যে, ক্লাস এস আইডি এর পক্ষে বিপরীতে আসে যা অনন্য বলে মনে হয়।
নীচে উপরের অভিব্যক্তিগুলি বর্ণনা করার জন্য একটি উদাহরণ দেওয়া হল:
<div id="box" class="box bg-color-red">this is a box</div>
<div id="box1" class="box bg-color-red">this is a box</div>
এখন আপনি এখানে দেখতে পারেন box
এবং box1
দুই (2) ভিন্ন <div>
উপাদান, কিন্তু আমরা আবেদন করতে পারেন box
এবং bg-color-red
উভয়ের ক্লাস।
ধারণাটি একটি ওওপি ভাষায় উত্তরাধিকার ।
1) ডিভি আইডি পুনরায় ব্যবহারযোগ্য নয় এবং কেবলমাত্র এইচটিএমএলের একটি উপাদান প্রয়োগ করা উচিত যখন ডিভি ক্লাস একাধিক উপাদানগুলিতে যুক্ত করা যায়।
2) আইডিটির আরও বেশি গুরুত্ব থাকে যদি উভয়টি একই উপাদানটিতে প্রয়োগ করা হয় এবং বিরোধী শৈলী থাকে তবে আইডিটির শৈলী প্রয়োগ করা হবে।
3) স্টাইল উপাদান সর্বদা একটি স্থাপন করে একটি ডিভি ক্লাস উল্লেখ করুন। (ডট) তাদের নামের সামনে যখন ডিভিডি আইডি শ্রেণি উল্লেখ করা হয় তাদের নামের সামনে একটি # (হ্যাশ) রেখে putting
4) উদাহরণ: -
<style>
ঘোষণায় শ্রেণি -.red-background { background-color: red; }
প্রজ্ঞাপনে আইডি
<style>
-#blue-background {background-color: blue;}
<div class="red-background" id="blue-background">Hello</div>
এখানে ব্যাকগ্রাউন্ড নীল বর্ণের হবে
id
এবং class
দুটি গ্লোবাল / স্ট্যান্ডার্ড এইচটিএমএল অ্যাট্রিবিউট (নীচের বিশ্বব্যাপী বৈশিষ্ট্যগুলি যে কোনও এইচটিএমএল উপাদানগুলিতে ব্যবহার করা যেতে পারে))
class
একটি উপাদানের জন্য এক বা একাধিক শ্রেণীর নাম উল্লেখ করে (স্টাইল শীটে শ্রেণি বোঝায়)
id
কোনও উপাদানটির জন্য একটি অনন্য আইডি নির্দিষ্ট করে
আইডি বৈশিষ্ট্যগুলি একটি উপাদান ডকুমেন্ট-বিস্তৃত অনন্য শনাক্তকারী দেয় যেখানে শ্রেণি বৈশিষ্ট্য অনুরূপ উপাদানগুলিকে শ্রেণিবদ্ধ করার একটি উপায় সরবরাহ করে।
আইডি বৈশিষ্ট্যটির মানটি এইচটিএমএল পৃষ্ঠায় অবশ্যই অনন্য হতে হবে যেখানে আপনি একই বৈশিষ্ট্য প্রয়োগ করতে চান সেখানে শ্রেণি বৈশিষ্ট্য পুনরায় ব্যবহার করা যেতে পারে
ক্লাস একাধিক উপাদানগুলির জন্য ব্যবহৃত হয় যার সাধারণ বৈশিষ্ট্য রয়েছে E উদাহরণস্বরূপ আপনি যদি পি এবং বডি ট্যাগ উভয়ের জন্য একই রঙ এবং ফন্ট চান তবে শ্রেণীর বৈশিষ্ট্য বা বিভাগে নিজেই ব্যবহার করুন ample
অন্যদিকে আইডি একটি একক উপাদান বৈশিষ্ট্য হাইলাইট করার জন্য ব্যবহৃত হয় এবং কেবলমাত্র একটি নির্দিষ্ট উপাদানের জন্য ব্যবহৃত হয় example উদাহরণস্বরূপ আমাদের কয়েকটি বৈশিষ্ট্যের সাথে একটি এইচ 1 ট্যাগ রয়েছে আমরা চাইব না যে তারা পেজ জুড়ে অন্য কোনও উপাদানগুলিতে পুনরাবৃত্তি করবে।
এটি লক্ষ করা উচিত যে আমরা যদি কোনও উপাদানগুলিতে ক্লাস এবং আইডি উভয় ব্যবহার করি তবে * আইডি ক্লাসের বৈশিষ্ট্যগুলিকে ওভারভারাইড করে * * কেবল কারণ আইডি একক উপাদানটির জন্য
নীচের উদাহরণটি দেখুন
<html>
<head>
<style>
#html_id{
color:aqua;
background-color: black;
}
.html_class{
color:burlywood;
background-color: brown;
}
</style>
</head>
<body>
<p class="html_class">Lorem ipsum dolor sit amet consectetur adipisicing
elit.
Perspiciatis a dicta qui unde veritatis cupiditate ullam quibusdam!
Mollitia enim,
nulla totam deserunt ex nihil quod, eaque, sed facilis quos iste.</p>
</body>
</html>
আমরা আউটপুট উত্পন্ন