انتخابگرها

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	شیوهٔ نوشتار
۴	انتخابگرها
۵	اضافه‌کردن CSS
۶	نظرات
۷	رنگ‌ها RGB HEX HSL
۸	پس‌زمینه‌ها رنگ پس‌زمینه‌ها تصویر پس‌زمینه تکرار پس‌زمینه پیوست در پس‌زمینه کوته‌شدهٔ پس‌زمینه
۹	کادرها عرض کادر رنگ کادر اطراف کادر کوته‌شدهٔ کادر کادر گرد شده
۱۰	حاشیه‌ها شکسته‌شدن حاشیه
۱۱	Padding
۱۲	ارتفاع/عرض
۱۳	Box Model
۱۴	Outline عرض Outline رنگ Outline کوته‌شدهٔ Outline Outline Offset
۱۵	متن رنگ متن آراستگی متن تبدیل‌کردن متن فاصله‌گذاری متن سایهٔ متن
۱۶	قلم‌ها خانواده قلم استایل قلم اندازهٔ قلم کوته‌شدهٔ قلم
۱۷	آیکن‌ها
۱۸	لینک‌ها
۱۹	لیست‌ها
۲۰	جداول
۲۱	ویژگی Display
۲۲	ویژگی Max-Width
۲۳	ویژگی Position
۲۴	ویژگی Overflow
۲۵	ویژگی Float ویژگی Clear مثال‌های Float
۲۶	مقدار Inline-block
۲۷	ترازکردن
۲۸	ترکیب کننده‌ها
۲۹	شبه کلاس
۳۰	شبه عنصر
۳۱	ویژگی Opacity
۳۲	نوار Navigation ناوبری ناوبری عمودی ناوبری افقی
۳۳	منو آبشاری
۳۴	گالری تصویر
۳۵	Image Sprites
۳۶	انتخاب‌گرهای خاصیت
۳۷	فرم‌ها
۳۸	شمارنده‌ها
۳۹	چیدمان وب‌سایت
۴۰	واحدها
۴۱	اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

انتخابگر (به انگلیسی: selector)های CSS برای یافتن (یا انتخاب) عناصر HTML مورد نظر برای طراحی استفاده می‌شود.

می‌توانیم انتخاب گرها را در CSS را به پنج دسته تقسیم کنیم:

• انتخابگرهای ساده (عناصر را بر اساس نام، شناسه، کلاس انتخاب می‌کنند)

• انتخابگرهای ترکیبی (عناصر را بر اساس یک رابطه خاص بین آنها انتخاب می‌کند)

• انتخابگرهای شبه کلاس (به انگلیسی: pseudo-class) (عناصر را بر اساس یک وضعیت خاص انتخاب می‌کند)

• انتخابگرهای شبه عناصر (بخشی از یک عنصر را انتخاب و استایل‌دهی می‌کند)

• انتخابگرهای خاصیت (عناصر را بر اساس یک خاصیت یا مقدار خاصیت انتخاب می‌کند)

در این صفحه اکثر انتخابگرهای مهم و اصلی CSS توضیح داده خواهد شد.

انتخابگر عنصر (به انگلیسی: element) در CSS

انتخابگر عنصر، عناصر HTML ای را بر اساس نام عنصر انتخاب می‌کند.

مثال

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

1 p {
2   text-align: center;
3   color: red;
4 }

مشاهدهٔ نتیجه

انتخابگر شناسه (به انگلیسی: id) در CSS

انتخابگر شناسه از ویژگی شناسه عنصر HTML، برای انتخاب آن عنصر استفاده می‌کند.

شناسه یک عنصر در صفحه منحصر به فرد است، بنابراین انتخابگر شناسه، برای انتخاب یک عنصر منحصر به فرد استفاده می‌شود!

برای انتخاب عنصری به وسیله یک شناسه خاص، کاراکتر # را به همراه شناسه آن عنصر بنویسید.

مثال

دستور CSS زیر بر عنصر HTML ای با شناسه برابر با id="para1" اعمال خواهد شد:

1 #para1 {
2   text-align: center;
3   color: red;
4 }

مشاهدهٔ نتیجه

نکته: شناسه یک عنصر نمی‌تواند با عدد شروع شود!

انتخابگر کلاس (به انگلیسی: class) در CSS

انتخابگر کلاس، عناصر HTML دارای کلاس خاصی را انتخاب می کند.

برای انتخاب عناصری باکلاس خاص، یک کاراکتر . به همراه نام کلاس بنویسید.

مثال

در این مثال تمامی عناصر HTML با class="center" قرمز رنگ و وسط‌چین خواهند شد:

1 .center {
2   text-align: center;
3   color: red;
4 }

مشاهدهٔ نتیجه

همچنین می‌توانید مشخص کنید که فقط عناصر HTML خاصی تحت تأثیر یک کلاس قرار بگیرند.

مثال

در این مثال تنها عناصر <p> با class="center" وسط چین خواهند شد:

1 p.center {
2   text-align: center;
3   color: red;
4 }

مشاهدهٔ نتیجه

همچنین عناصر HTML می‌توانند با بیش از یک کلاس مرتبط باشند.

مثال

در این مثال عنصر <p> با توجه به class="center" و class="large" استایل‌دهی خواهد شد:

<p class="center large">This paragraph refers to two classes.</p>

مشاهدهٔ نتیجه

نکته: نام کلاس نمی‌تواند با عدد شروع شود!

انتخابگر کلی در CSS

انتخابگر کلی (به انگلیسی: Universal) * تمامی عناصر موجود در صفحه را انتخاب می‌کند:

مثال

دستور CSS زیر بر روی تمامی عناصر HTML موجود در صفحه تأثیر می‌گذارد:

1 * {
2   text-align: center;
3   color: blue;
4 }

مشاهدهٔ نتیجه

انتخابگر گروهی در CSS

انتخابگر گروهی تمامی عناصر HTML با تعریف استایل یکسان را انتخاب می‌کند.

به کد CSS زیر توجه کنید (عناصر h2 ،h1 و p تعریف استایل یکسانی دارند):

 1 h1 {
 2   text-align: center;
 3   color: red;
 4 }
 5 
 6 h2 {
 7   text-align: center;
 8   color: red;
 9 }
10 
11 p {
12   text-align: center;
13   color: red;
14 }

بهتر است برای کوتاه‌تر شدن کد، انتخابگرها را گروه‌بندی کرد.

برای گروه‌بندی انتخابگرها، هر انتخابگر را به وسیله یک , از یک‌دیگر جدا کنید.

مثال

در این مثال ما انتخابگرهای کد بالا را گروه‌بندی کردیم :

1 h1, h2, p {
2   text-align: center;
3   color: red;
4 }

مشاهدهٔ نتیجه

تمامی انتخابگرهای ساده CSS

انتخابگر	مثال	توضیح مثال
.class	.intro	همه عناصر HTML ای که کلاس آنها برابر با class="intro" است را انتخاب می‌کند
#id	#firstname	همه عناصر HTML ای که شناسه (id) آنها برابر با id="firstname" است را انتخاب می‌کند
*	*	همه عناصر را انتخاب می‌کند
انتخابگر عنصر (element)	div, p	تمامی عناصر div و عناصر p را انتخاب می‌کند

صفحهٔ بعد»

«صفحهٔ قبل