تعداد بازدید: 924
یک انتخابگر CSS ، عناصر HTML را که می خواهید سبک دهید انتخاب می کند .
ما می توانیم انتخابگرهای CSS را به پنج دسته تقسیم کنیم:
- ساده ( انتخاب عناصر بر اساس نام یا name ، شناسه یا id ، کلاس یا class )
- ترکیبی ( عناصر را بر اساس رابطه خاصی بین آنها انتخاب می کنید )
- خاص ( عناصر را براساس یک حالت خاص انتخاب کنید )
- عناصر ( انتخاب و سبک بخشی از یک عنصر )
- ویژگی ( عناصر را براساس ویژگی یا مقدار ویژگی انتخاب کنید )
در این مقاله اساسی ترین انتخاب کنندگان CSS را توضیح می دهیم .
انتخابگر عنصر CSS :
انتخابگر عنصر عناصر HTML را بر اساس نام عنصر انتخاب می کند . به مثال زیر توجه کنید :
در اینجا ، همه عناصر <p> در صفحه با یک رنگ متن قرمز تراز وسط قرار می گیرند ،
p {
text-align: center;
color: red;
}
انتخابگر شناسه CSS :
id یا همان شناسه از ویژگی های یک عنصر HTML است و شما میتوانید برای انتخاب یک عنصر خاص از آن استفاده کنید ، شناسه یک عنصر در یک صفحه منحصر به فرد است ، بنابراین از شناسه ( id ) برای انتخاب یک عنصر منحصر به فرد استفاده می شود !
برای انتخاب یک عنصر با شناسه خاص ، یک کاراکتر هش (#) و سپس شناسه عنصر بنویسید.
مثال :
قانون CSS زیر برای عنصر HTML با شناسه para1 اعمال می شود:
#para1 {
text-align: center;
color: red;
}توجه: نام شناسه نمی تواند با شماره شروع شود !
انتخابگر کلاس CSS :
انتخابگر کلاس ، عناصر HTML را با یک ویژگی کلاس خاص انتخاب می کند ، البته همانطور که در آموزش Html آموختید کلاس میتواند برا چند عنصر باشد ولی شما فقط در اینجا یکبار کلاس را صدا می زنید و روی تمام عنصر ها اعمال می شود 😃 .
برای انتخاب عناصر با یک کلاس خاص ، یک کاراکتر ( . ) و به دنبال آن نام کلاس بنویسید .
مثال :
در این مثال تمام عناصر HTML با کلاس center ، قرمز و تراز وسط قرار می گیرند :
#para1 {
text-align: center;
color: red;
}
همچنین می توانید تعیین کنید که فقط عناصر خاص HTML تحت تأثیر یک کلاس قرار گیرند.
مثال دوم :
#para1 {
text-align: center;
color: red;
}عناصر HTML همچنین می توانند به بیش از یک کلاس اشاره داشته باشند .
مثال :
در این مثال عنصر <p> دارای دو کلاس large و center است که شما میتوانید به هر دو استایل دهید :
<p class="center large">This paragraph refers to two classes.</p>توجه: نام کلاس نمی تواند با شماره شروع شود !
انتخابگر های همگانی :
انتخابگر همگانی ( * ) همه عناصر 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;
}
| شرح مثال | مثال | انتخابگر |
| انتخاب می کند id="testid" عنصر را با | #testid | #id |
| را انتخاب می کند class="intro" همه عناصر دارای | .intro | .class |
| را انتخاب می کند class="intro" با <p>فقط عناصر | p.intro | element.class |
| همه عناصر را انتخاب می کند | * | * |
| همه عناصر <p> را انتخاب می کند | p | element |
| همه عناصر <div> و همه عناصر <p> را انتخاب می کند | div,p | element,element |
