این آموزش در تاریخ ۱۴۰۲/۰۶/۱۹ آپدیت شده است.
آموزش نحوه ایجاد کلاس یا Class در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه ایجاد کلاس یا Class در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
نحوه ایجاد کلاس یا Class در HTML
دوستان محترم و عزیز سایت آموزشی فری لرن در این بخش میخواهیم با نحوه ایجاد کلاس در تگ های HTML آشنا شویم ، لطفا در ادامه و تا پایان این بخش با من همراه باشید.
فرض میکنیم ما چندین تگ داریم که میخواهیم همه ی این تگ ها رنگ متنشون آبی و وسط صفحه قرار بگیرند، خب یه روش اینه که از صفت 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> |
ولی خب این روش اصلا روش بهینه ای نیست، شما فکرشو کن ۲۰۰تا تگ داری و بخوای این ۲۰۰تارو رنگ متنشون رو آبی کنی، یعنی عملا باید ۲۰۰ بار از صفت Style استفاده کنیم.
حال فرض کنید فردا روزی میخواستید اون رنگ آبی رو قرمز کنید، یعنی عملا باید دوباره بصورت دستی داخل اون ۲۰۰ تگ رنگ رو به قرمز تغییر بدید.
خب دیگه کلاس برای همین درست شده، دیگه نیاز نیست من بیام مثلا ۲۰۰بار از صفت Style استفاده کنم که بعدا تغییرات داخلش بشه کمرشکن، خیلی راحت از یه دونه کلاس در ده ها و صدها و میلیون ها تگ استفاده میکنم.
Free-Learn
نحوه تعریف کلاس در تگ های HTML
فرقی نمیکنه چه تگی، کلا در هرتگی که بخواید میتونید به راحتی براش کلاس تعریف کنید، خیلی راحت فقط کافیه از صفت Class درون اون تگ استفاده کنید.
- تعریف کلاس با نام دلخواه درون تگ مورد نظرمون
|
1 |
<Element class="Class_Name"> |
که Element میشه همون تگی که قرار براش کلاس تعریف کنیم، و بجای ( Class_Name ) نیز باید نام کلاس مون رو وارد کنیم. که این نام میتونه یه نام دلخواه باشه.
- فراخوانی همون کلاسی که تعریف کردیم در CSS
|
1 2 3 |
.Class_Name{ دستورات سی اس اس در اینجا } |
باید اول یک نقطه گذاشته سپس نام کلاس را مینویسیم و در نهایت دستورات CSS را مینویسیم، به همین سادگی و تموم شد رفت.
Free-Learn
مثال از کلاس ها در HTML
مثال شماره ۱ : تعریف و استفاده از کلاس در تگ های HTML
|
1 2 3 4 5 6 7 8 |
<style> .My-Class{ color:blue; text-align:center; } </style> |
مثال شماره ۲ : استفاده از چندین کلاس بصورت همزمان در چندین تگ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> .mybg{ background-color:#123456; } .mycolor{ color:#fff; } .mycenter{ text-align:center; } </style> |
Free-Learn
نکات و توضیحات
- نام یک کلاس باید با حروف الفبای انگلیسی کوچک و یا بزرگ شروع شود
- نام کلاس به حروف کوچک یا بزرگ انگلیسی حساس می باشد، این یعنی اگه نام کلاستون Test بود باید در CSS هم دقیقا همین Test باشه، یعنی اگه test باشه کار نمیکنه.
- در تعریف نام یک کلاس میشه از حروف کوچک و بزرگ انگلیسی و همچنین از اعداد و یا علامت های – و _ استفاده کرد.
- نام کلاس نباید با عدد شروع شود. مثله ( ۴test )
- از کلاس ها در زبان جاوااسکریپت هم میشه استفاده کرد ولی خب بیشترین استفاده از کلاس ها در زبان CSS می باشد.
