CSS сонгогч нь стийл хийхийг хүссэн HTML элемент-үүдээ сонгодог
CSS Selectors CSS Сонгогч #
CSS сонгогч бол стйил хийхийг хүссэн HTML элементүүдийг “хайх”(эсвэл сонгох)-д хэрэглэдэг
Бид CSS сонгогчийг 5 категорид хувааж болно:
- Хялбар сонгогч(элементүүдийг нэр, id, класс-аар үндэслэн сонгох)
- Хосолсон сонгогч(элементүүдийг хоорондоо тусгай харилцаатай байгаагаар үндэслэн сонгох)
- Дуураймал- класс сонгогчид(элементүүдийг тодорхой байр сууриар үндэслэн сонгох)
- Дуураймал- класс сонгогчид(элементийн зарим хэсгийг сонгох эсвэл стийл хийх)
- Атрибут /шинж чанар/ сонгогчид(элементүүдийг атрибут эсвэл атрибутын утгаар үндэслэн сонгох)
Энэ хуудас ихэнх үндсэн CSS сонгогчидыг тайлбарлана
CSS элемент сонгогч #
Элемент сонгогч HTML элементүүд элементийн нэрэн дээр үндэслэн сонгодог.
Энд, бүх
хуудсан дах элементүүд center-aligned, red text color-той хамт байх болно.
p {
text-align: center;
color: red;
} CSS id Сонгогч #
id сонгогч нь HTML элементийн id артибутрын тусгай элементийг сонгохдоо хэрэглэдэг.
Элементийн id нь хуудасны дотор цор ганц тул id сонгогч нь цор ганц элементийг сонгоход ашиглагддаг байсан.
Элементийн id нь хуудасны дотор өвөрмөц тул id selector нь нэг өвөрмөц элементийг сонгоход ашиглагдана!
Тусгай id-тай элементийг сонгохын тулд араас нь дагаж байгаа id элементийн чагт(#) дүрсийг бичнэ.
Доорх CSS дүрмийг id=”para1″ тэмдэг бүхий HTML элементэд ашиглана:
#para1 {
text-align: center;
color: red;
} The CSS class Selector CSS класс Сонгогч #
Класс сонгогч тусгай класс атрибут/шинж чанар/-тай HTML элементүүд сонгодог.
Тусгай класс атрибут/шинж чанар/-тай элементүүдийг сонгохын тулд цэг (.) тэмдэг бичээд араас нь классын нэрийг бичнэ үү.
Энэ жишээнд class=”center”-тэй бүх HTML элементүүд red бас center-aligned болно:
.center {
text-align: center;
color: red;
} Мөн та зөвхөн тодорхой HTML элементүүд нь заавал class-аар нөлөөлөгдсөн байх ёстойг тусгайлан зааж болно.
p.center {
text-align: center;
color: red;
} HTML элементүүд нь нэгээс олон ангиудыг хэлж болно.
Энэ жишээнд
элементийг class = “center” -ийн дагуу, class = “large” -ийн дагуу загварчлах болно.
<p class="center large">This paragraph refers to two classes.</p>
CSS Universal Selector #
The 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;
} All CSS Simple Selectors #
| Сонгогч | Жишээ | Жишээг тайлбарлав |
|---|---|---|
| #id | #firstname | Id = “firstname” элементийг сонгоно |
| .class | .intro | Class = “intro” -тай бүх элементүүдийг сонгоно |
| element.class | p.intro | Class = “intro” -д байрлах зөвхөн <p> элементүүдийг сонгоно |
| * | * | Бүх элементүүдийг сонгоно |
| element | p | Бүх <p> элементүүдийг сонгоно |
| element,element,.. | div, p | Бүх <div> элементүүд болон бүх <p> элементүүдийг сонгоно |
