selectorها در CSS

چاپ

گزینشگرها یا Selectorها در CSS

Wiki

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

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

1- اختصاص Style از طریق ID عنصر

Wiki

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

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

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

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

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

مثال (selectorها در CSS)

#para1
{
text-align:center;
color:red;
}
خودتان امتحان کنید »

توجه: نام ID با اعداد، شروع نمی شود! اگر رعایت نشود Mozilla/Firefox کار نخواهد کرد.


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

Wiki

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

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

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

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

مثال (selectorها در CSS)

.center {text-align:center;}
خودتان امتحان کنید »

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

Wiki

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

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

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

مثال (selectorها در CSS)

p.center {text-align:center;}
خودتان امتحان کنید »

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


آموزش تصویری مطلب بالا (فیلم آموزش CSS)

 درس شماره 3 (selectorها در CSS زمان فیلم:  17:32

  خرید و دانلود مستقیم فیلم آموزش CSS - حجم دانلود 1.12 گیگابایت (کلیک کنید +)