সিএসএসে "" এর মধ্যে পার্থক্য কী। এবং "#" শৈলীর একটি সেট ঘোষণা করার সময়?


217

কোনও উপাদানের জন্য শৈলীর একটি সেট ঘোষণার মধ্যে #এবং এর মধ্যে পার্থক্য কী .এবং কোনটি ব্যবহার করবেন তা সিদ্ধান্ত নেওয়ার সময় শব্দার্থগুলি কী কার্যকর হয়?

উত্তর:


336

হ্যাঁ, তারা আলাদা ...

#একটি হল আইডি নির্বাচক , লক্ষ্য করার জন্য ব্যবহৃত একক একটি অনন্য আইডি সহ নির্দিষ্ট উপাদানের কিন্তু। একটি শ্রেণি নির্বাচক যা নির্দিষ্ট শ্রেণীর সাথে একাধিক উপাদানকে লক্ষ্য করতে ব্যবহৃত হয় । এটি অন্যভাবে রাখার জন্য:

  • #foo {}বৈশিষ্ট্যযুক্ত ঘোষিত একক উপাদানটির স্টাইল করবেid="foo"
  • .foo {}সমস্ত উপাদানগুলিকে একটি অ্যাট্রিবিউট দিয়ে স্টাইল করবে class="foo"(আপনার কাছে কোনও উপাদানকে একাধিক ক্লাসও অর্পণ করা যেতে পারে, কেবল স্পেস দিয়ে আলাদা করুন, যেমন class="foo bar")

সাধারণ ব্যবহার

সাধারণভাবে বলতে গেলে, আপনি নিজের পরিচিত কিছু স্টাইলিংয়ের জন্য # ব্যবহার করেন কেবল একবার প্রদর্শিত হবে উদাহরণস্বরূপ, উচ্চ স্তরের লেআউট যেমন সাইডবারগুলি, ব্যানার অঞ্চলগুলি ইত্যাদির মতো জিনিসগুলি things

শৈলীর পুনরাবৃত্তি যেখানে ক্লাসগুলি ব্যবহৃত হয়, উদাহরণস্বরূপ বলুন যে আপনি ত্রুটি বার্তাগুলির জন্য একটি বিশেষ ফর্মের শিরোনাম, আপনি একটি শৈলী তৈরি করতে পারেন h1.error {} যা কেবলমাত্র এতে প্রযোজ্য<h1 class="error">

নির্দিষ্টতা

আর একটি দিক যেখানে নির্বাচকরা পৃথক হয় তাদের নির্দিষ্টকরণের মধ্যে - একটি আইডি নির্বাচক শ্রেণি নির্বাচকের চেয়ে বেশি নির্দিষ্ট বলে মনে করা হয়। এর অর্থ হ'ল যেখানে শৈলীর কোনও উপাদানের সাথে দ্বন্দ্ব রয়েছে, সুনির্দিষ্ট নির্বাচকের সাথে সংজ্ঞায়িতগুলি কম নির্দিষ্ট নির্বাচককে ওভাররাইড করবে। উদাহরণস্বরূপ, এর <div id="sidebar" class="box">জন্য কোনও নিয়ম দেওয়া আছে#sidebar ওভাররাইড বিরোধী নিয়মগুলির জন্য.box

সিএসএস নির্বাচনকারীদের সম্পর্কে আরও জানুন

নির্বাচন টিউটোরিয়াল দেখুন CSS সিলেক্টর উপর আরো সেরা primers জন্য - তারা অবিশ্বাস্যভাবে শক্তিশালী, এবং যদি আপনার ধারণা কেবল যে "# divs জন্য ব্যবহার করা হয়" হয় তুমি ভাল করতে চাই ঠিক কিভাবে আরো কার্যকরভাবে সিএসএস ব্যবহার করার জন্য পড়তে।

সম্পাদনা: মনে হচ্ছে সিলেক্টরিয়ালটি আকাশের বড় ওয়েবসাইটে চলে গেছে, সুতরাং পরিবর্তে এই সংরক্ষণাগারটির লিঙ্কটি ব্যবহার করে দেখুন।


2
আমি বিশ্বাস করি যে বেশিরভাগ ব্রাউজারগুলি একই আইডি সহ একাধিক উপাদান নির্দিষ্ট করে (অবৈধভাবে), সেই সমস্ত উপাদানগুলিতে আইডি নির্বাচকের সাথে একটি বিধি প্রয়োগ করবে।
মাইলস

