میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

selectorها در CSS

selector در css به دسترسی به عناصر HTML و  تنظیم یک Style روی آن گفته می شود .

انواع مختلفی از انتخاب گر css وجود دارد که هر یک در واقع نقش استایل دهی خاصی را بر عهده دارد و در کل نحوه عملکرد آن ها در مرتبط کردن عناصر مختلف خلاصه می شود. در این جا به معرفی چند نوع انتخاب گر بسیار مهم می پردازیم که شناخت آن ها برای هر طراحی ضروری است. انواع Css selector ضروری را در ادامه خواهیم شناخت.

 


اختصاص استایل از طریق ID عنصر

در CSS برای عناصر HTML که ID دارند می توان Style تعریف کرد.

در واقع توسط ID یا شناسه، Style تعریف شده را فقط به یک عنصر اختصاص می دهد.

نکته: همانطور که می دانید ID عناصر در یک صفحه HTML، یکتا و Unique هستند، بنابراین Style تعریف شده فقط روی یک عنصر اعمال می شود.

در CSS برای تعریف این نوع Style از کاراکتر “#” و در ادامه ID عنصر استفاده می شود.

در مثال زیر، Style تعریف شده روی عنصری که ID آن “para1” است اعمال می شود:

 

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

توجه: نام ID با اعداد، شروع نمی شود! اگر رعایت نشود استایل دهی اعمال نخواهد شد.

 


اختصاص Style از طریق Class عنصر

این نوع از Css selector یکی از پرکاربرد ترین انتخاب گر ها است. برای اعمال این انتخاب گر از یک نقطه قبل از کاراکتر مورد نظر خود استفاده می کنیم. مانند انتخاب گر های ID این کاراکتر ها هم توسط توسعه دهنده مشخص می شوند. Class Selector همه عناصری که کاراکتر بعد از نقطه مشابهی دارند را با یکدیگر منطبق می کند و به همه آن ها استایل تعیین شده را اعمال می کند.

نکته: در یک فرم HTML برای چندین عنصر می توان، یک کلاس در نظر گرفت (“Class=”ClassName)، بنابراین استایل تعریف شده روی تمام عناصر ذکر شده، اعمال خواهد شد.

در CSS برای تعریف این نوع Style از علامت “.” “نقطه” و در ادامه نام Class عنصر استفاده می شود.

در مثال زیر Style تعریف شده روی تمام عناصر HTMLی که کلاس آنها “center” است اعمال خواهد شد:

 

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

 


اختصاص Style از طریق نام تگ

این نوع از Css selector  که به آن Type Selector هم گفته می شود، دو یا سه عنصر هم نام در صفحه را به یکدیگر مرتبط می کند. بنابر این برای مثال یک انتخاب گر از نوع <p> تمام عناصر هم نام را با یکدیگر مطابقت می دهد و همه آن ها یک استایل را خواهند داشت. به مثال زیر توجه کنید:

 

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

در اینجا ، همه عناصر <p> صفحه با رنگ متن قرمز و چینش وسط قرار می گیرند:

 


اختصاص Style از طریق نام تگ و کلاس

شما می توانید همچنین مشخص کنید که یک تگ مشخص در صفحه HTML از یک Style پیروی کند.

در CSS برای تعریف این نوع Style به هیچ علامت خاصی نیاز نیست  و فقط باید نام تگ ذکر شود.

در مثال زیر Style تعریف شده روی تمام تگهای “p” که کلاس آنها “center” است، اعمال خواهد شد:

 

p.center {
    text-align:center;
}

توجه: نام کلاس با اعداد، شروع نمی شود! در صورتی که با اعداد شروع شود فقط IE  آن را پشتیبانی خواهد کرد.

 

توجه: برای هر عنصر می توان چندین کلاس تعریف کرد و محدودیتی در تعریف کلاس برای هز عنصر ندارد  . برای تعریف چندین کلاس برای هر تگ کافی است نام کلاس را نوشته سپس فاصله دهی سپس نام کلاس دوم را بنویسید مانند زیر

 

<p class="name1 name2">مدرسه کدنویسی</p>

 


Universal Selector

این نوع از Css selector ها برای انتخاب همه عناصر موجود در یک صفحه به کار می روند. هر صفحه html توسط محتوایی که با تگ ها ساخته شده، ایجاد می شود. هر مجموعه از تگ ها یک عنصر را در صفحه نشان می دهد. به مثال زیر توجه کنید تا با نحوه کار Universal Selector آشنا شوید:

 

* {
color: green;
font-size: 20px;
line-height: 25px;
}

در اینجا این انتخاب گر که به شکل * نشان داده می شود، سه خط کد داخل کروشه که رنگ، قلم و ارتفاع خط را نشان می دهد را به تمام عناصر صفحه html اعمال می کند. نحوه استفاده از این انتخاب گر برای ترکیب های دیگر هم به همین سادگی است.

 


 

امیدواریم آموزشselectorها در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
cssselectorها در CSSw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfانتخاب گرانتخابگر cssانتخابگر کلاس در cssانواع selector ها در cssدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسفارسی w3schoolsکتاب آموزش css فارسی
ارسال دیدگاه

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

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