گروه مقاله : CSS
تاريخ انتشار : 1394/01/31 - 12:05
كد :205
Selector های CSS به شما این اجازه را می دهند که عناصر HTML را دست کاری کنید.
Selector های CSS به شما این اجازه را می دهند که عناصر HTML را دست کاری کنید.آنها برای پیدا کردن (یا انتخاب) عناصر HTML بر اساس id , class و ... مورد استفاده قرار می گیرند.
عناصر Selector :
عناصر Selector بر اساس نام آن برای استایل دادن انتخاب می شوند، بطور مثال شما می توانید به تمام تگ های p موجود در صفحه استایل یکسان بدهید .
مثال:
P{color: green;}
ویا با استفاده از id , class این کار را فقط برای یک یا چند تگp موجود در صفحه انجام دهید.
id selector :
در واقع با استفاده از id شما می توانید به یک عنصر از HTML مقادیر خاصی را نسبت دهید. برای تعریف id کافیست یک نام مناسب برای id مورد نظر انتخاب کنید وقبل از نام id از علامت # استفاده نمایید.
مثال:
#title{color: red;}
توجه!
1- شما میتوانید از یک id در تمام صفحات وب استفاده کنید اما در هر صفحه از وب مجاز هستید تنها یک بار از یک id استفاده کنید . در واقع id به صورت یکتا (unique) استفاده می گردد.
2- نام id نباید با عدد شروع شود.
Class selector :
Class نیز همانند id می باشد با این تفاوت که محدودیت های id را ندارد ، بدین معنی که از کلاس می توان یک یا چند بار در هر صفحه استفاده نمود . در واقع برای دادن استایل مشابه به بیش از یک عنصر در داخل یک صفحه وب می توان از class استفاده نمود .
برای ایجاد class باید ابتدا یک نام مناسب برای آن انتخاب کنید و تنها کافیست قبل از نام class از نقطه (.) استفاده کنید .
مثال:
.text{text-align: right;}
توجه :
نام classنیز همانند id نباید با عدد شروع شود.
نکته :
گاهی اوقات شما احتیاج دارید که برخی از عناصر را به صورت کلی استایل دهی نمایید. مثلا می خواهید تمام تگ های p موجود در صفحه وب ، با فونت سایز 12px و راست چین باشند، برای این منظور نیازی نیست از id و یا class استفاده نمایید و میتوانید به صورت کلی تگ ها را استایل دهی نمایید .
مثال:
P{
font-size: 12px;
text-align: right;
}
با این کار تمام تگ های p موجود در صفحه فونت سایزشان 12px و راست چین خواهند شد.
نکته : اگر بخواهید یک یا چند تا از تگ ها استایل دیگری بگیرند میتوانید به تگ هایی که قرار است استایل متفاوتی داشته باشند بر حسب نیاز id و یا class بدهید.
نکته : اگر چندیدن تگ داخل سایت شما با استایلی یکسان وجود داشته باشند ، شما می توانید آن ها را به صورت خلاصه استایل دهی نمایید . به مثال زیر توجه کنید:
h1, h4, p {
color: green;
text-align: left;
}
در این مثال تمام تگ های h1 ,h4 ,p سبز رنگ و چپ چین خواهند شد.