1
@ মাইলস সঠিক - আমি / আইডি / "/" লক্ষ্যগুলি "আইডি" বৈশিষ্ট্য এবং /./ লক্ষ্যগুলি "শ্রেণি" বলতে আরও সঠিক বলে মনে করি। যদিও আইডিটি অনন্য হওয়া উচিত , সিএসএস ইঞ্জিন সেটিকে বা যত্নটিকে বৈধতা দেয় না।
রেক্স এম

@ রেক্স এম - এটি কার্যকর যদিও এটি একটি একক উপাদান দেওয়া হলেও এটির অনন্য বা না তা একাধিক আইডি থাকতে পারে না। আমি এটি ফায়ারফক্সের অধীনে চেষ্টা করেছি এবং দুটি আইডির উপাদানগুলিকে উপেক্ষা করা হচ্ছে। উপাদানগুলির একাধিক ক্লাস থাকতে পারে।
উসাগি

ডিভাইডসাইডবার কি ডিভাইডসাইডবার একই জিনিস?
আলী গাজানী

সিলেক্টরিয়াল লিঙ্কটি খারাপ :(
জেক

28

এর #অর্থ এটি idকোনও উপাদানের সাথে মেলে । .বর্গ নাম প্রকাশ করে:

<div id="myRedText">This will be red.</div>
<div class="blueText">this will be blue.</div>


#myRedText {
    color: red;
}
.blueText {
    color: blue;
}

মনে রাখবেন যে এইচটিএমএল ডকুমেন্টে আইডি বৈশিষ্ট্যটি অবশ্যই অনন্য হতে হবে , সুতরাং আপনার যদি একাধিক উপাদান নির্দিষ্ট নির্দিষ্ট স্টাইলের প্রয়োজন হয় তবে আপনার একটি শ্রেণির নাম ব্যবহার করা উচিত।


10

