این آموزش در تاریخ ۱۴۰۰/۰۹/۱۳ آپدیت شده است.

آموزش صفت عمومی class در HTML

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

آموزش صفت عمومی class در HTML

Free-Learn

صفت عمومی class در HTML

صفت class صفتی است که ما با استفاده از آن میتوانیم برای یک عنصر ( تگ ) یک یا چندین کلاس تعریف نماییم و سپس برای همان کلاس ها در CSS استایل تعریف کرد.

فرض میکنیم من ۱۰۰ تا تگ P داخل صفحه دارم، حال من میخوام رنگ متن این تگ هارو آبی و همشون در وسط صفحه قرار بگیرند، خب یه روش اینه که بیایم و از صفت Style داخل هر یک از تگ ها استفاده کنیم.

مثال : استفاده از صفت Style داخل هریک از تگ ها بصورت مجزا

امتحان کنید

خب اینجوری اصلا خوب و بهینه نیست، چون اولا حجم صفحه مون الکی میره بالا و دوما شاید من فردا بخوام رنگ آبی رو قرمز کنم ، خب باید بیام و دونه به دونه دوباره ویرایش کنم. ( قشنگ کمر شکنه )

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

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

همون مثال بالا، فقط اینبار با کلاس : ( اینجوری هم کدمون تمیزتر و بهینه تره و هم اگه فردا روزی خواستیم تغییر بدیم برای خودمون راحتتره )

امتحان کنید

Free-Learn

مثال از صفت class در HTML

در ادامه میتوانید یک مثال از این صفت را مشاهده نمایید.

مثال شماره ۱ : مشخص کردن ۱ عدد کلاس برای تگ P

امتحان کنید

مثال شماره ۲ : مشخص کردن چندین کلاس بصورت همزمان برای چندین تگ

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از صفت class در HTML پشتیبانی میکنند یا خیر.

نام مرورگر Chrome Firefox Opera Safari Edge
پشتیبانی بله بله بله بله ۱۲

Free-Learn

روش استفاده

روش استفاده از این صفت در عناصر HTML بصورت زیر می باشد.

Free-Learn

جدول مقادیر صفت class

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

مقدار توضیح
Class_Name * برای تعریف یک یا چند کلاس برای یک عنصر
* برای تعریف بیش از یک کلاس باید بین نام کلاس ها یک فاصله قرار دهید.
مثال :

Free-Learn

نکات و توضیحات

  • در HTML5 صفت class را میتوان با تمامی عناصر معتبر بکار گرفت.
  • در HTML 4.01 صفت class را نمیتوان با عناصر <base>, <head>, <html>, <meta>, <param> <script>, <style>, <title> بکار گرفت.
  • نام یک کلاس باید با حروف الفبای انگلیسی کوچک و یا بزرگ شروع شود
  • در تعریف نام یک کلاس میشه از حروف کوچک و بزرگ انگلیسی و همچنین از اعداد و یا علامت های – و _ استفاده کرد.
  • نام کلاس نباید با عدد شروع شود. مثله ( ۴test )
  • از کلاس ها در زبان جاوااسکریپت هم میشه استفاده کرد ولی خب بیشترین استفاده از کلاس ها در زبان CSS می باشد.

Free-Learn

دریافت PDF یا پرینت این مطلب