جلسه ۰۶ – کلاس ها و آیدی ها در CSS

طراحی سایت

..جلسه ۰۶ – کلاس ها و آیدی ها در CSS..
جلسه ۰۶ – کلاس ها و آیدی ها در CSS
طراحی سایت

جلسه ۰۶ – کلاس ها و آیدی ها در CSS

ویژگی ها در css چگونه فراخوانی می‌شوند؟ تفاوت نوع معرفی کلاس‌ها و آیدی ها در css چیست؟ تفاوت کلاس ها آی دی ها در چیست؟ در این جلسه به صورت کامل با این دو خاصیت که در آموزش HTML نیز به آن اشاره کردیم آشنا می‌شویم، در جلسه ی قبلی یعنی آشنایی با Selector ها، مفاهیم اولیه و اصلی این دو رو یاد گرفتیم. در این جلسه تفاوت هاشون رو یاد می‌گیریم و مثال های بیشتری رو ازشون مشاهده می‌کنیم.

سرفصل‌های پست

دو سوال در مورد کلاس ها

همونطور که یاد گرفتیم، کلاس ها برای انتخاب عناصر خاصی بین عناصر هم نام به کار میرن. دو سوال ممکنه پیش بیاد:

۱. تعدادی عنصر به شکل زیر داریم

<h1 >Mizfa Website</h1> <p >Mizfa CSS</p> <span class="mizfa">Mizfa HTML</span>

و بنا به علتی مجبور شدیم به همگی کلاس یکسان بدیم!

یک کلاس یکتا برای چندین تگ
یک کلاس یکتا برای چندین تگ

حالا می‌خوایم یک سری دستورات CSS رو به عنصر دوم، یعنی p نسبت بدیم، چیکار باید کنیم؟

خب اولین راهی که ممکنه به ذهن ما برسه اینه که خیلی راحت، عنصر p رو صدا کنیم:

p {    ... }

اما اگه دو عنصر p داشتیم چی؟

<p >Mizfa CSS</p> <p>Mizfa JS</p>

در اینجا، کافیه p رو صدا کنیم و به دنبال نام اون، نام کلاس رو همراه با نقطه “.” بنویسیم، یعنی به شکل زیر:

p.mizfa{    ... }

در اینجا، کد به این معناست: تگp ای که کلاس mizfa داره رو بردار و بهش دستورات مورد نظر رو نسبت بده.

و حالا سوال بعدی:

۲. آیا یک عنصر (تگ)، می‌تونه بیشتر از یک کلاس داشته باشه؟

پاسخ این سوال، مثبته! کافیه در زمان تعریف کردن نام کلاس برای عنصر مورد نظر، یه فاصله بزاریم و نام کلاس بعدی رو هم بنویسیم، یعنی به شکل زیر:

<div >Some content</div>

در این مثال، عنصر div دارای دو کلاس mizfa و mizfa2 هست و از دستورات هردو کلاس تبعیت می‌کنه.

.mizfa{ color: red; } .mizfa2{ font-size: 30px; }

بدین ترتیب، متن درون عنصر مورد نظر، هم قرمز و هم دارای سایز ۳۰ پیکسل خواهد بود!

استفاده از چند کلاس برای یک تگ
استفاده از چند کلاس برای یک تگ

تفاوت آیدی ها و کلاس ها

مهم ترین تفاوتی که ممکنه بین این دو پیش بیاد، اینه که کلاس ها می‌تونن برای چندین و چند عنصر به کار برن.

اما آیدی ها به این شکل نیستن و فقط، مخصوص یک عنصر هستن.

برای مثال:

<div ></div> <p ></p> <h4 ></h4>

این قطعه از کد کاملا درسته و مشکلی نداره. هر سه عنصر، توسط دستورات کلاس myclass در فایل CSS تغییر می‌کنن.

اما کد زیر:

<div id="myclass"></div> <p id="myclass"></p> <h4 id="myclass"></h4>

درست نیست و می‌تونه مشکل آفرین باشه.

تفاوت دیگه، اینه که آیدی ها همیشه بر کلاس ها، اولویت دارن. یعنی چی؟

یعنی اگه یک عنصر، همزمان دارای آیدی و کلاس باشه، ویژگی ­های اختصاص یافته به آیدی، بر ویژگی­ های اختصاص یافته به کلاس اولویت داره.

به مثال زیر توجه کنید:

کد HTML:

<p class=”paraph1”  id=”paraph2”>Id vs Class</p>

کد CSS:

.paraph1{ color: red; } #paraph2{ color:blue; }

نتیجه:

نتیجه کد id vs class
نتیجه کد id vs class

نتیجه گیری

  • کلاس ها و آی دی ها خاصیتی از HTML هستند که نقش بسیار مهمی در استایل دهی زبان CSS دارند.
  • کلاس ها و آیدی ها تفاوت هایی دارند.
  • از کلاس ها می‌توانیم در چندین عنصر استفاده شوند.
  • آیدی ها تنها می‌توانند برای یک عنصر مورد استفاده قرار گیرند.

بخش دیدگاه ها همیشه بازه، من و دوستانم آماده پاسخگویی به تمامی سوالات، انتقادات و پیشنهادات شما هستیم.

مدیر محتوا: علی اسمعیلی

103
25 مهر 1398
    ..نظرات..
    ..مقالات پربازدید..
    آموزش قرعه کشی در اینستاگرام
    طراحی سایت

    آموزش قرعه کشی در اینستاگرام

     آموزش قرعه کشی در اینستاگرام با سلام خدمت دوستان و کاربران گرامی . امروز با آموزش قرعه کشی در اینستاگرام برای کسانی که علاقه به ایجاد کمپین های تبلیغاتی دارند در خدمت شما هستیم . بحث قرعه کشی در اینستاگرام با توجه به فراگیر شدن این شبکه اجتماعی که البته امروزه زیرمجموعه فیسبوک مطرح میشود ، زیاد شده است . البته این احتمال وج...

    13941
    24 فروردین 1398
    دلایل موفقیت دیجی کالا
    طراحی سایت

    دلایل موفقیت دیجی کالا

    یکی از موفق ترین استارت اپ های ایران در دهه ی اخیر سایت دیجی کالا بوده است . به طوری که به جرئت می توان گفت این سایت بزرگ‌ ترین خرده‌ فروشی اینترنتی خاورمیانه است .اقایان محمدی در سال 1384 تصمیم راه اندازی این وب سایت گرفتند و در سال 85 این برند با نام فعلی ” دیجی کالا ” پایه گذاری گردید .مدیران این پروژه با این هدف او...

    1966
    22 اردیبهشت 1398
    bit.ly چیست ؟
    طراحی سایت

    bit.ly چیست ؟

    بیتلی یا bitly یکی از شناخته‌شده‌ترین سرویس‌های کوتاه کننده لینک است. این سایت با نشانی https://bit.ly در سال ۲۰۰۸ تاسیس شد. یک کوتاه کننده‌ی لینک وظیفه دارد تا لینک‌های مورد نظر کاربران را به شکل کوتاه و قابل خواندن و نوشتن تبدیل کند. این سرویس در هر ماه حدود ۶۰۰ میلیون لینک کاربران را کوتاه می‌کند.علت استفاده از...

    1889
    27 آذر 1398