CSSطراحی سایتگوناگون

۲-selector ها در CSS

گزینشگرها یا(selector)ها در CSS

 

در CSS برای دسترسی به عناصر HTML و  تنظیم یک Style روی آن، سه راه وجود دارد:

  1. از طریق ID عنصر HTML
  2. از طریق Class عنصر HTML
  3. از طریق نام تگ HTML

 


 

۱-style از طریق ID عنصر

 

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

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

 

در مثال زیر استایل تعریف شده بر روی یک عنصر با آی دی “select” اعمال شده است:

 

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

 


 

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

 

در واقع Style تعریف شده را روی یک گروه از عناصر HTML اعمال می کند.

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

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

 

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

 

 


 

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

 

همچنین میتوان با صدا کردن نام تگ برروی آن style مورد نظر را اعمال کرد.

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

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

 

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

 

  • تصویر زیر نمایش نهایی قطعه کد بالا میباشد:

  • توجه: نام کلاس با اعداد، شروع نمی شود! در صورتی که با اعداد شروع شود ممکن است مرورگر آن را پشتیبانی نکند.

 


بخش بعدی

بخش قبلی

به این پست امتیاز دهید.
برچسب ها
مشاهده بیشتر

رضااسدزاده

رضااسدزاده هستم مهندس نرم افزار علاقه مند به فضای وب از تاریخ 12شهریور سال96 سایت تیچ وب رو راه اندازی کردیم با هدف گسترش اطلاعات نرم افزاری و زبان های برنامه نویسی . امیدوارم با حمایت شما دوستان بتونیم به این هدف بزرگ دست پیدا کنیم.

نوشته های مشابه

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

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

بستن