این آموزش در تاریخ ۱۴۰۰/۰۹/۱۳ آپدیت شده است.
آموزش صفت عمومی class در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش صفت عمومی class در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
صفت عمومی class در HTML
صفت class صفتی است که ما با استفاده از آن میتوانیم برای یک عنصر ( تگ ) یک یا چندین کلاس تعریف نماییم و سپس برای همان کلاس ها در CSS استایل تعریف کرد.
فرض میکنیم من ۱۰۰ تا تگ P داخل صفحه دارم، حال من میخوام رنگ متن این تگ هارو آبی و همشون در وسط صفحه قرار بگیرند، خب یه روش اینه که بیایم و از صفت Style داخل هر یک از تگ ها استفاده کنیم.
مثال : استفاده از صفت Style داخل هریک از تگ ها بصورت مجزا
|
1 2 3 4 5 6 7 8 |
<body> <p style="color:blue; text-align:center;">سایت آموزشی فری لرن</p> <p style="color:blue; text-align:center;">سایت آموزشی فری لرن</p> <p style="color:blue; text-align:center;">سایت آموزشی فری لرن</p> <p style="color:blue; text-align:center;">سایت آموزشی فری لرن</p> </body> |
خب اینجوری اصلا خوب و بهینه نیست، چون اولا حجم صفحه مون الکی میره بالا و دوما شاید من فردا بخوام رنگ آبی رو قرمز کنم ، خب باید بیام و دونه به دونه دوباره ویرایش کنم. ( قشنگ کمر شکنه )
پس اینجاست که کلاس به درد ما میخوره، یعنی خیلی راحت کافیه یه کلاس درست کنیم و بعدش داخلش بگیم رنگ متن آبی باشه و بعدش اون کلاس رو داخل تگ ها قرار بدیم.
اینجوری اگه فردا روزی خواستیم رنگ رو عوض کنیم دیگه خیلی راحت فقط از داخل کلاس اینکارو انجام میدیم و در سپس نتیجه بروی تمامی تگ ها اعمال میشه.
همون مثال بالا، فقط اینبار با کلاس : ( اینجوری هم کدمون تمیزتر و بهینه تره و هم اگه فردا روزی خواستیم تغییر بدیم برای خودمون راحتتره )
|
1 2 3 4 5 6 7 8 |
<body> <p class="My-Class">سایت آموزشی فری لرن</p> <p class="My-Class">سایت آموزشی فری لرن</p> <p class="My-Class">سایت آموزشی فری لرن</p> <p class="My-Class">سایت آموزشی فری لرن</p> </body> |
Free-Learn
مثال از صفت class در HTML
در ادامه میتوانید یک مثال از این صفت را مشاهده نمایید.
مثال شماره ۱ : مشخص کردن ۱ عدد کلاس برای تگ P
|
1 2 3 4 5 |
<body> <p class="mybg">سایت آموزشی فری لرن</p> </body> |
مثال شماره ۲ : مشخص کردن چندین کلاس بصورت همزمان برای چندین تگ
|
1 2 3 4 5 6 |
<body> <h2 class="mybg mycolor mycenter">سایت آموزشی فری لرن</h2> <p class="mybg mycolor mycenter">سایت آموزشی فری لرن</p> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از صفت class در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | ۱۲ |
Free-Learn
روش استفاده
روش استفاده از این صفت در عناصر HTML بصورت زیر می باشد.
|
1 |
<element class="Class_Name"> |
Free-Learn
جدول مقادیر صفت class
در جدول زیر میتوانید مقادیر را که میتوان در این صفت استفاده کرد را مشاهده نمایید.
| مقدار | توضیح | ||
| Class_Name | * برای تعریف یک یا چند کلاس برای یک عنصر * برای تعریف بیش از یک کلاس باید بین نام کلاس ها یک فاصله قرار دهید. مثال :
|
Free-Learn
نکات و توضیحات
- در HTML5 صفت
classرا میتوان با تمامی عناصر معتبر بکار گرفت. - در HTML 4.01 صفت
classرا نمیتوان با عناصر <base>, <head>, <html>, <meta>, <param> <script>, <style>, <title> بکار گرفت. - نام یک کلاس باید با حروف الفبای انگلیسی کوچک و یا بزرگ شروع شود
- در تعریف نام یک کلاس میشه از حروف کوچک و بزرگ انگلیسی و همچنین از اعداد و یا علامت های – و _ استفاده کرد.
- نام کلاس نباید با عدد شروع شود. مثله ( ۴test )
- از کلاس ها در زبان جاوااسکریپت هم میشه استفاده کرد ولی خب بیشترین استفاده از کلاس ها در زبان CSS می باشد.
