برنامه نویسیمقالات

Selector ها در css

آموزش سی اس اس

Selector ها در css

Selector ها در css

Selector به شما این اجازه رو می دهد که عناصر html دستکاری و انتخاب کنید.
Selector ها برای پیدا کردن و انتخاب کردن عناصر html بر اساس Id و کلاس ها ، نوع ها ، خصوصایت و مقادیر خصوصیت ها و … استفاده می شوند.


Selector عنصر:
Selector عنصر ، عناصر را بر مبنای نام ها انخاب می کند.
به عنوان مثال شما می توانید همه ی عناصر تگ <p> انتخاب و اعمال مختلفی رو بروی این تگ اعمال کنید از جمله متن ها راست چین شوند، تغییر رنگ متن و …
مثال :

p {
text-align: center;
color: red;
}

id Selector :
id Selector از خصوصیت id یک تگ html برای یافتن عنصر مشخص استفاده می کند.
id باید در یک صفحه منحصر به فرد باشد. بنابراین شما زمانی از id Selector استفاده می کنید که بخواهید یک عنصر یکتا را پیدا کنید.
برای یافتن یک id یکتا و منحصر به فرد ، کاراکتر هش # را مینویسید و به دنبال آن نام id عنصر را وارد می کنید.
استایل زیر به یک عنصر html با آی دی para1 اعمال خواهد شد.

#para1 {
text-align: center;
color: red;
}

نام id با عدد شروع نمی شود

class Selector :
class selector T ،عناصر ها رو با یک کلاس معین پیدا می کند.
class selector از خصوصایت کلاس html بهره می برد.
برای یافتن عناصر با یک کلاس مشخص از کارکتر دات یا نقطه و به دنبال آن نام کلاس را می نویسیم.
در مثال زیر همه عناصر html با کلاس Center ، وسط چین خواهند شد.

.center {
text-align: center;
color: red;
}

در ضمن شما می توانید ، کلاس یک عنصر html را برگزینید و تغییرات را بر آن اعمال کنید.
در مثلا زیر همه عناصر p با کلاس center وسط چین خواهند شد.

p.center {
text-align:center;
color:red;
}

نام class با عدد شروع نمی شود.

گروه بندی Selector ها :
در این استایل همه عناصر دارای یک سبک یکسان می باشند.

h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}

p {
text-align: center;
color: red;
}

برای به حداقل رساندن کد بالا ، شما می توانید selector ها رو گروه بندی کنید.
برای این کار هر selector را با یک کاما از هم جدا می کنید.
مثال زیر کدهای مذکور را به صورت گروه بندی شده نمایش می دهد:

h1, h2, p {
text-align: center;
color: red;
}

تمامی مطالب توسط تیم سافت ساز ترجمه و جمع آوری می شود . منبع سافت ساز

امتیاز به این مطلب :

امتیاز

جمع امتیازات

لطفا به این مطلب امتیاز دهید

User Rating: 2.05 ( 1 votes)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا