آموزش نحوه ایجاد کلاس یا Class در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه ایجاد کلاس یا Class در HTML با من همراه باشید.

آموزش نحوه ایجاد کلاس یا Class در HTML

Free-Learn

نحوه ایجاد کلاس یا Class در HTML

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

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

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

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

شکل کلی برای استفاده یا ایجاد کلاس در عناصر / تگ های HTML بصورت زیر می باشد :

که element همان عنصر یا تگ ما در HTML می باشد و بجای (نام کلاس) نیز باید نام کلاس مورد نظرمون رو وارد نماییم. که میتوانیم به دلخواه این نام را انتخاب نماییم.

شکل کلی برای فراخوانی یک کلاس در CSS بصورت زیر می باشد :

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

Free-Learn

نحوه ایجاد کلاس در تگ DIV در HTML

برای ایجاد و استفاده از کلاس ها در تگ DIV کافیه داخل این تگ یک کلاس به دلخواه تعریف نماییم و سپس با استفاده از دستورات CSS برای کلاس مون استایل تعریف نماییم.

در مرحله ی بعد برای فراخوانی اون کلاس در CSS اول یک نقطه (.) میگذاریم و سپس نام کلاس را مینویسیم و در نهایت دستورات سی اس اس مورد نظرمون رو وارد مینماییم.

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

امتحان کنید

Free-Learn

ما علاوه بر Div میتونیم از کلاس ها در هر یک از تگ های HTML نیز استفاده نماییم، مثلا در تگ های پاراگراف یا تیترها یا تگ لینک و دیگر عناصر HTML ما به راحتی میتوانیم از صفت کلاس یا Class استفاده نماییم.

نحوه ایجاد کلاس در تگ های HTML

تگ DIV هیچ فرقی با دیگر تگ های HTML ندارد، یعنی روش ایجاد کلاس در دیگر تگ های HTML دقیقا همانند تگ DIV می باشد، پس بطور کلی میشه همانند تگ DIV در بقیه ی تگ های HTML کلاس ایجاد کرد.

برای مثال لطفا به مثال های زیر توجه نمایید تا نحوه ی ایجاد کلاس در انواع تگ های HTML را یاد بگیرید.

نحوه ایجاد کلاس در تگ پاراگراف

امتحان کنید

نحوه ایجاد کلاس در تگ های تیتر

امتحان کنید

نحوه ایجاد کلاس در تگ های درون خطی یا Inline

امتحان کنید

Free-Learn

  • خلاصه ی این بخش
  • برای ایجاد یک یا چند کلاس درون یک تگ باید از صفت Class استفاده کرد.
  • برای فراخوانی یک کلاس در سی اس اس باید اول یک نقطه (.) گذاشته سپس نام کلاس و در نهایت دستورات سی اس اس را نوشت.
  • یک تگ میتواند بصورت همزمان ۱ یا چند کلاس داشته باشد.
  • چندین تگ میتونه بصورت همزمان از یک کلاس استفاده نمایند و یک کلاس نیز میتونه بصورت همزمان بروی چندین تگ مورد استفاده قرار بگیرد.
  • دانلود PDF این آموزش
  • برای دانلود فایل PDF این آموزش کلیک نمایید