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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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