٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش انتخاب کنندگان CSS

یک انتخابگر CSS عناصر HTML را که می خواهید سبک دهید انتخاب می کند. انتخاب کنندگان CSS انتخابگرهای CSS برای “یافتن” (یا انتخاب) عناصر HTML مورد نظر جهت سبک سازی استفاده می شوند. ما می توانیم انتخابگرهای CSS را به…

محمد یوسفی

6 جولای 2021

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


انتخاب کنندگان CSS

انتخابگرهای CSS برای “یافتن” (یا انتخاب) عناصر HTML مورد نظر جهت سبک سازی استفاده می شوند.

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

  • انتخاب گرهای ساده (انتخاب عناصر بر اساس نام ، شناسه ، کلاس)
  • انتخاب گرهای ترکیبی (عناصر را بر اساس رابطه خاصی بین آنها انتخاب کنید)
  • انتخاب گرهای کلاس شبیه (عناصر را براساس یک حالت خاص انتخاب کنید)
  • انتخاب کنندگان عناصر شبیه (انتخاب و سبک بخشی از یک عنصر)
  • انتخاب گرهای ویژگی (عناصر را براساس ویژگی یا مقدار ویژگی انتخاب کنید)

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


انتخابگر عنصر CSS

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

مثال

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

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

انتخابگر شناسه CSS

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

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

برای انتخاب یک عنصر با شناسه خاص ، یک کاراکتر هش (#) و سپس شناسه عنصر بنویسید.

مثال

قانون CSS زیر برای عنصر HTML با id = “para1” اعمال می شود:

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

توجه: نام شناسه نمی تواند با شماره شروع شود!


انتخابگر کلاس CSS

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

برای انتخاب عناصر با یک کلاس خاص ، یک کاراکتر period (.) و سپس نام کلاس را بنویسید.

مثال

در این مثال ، تمام عناصر HTML با class = “center” قرمز و تراز وسط قرار می گیرند:

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

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

مثال

در این مثال فقط عناصر <p> با کلاس = “center” قرمز و تراز وسط قرار می گیرند:

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

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

مثال

در این مثال عنصر <p> مطابق با class = “center” و به class = “large” مدل خواهد شد:

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

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


CSS Universal Selector

انتخابگر جهانی (*) همه عناصر HTML موجود در صفحه را انتخاب می کند.

مثال

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

* {
  text-align: center;
  color: blue;
}

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

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

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

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

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

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

برای به حداقل رساندن کد ، بهتر است گروهی را انتخاب کنید.

برای گروه بندی انتخابگرها ، هر انتخابگر را با کاما جدا کنید.

مثال

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

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

همه انتخاب کنندگان ساده CSS

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها