پاسخ وردپرس

آموزش css در این جلسه ID و Class

فروردین ۱۳, ۱۳۹۹
ارسال شده توسط:
139 بازدید
۰

در آموزش css  گذشته با انتخابگر(selector) و نحوه استفاده از آن آشنا شدیم ، در این درس نیز با انواع انتخابگر های css آشنا میشویم.
علاوه بر عناصر html، در css میتوانید انتخابگری با نام دلخواه خود ایجاد نمایید و از آنها با عنوان id و class استفاده نمایید.

با استفاده از کلاس می توانیم برای یک تگ HTML استایلهای متفاوتی را تعریف کنیم.
برای نمونه فرض کنیم می خواهیم در صفحه دو نوع پاراگراف داشته باشیم:
یکی با متن مشکی و دیگری با متن قرمز. برای مشخص کردن این دو نوع پاراگراف می توانیم از سلکتور کلاس استفاده کنیم

آموزش css

آموزش css – معنی سلکتور (Selector) در CSS

همان طور که گفتیم سلکتور (Selector) در واقع راهکاری در CSS است که با آن عنصر هدف در HTML برای استایل دهی مشخص می شود،
سلکتورها الگوهای تعریف شده (Pattern) در CSS هستند که با آنها عنصر یا عناصری که می خواهیم استایل بر آنها تاثیر داشته باشد
را انتخاب (Select) می کنیم لذا می توانیم در ترجمه تحت الفظی این عبارت به آن انتخابگر نیز بگوییم،
برای مثال سلکتور p در CSS استایل را به تمام تگ های p موجود
در کدنویسی HTML صفحه نسبت می دهد یا به عبارتی دیگر تمام تگ های p در صفحه را جهت اعمال استایل CSS مد نظر انتخاب می کند

یک مثال کد های html

در مثال بالا استایل CSS به تمام تگ های p نسبت داده می شود،
اما اگر بخواهیم فقط یک تگ p خاص را انتخاب کنیم باید به یکی از روش های تعریف آی دی (ID) یا کلاس (Class) به تگ های html تعریف کنیم.

دوست عزیز پیشنهاد میشه این مطلب را هم ببینید
آموزش کار با ویژگی margin و padding در CSS

آموزش css – آموزش نحوه ایجاد کلاس در CSS

در زبان CSS چون ما با استفاده از این زبان میایم و به زبان HTML مون استایل میدیم ، یعنی در واقع CSS میاد و شکل و شمایل میده به زبان HTML برای زیبایی و جذابیت ظاهرش.

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

در HTML هم همین گونه است، فرض کنید ما چندین تگ مثلا یک تگ پاراگراف یک تگ تیتر و چندین تگ دیگر داریم
که میخواهیم همه ی این تگ ها رنگ شون آبی و اندازه شون ۱۳ پیکسل باشد،
خب بهترین و بهینه ترین کار اینه که همه ی این تگ هارو درون یک کلاس گذاشته سپس در CSS برای این کلاس ویژگی های مورد نظرمون رو تعریف نماییم.

دوست عزیز پیشنهاد میشه این مطلب را هم ببینید
آموزش کار با لیست ها یا Lists در HTML

کلاس ها میتونن استفاده بسیار زیادی برای ما داشته باشند،
بفرض مثال ما میتونیم با استفاده از کلاس ها تگ های HTML رو بصورت دسته ای ایجاد و سپس با استفاده از دستورات CSS برای آنها ویژگی های مشترکی را تعریف کرد.

به مثال زیر توجه فرمایید.

برای فراخوانی یک کلاس در CSS باید اول یک نقطه گذاشته سپس نام کلاس را مینویسیم و در نهایت دستورات سی اس اس را مینویسیم.

تعریف کد های css به مثال زیر توجه فرمایید.

در مثال بالا یک کلاس با نام p1 تعریف کردیم و آن را به دو عنصر html نسبت دادیم.

این کلاس هم رنگ متن و هم سایز متن را تغییر می دهد.

یک کلاس می تواند شامل چندین کد مختلف باشد.

آموزش-تعریف-id-در-css

آموزش css – آموزش Id در html

در این بخش به سراغ id در html می رویم و با یک مثال کاربرد id را به شما توضیح می دهیم.

بجز کلاس ها که در قالب سایت زیاد استفاده میشود از id نیز زیاد استفاده می کنیم.

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

دوست عزیز پیشنهاد میشه این مطلب را هم ببینید
آموزش مسیرها در HTML به صورت فیلم آموزشی

مثال زیر را ببینید.

در مثال بالا ما یک id در css تعریف کردیم.

در این id ما چند ویژگی قرار دادیم. اگر این id در css را به هر عنصر html بدهیم این ویژگی ها روی آن عنصر اعمال می شوند.

ویژگی های id شامل تغییر رنگ و سایز متن است. حال به h1 نسبت دادیم.

کد را در یک فایل html قرار دهید و اجرا کنید و نتیجه را ببینید.

آموزش css – تفاوت id و class در css .

تفاوت id و class در css در این است که یک کلاس را می توان به چندین عنصر مختلف اعمال کرد یا نسبت داد ولی یک id فقط به یک عنصر نسبت داده میشود.

از id و کلاس (class ) در جاهای مختلف استفاده میشود و هر کدام در جای خود مناسب است.

هیچ کدام نسبت به دیگری برتری ندارند ولی از کلاس ها بیشتر استفاده می شود.

اشتراک گذاری:

حتما" بخوانید پیشنهاد سون ریپلای

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نماد های اعتماد

سون ریپلای به استناد نماد های زیر ، دارای مجوز رسمی از مراجع مربوطه در جمهوری اسلامی ایران می باشد !

درگاه سامان
درگاه به پرداخت