বিন্দু ( .) একটি শ্রেণীর নাম নির্দেশ করে যখন হ্যাশ ( #) নির্দিষ্ট আইডি বৈশিষ্ট্য সহ কোনও উপাদানকে বোঝায় । শ্রেণিটি নির্দিষ্ট শ্রেণীর সাথে সজ্জিত যে কোনও উপাদানগুলির জন্য প্রযোজ্য হবে, যখন # শৈলী কেবলমাত্র সেই নির্দিষ্ট আইডি সহ উপাদানটির জন্য প্রযোজ্য।

শ্রেণির নাম:

<style>
   .class { ... }
</style>

<div class="class"></div>
<span class="class></span>
<a href="..." class="class">...</a>

নামযুক্ত উপাদান:

<style>
   #name { ... }
</style>

<div id="name"></div>

"নামক উপাদান" বিভ্রান্ত করছে
ববি জ্যাক

@ ববি - সুতরাং আপনি যখন কোনও উপাদানকে একটি আইডি - 'আইডি-ইনিং' দেবেন তখন আপনি এটিকে কী বলবেন?
tvanfosson

আমি ববির সাথে একমত - উপাদানগুলির একটি আইডি পাশাপাশি নাম থাকতে পারে। আপনি এই জাতীয় উপাদান কি বলবেন?
জন ম্যাককালাম 12

8

এটিও লক্ষণীয় যে ক্যাসকেডে একটি আইডি ( #) নির্বাচক আব ( ) নির্বাচকের চেয়ে বেশি নির্দিষ্ট. । সুতরাং, আইডি স্টেটমেন্টের নিয়মগুলি ক্লাস স্টেটমেন্টের নিয়মগুলিকে ওভাররাইড করবে।

উদাহরণস্বরূপ, যদি নিম্নলিখিত দুটি বিবৃতি থাকে:

.headline {
  color:red;
  font-size: 3em;
}

#specials {
  color:blue;
  font-style: italic;
}

একই HTML উপাদান প্রয়োগ করা হয়:

<h1 id="specials" class="headline">Today's Specials</h1>

রঙ: নীল নিয়ম ওভাররাইড হবে লাল: রঙ নিয়ম।


6

ইতিমধ্যে যা বলা হয়েছে তার উপর কয়েকটি দ্রুত এক্সটেনশান ...

একটি idঅবশ্যই অনন্য হতে হবে তবে আপনি বিভিন্ন স্টাইলকে আরও নির্দিষ্ট করে তুলতে একই আইডি ব্যবহার করতে পারেন।

উদাহরণস্বরূপ, এই এইচটিএমএল এক্সট্রাক্ট দেওয়া:

<div id="sidebar">
    <h2>Heading</h2>
    <ul class="menu">
        ...
    </ul>
</div>
<div id="content">
    <h2>Heading</h2>
    ...
</div>
<div id="footer">
    <ul class="menu">
        ...
    </ul>
</div>

আপনি এগুলি সহ বিভিন্ন স্টাইল প্রয়োগ করতে পারেন:

#sidebar h2
{ ... }

#sidebar .menu
{ ... }

#content h2
{ ... }

#footer .menu
{ ... }


আরও একটি দরকারী জিনিস জানতে হবে: স্পেস-ডিলিট করে আপনি একটি উপাদানের একাধিক ক্লাস রাখতে পারেন ...

<ul class="main menu">...</ul>
<ul class="other menu">...</ul>

যা আপনাকে .menuনির্দিষ্ট স্টাইল ব্যবহার করে .main.menuএবং সাধারণ স্টাইলিং করতে দেয়.sub.menu

.menu
{ ... }

.main.menu
{ ... }

.other.menu
{ ... }

4

.class নিম্নলিখিত উপাদান লক্ষ্য করে:

<div class="class"></div>

#class নিম্নলিখিত উপাদান লক্ষ্য করে:

<div id="class"></div>

নোট করুন যে আইডিটি ডকুমেন্ট জুড়ে অনন্য হতে হবে, যখনই যে কোনও সংখ্যক উপাদান ক্লাস ভাগ করতে পারে।


4

ইতিমধ্যে সবাই ইতিমধ্যে বলেছেন:

একটি পিরিয়ড ( .) একটি বর্গ নির্দেশ করে এবং একটি হ্যাশ ( #) একটি আইডি নির্দেশ করে ।

এর মধ্যে মৌলিক পার্থক্য হ'ল আপনি নিজের পৃষ্ঠায় একটি ক্লাস বারবার ব্যবহার করতে পারেন, যেখানে একটি আইডি একবার ব্যবহার করা যেতে পারে। এটি অবশ্যই, যদি আপনি ডাব্লুসি 3 মান ধরে থাকেন।

যদি আপনার একই আইডিতে একাধিক উপাদান থাকে তবে একটি পৃষ্ঠা এখনও রেন্ডার করবে, তবে আপনি যখন / যখন আপনি ডায়ামিনিকালি অ্যালিমেন্টগুলিকে তাদের আইডি দিয়ে কল করে আপডেট করার চেষ্টা করবেন তখন আপনি সমস্যার মধ্যে পড়বেন, কারণ তারা অনন্য নয় not

এটি আইডির বৈশিষ্ট্যগুলি শ্রেণীর বৈশিষ্ট্যগুলিকে ছাড়িয়ে দেবে তা লক্ষ করাও দরকারী।


2

# টি আইডি নির্বাচনকারী। এটি কেবল ম্যাচিং আইডির সাথে উপাদানগুলির সাথে মেলে। পরবর্তী শৈলীর বিধি সেই উপাদানটির সাথে মিলবে যা "সবুজ" এর মান সহ একটি আইডি বৈশিষ্ট্যযুক্ত:

#green {color: green}

আরও তথ্যের জন্য http://www.w3schools.com/css/css_syntax.asp দেখুন


-2

এখানে টি বিধিগুলি ব্যাখ্যা করার জন্য আমার প্রতিবেদন .styleএবং#style এটি একটি ম্যাট্রিক্সের অংশ। যদি সঠিক ক্রমে না হয় তবে তারা একে অপরকে ওভাররাইড করতে পারে বা বিরোধ সৃষ্টি করতে পারে।

এখানে লাইন আপ হয়।

জরায়ু

#style 0,0,1,0 id

.style 0,1,0,0 class

আপনি যদি এই দুটিটিকে ওভাররাইড করতে চান তবে ডাইনিটির <style></style>একটি ম্যাট্রিক্স স্তর রয়েছে বা 1,0,0,0.@ মিডিয়া ক্যোয়ারী উপরের সমস্ত জিনিসকে ওভাররাইড করে দিতে পারে ... আমি এ সম্পর্কে নিশ্চিত নই তবে আমি মনে করি আইডি নির্বাচনকারী #কেবলমাত্র একটি পৃষ্ঠায় একবার ব্যবহার করা যেতে পারে।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.