CSS ها در selector آشنایی با
منظور از selector درواقع همان اجزای html است که قصد داریم با کمک css ظاهری سفارشی برای آنها ایجاد کنیم.
selector معرفی انواع
selectorها انواع مختلفی دارند که در این بخش با آنها آشنا خواهیم شد.
- element selector
در این حالت از نام اجزای html استفاده میکنیم. به عنوان مثال:
p {
text-align: center;
color: red;
}
- id selector
در این حالت نیز بجای نام عنصر از id آن استفاده میکنیم. نکته قابل توجه درمورد id این است که نام idها نباید با اعداد شروع شود. مزیت استفاده از id این است که میتوان یکسری تنظیمات را برای یک id تعریف کرده و درنهایت داخل کدهای html برحسب نیاز آن id را فراخوانی کنیم تا تنظیمات بر روی آن کدها اعمال شود. در مثال زیر نمونه ای از کار با id نشان داده شده است.
همانطور که در مثال نمایش داده شده است یکسری تنظیمات منسوب به myid ایجاد شده است و درنهایت درون کد html یکی از پاراگراف ها با فراخوانی myid تنظیمات ایجاد شده را بر روی پاراگراف مذکور اعمال کرده است. اما دومین پاراگراف myid را فراخوانی نکرده و در نتیجه تنظیمات myid نیز بر روی آن اعمال نشده است.
<html>
<head>
<style>
#myid{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id=”myid”>Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
- class selector
در چنین حالتی میتوانیم مشخصات مدنظرمان را در قالب یک class تعریف کرده و سپس داخل کدهای html با فراخوانی class موردنظر تغییرات دلخواهمان را بر روی اجزای html اعمال کنیم.
با یک مثال بیشتر درمورد این مفهوم صحبت میکنیم، همانطور که در مثال نشان داده شده است یکسری تنظیمات در کلاس myclass منسوب به تگهای مربوط به پاراگراف (p) تعریف شده اند و درنهایت با فراخوانی myclass توسط پاراگراف ها این تنظیمات بر روی همان پاراگراف ها اعمال خواهند شد. البته توجه کنید که اگر myclass توسط هر عنصر دیگری بجز پاراگراف فراخوانی شود تنظیماتش روی آن عنصر تاثیر نخواهد گذاشت. مانند مثال زیر که myclass در ابتدا منسوب به پاراگراف طراحی شده است و زمانی که توسط تیتر (h1) فراخوانی شد هیچ یک از تنظیمات بر روی آن اعمال نشد.
<html> <head> <style> p.myclass { text-align: center; color: red; } </style> </head>
<body>
<h1 class=“myclass”>This heading will not be affected</h1> <p class=“myclass”>This paragraph will be red and center-aligned.</p>
</body> </html>
- universal selector
برای اعمال یکسری تنظیمات سفارشی بر روی تمامی عناصر html از این مورد استفاده میکنیم. با توجه به مثال زیر تنظیمات عمومی در قالب * تعیین میشوند و درنهایت هر عنصری که در html استفاده شود به صورت خودکار از این تنظیمات پیروی میکند.
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
</body>
</html>
- grouping selector
ممکن است حالتی پیش بیاید که چندین عنصر تنظیمات مشابهی داشته باشند، به عنوان مثال تیتر اول (h1)، تیتر دوم (h2) و پاراگراف (p) همگی قرمز رنگ و وسط چین تعریف شوند.
h1 { text-align: center; color: red; }
h2 { text-align: center; color: red; }
p { text-align: center; color: red; }
در این حالت به منظور بهینه سازی میتوان تنظیمات گروهی برای هر سه مورد h1, h2, p در نظر گرفت برای این کار مانند مثال عمل میکنیم.
h1, h2, p { text-align: center; color: red; }