این آموزش در تاریخ ۱۴۰۰/۱۰/۱۳ آپدیت شده است.
آموزش انتخابگر تگ در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش انتخابگر تگ در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
انتخابگر تگ در CSS
انتخابگر تگ اسمش روشه دیگه! یعنی انتخاب کردن تگ ها در CSS از طریق اسمشون ( نام تگ ) ، یعنی مثلا من میخوام برای تگ های H2 استایل بنویسم، خب خیلی راحت اسم همین تگ رو مینویسم تموم شد رفت.
انتخابگر تگ دارای حالت های مختلفی می باشد که این حالت ها به شرح زیر می باشد : ( کمی پایین تر حتما مثال هارو مشاهده کنید )
- انتخاب مستقیم تگ
- انتخاب یک کلاس که درون یک یا چندین تگ می باشد
- انتخاب یک ID که درون یک یا چندین تگ می باشد
- انتخاب دسته جمعی تگ ها
- انتخاب یک تگ که درون یک تگ دیگر می باشد
- انتخاب تگ هایی که فقط پدر هستند از درون یک تگ دیگر
- انتخاب یک تگ که بلافاصله بعد از یک تگ دیگه اومده باشه
- انتخاب یک تگ که بعد از یک تگ دیگه اومده باشه ( مهم نیست بلافاصله باشه )
Free-Learn
مثال از انتخابگر تگ در CSS
در ادامه میتوانید مثال های مختلفی از این انتخابگر را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : انتخاب تگ های H2 و P از صفحه
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> h2{ background-color:green; color:#fff; text-align:center; } p{ background-color:orange; color:#fff; text-align:center; } </style> |
مثال شماره ۲ : انتخاب تگ body ( یعنی کل صفحه )
|
1 2 3 4 5 6 7 8 9 |
<style> body{ background-color:#000; 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> |
مثال شماره ۴ : انتخاب یک ID که درون یک یا چندین تگ می باشد
|
1 2 3 4 5 6 7 8 9 |
<style> h2#test{ background-color:blue; color:white; text-align:center; } </style> |
مثال شماره ۵ : انتخاب دسته جمعی تگ ها
|
1 2 3 4 5 6 7 8 9 |
<style> h2,h3,p{ background-color:#4CAF50; color:#fff; text-align:center; } </style> |
مثال شماره ۶ : انتخاب دسته جمعی تگ ها که دارای کلاس و ID خاص می باشند
|
1 2 3 4 5 6 7 8 9 |
<style> h2.test,h3#test,p.test{ background-color:#2196f3; color:#fff; text-align:center; } </style> |
مثال شماره ۷ : انتخاب یک تگ که درون یک تگ دیگر می باشد
|
1 2 3 4 5 6 7 |
<style> div p{ background-color:yellow; } </style> |
مثال شماره ۸ : انتخاب تگ هایی که فقط پدر هستند از درون یک تگ دیگر
|
1 2 3 4 5 6 7 |
<style> div > p{ background-color:yellow; } </style> |
مثال شماره ۹ : انتخاب یک تگ که بلافاصله بعد از یک تگ دیگه اومده باشه
|
1 2 3 4 5 6 7 |
<style> div + p{ background-color:yellow; } </style> |
مثال شماره ۱۰ : انتخاب یک تگ که بعد از یک تگ دیگه اومده باشه ( مهم نیست بلافاصله باشه )
|
1 2 3 4 5 6 7 |
<style> div ~ p{ background-color:yellow; } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این انتخابگر در CSS پشتیبانی میکنند یا خیر.
| نام انتخابگر | Chrome | Firefox | Opera | Safari | Edge |
| تگ | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری انتخابگر تگ در CSS
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این انتخابگر در CSS بصورت زیر می باشد.
|
1 2 3 |
Element_Name { دستورات سی اس اس در اینجا } |
Free-Learn
نکات و توضیحات
- برای انتخاب بیش از یک تگ باید نام تگ هارو با کاما ( , ) از همدیگه جدا کرد.
- برای انتخاب کل صفحه باید تگ body رو انتخاب کنید
- کلا هر تگی که در html وجود داره، کافیه اسمشو بنویسید و براش استایل تعریف کنید ( لیست تمامی تگ های HTML )
