این آموزش در تاریخ ۱۴۰۰/۱۰/۱۳ آپدیت شده است.
آموزش انتخابگر کلاس در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش انتخابگر کلاس در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
انتخابگر کلاس در CSS
با استفاده از این نوع انتخابگر به راحتی میتونیم یک یا چندین کلاس رو از صفحه انتخاب و براشون استایل تعریف کنیم.
اگه آموزش های زبان HTML رو دنبال کرده باشید خب میدونید که با استفاده از صفت Class میتونیم برای تگ ها کلاس تعریف کنیم، بعدش در CSS خیلی راحت اون کلاس رو فراخوانی و براش استایل تعریف میکنیم.
- ایجاد کلاس در یک تگ با استفاده از صفت Class
|
1 |
<h2 class="MyClassName"></h2> |
- فراخوانی کلاس در CSS ( یه نقطه میزاریم بعدش نام کلاس )
|
1 2 3 |
.MyClassName{ دستورات سی اس اس در اینجا } |
Free-Learn
مثال از این انتخابگر
در ادامه میتوانید یک مثال از این انتخابگر را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : انتخاب یک عدد کلاس
|
1 2 3 4 5 6 7 8 9 |
<style> .test{ background-color:#123456; color:#fff; text-align:center; } </style> |
مثال شماره ۲ : انتخاب چندین کلاس بصورت همزمان ( انتخاب گروهی )
|
1 2 3 4 5 6 7 8 9 |
<style> .MyClass1 , .free-learn , .MyClass2 { background-color: orange; color: #fff; text-align: center; } </style> |
مثال شماره ۳ : انتخاب یک کلاس خاص در یک تگ خاص
|
1 2 3 4 5 6 7 8 9 |
<style> h2.test{ background-color:orange; color:white; text-align:center; } </style> |
مثال شماره ۴ : انتخاب یک کلاس که درون یک تگ می باشد ( داره میگه انتخاب کن کلاسی را که در تگ h2 می باشد و خوده تگ h2 باز درون تگ div می باشد )
|
1 2 3 4 5 6 7 8 9 |
<style> div h2.freelearn{ background-color:#e30730; color:#fff; text-align:center; } </style> |
مثال شماره ۵ : انتخاب تودرتو کلاس ها
|
1 2 3 4 5 6 7 8 9 |
<style> div.MyBox div.MySection div.MyTitle h2.freelearn{ background-color:orange; color:#fff; text-align:center; } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این انتخابگر در CSS پشتیبانی میکنند یا خیر.
| نام انتخابگر | Chrome | Firefox | Opera | Safari | Edge |
| کلاس / Class | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری انتخابگر کلاس در CSS
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این انتخابگر در CSS بصورت زیر می باشد.
|
1 2 3 |
.Class_Name { دستورات سی اس اس در اینجا } |
Free-Learn
نکات و توضیحات
- نکته یا توضیح خاصی وجود ندارد.
