CSS Сонгогч /Selector/
Загварыг нь өөрчлөхийг хүсч буй HTML элементүүдийг CSS selelctor нь олж өгдөг.
CSS selector-г таван ангилалд хувааж болно.
- Simple selectors (Үндсэн сонгогч нь id, name, class)-г ашиглан элементийг сонгодог.
- Combinator selectors
- Pseudo-class selectors
- Pseudo-elements selectors
- Attribute selectors
CSS элемент сонгох
HTML элементийн нэрийг үндэслэн элементийг сонгож болно.
Жишээ нь
Хуудасны бүх <h1> элементийг голлууж, дэвсгэр өнгө өгч үзье.
<style>
h1 {
background-color: yellow;
text-align: center;
}
</style>
CSS Id сонгогч /Id Selector/
id selector буюу id сонгогч нь тодорхой элементийг сонгохын тулд HTML-н id атрибутыг ашигладаг.
HTML-н id элемент нь дахин давхардахгүй гэсэн утгатай байдаг тул id selector нь дахин дахардахгүй нэг элементийг сонгоход ашиглагддаг!
Тухайн ID-тай элементийг сонгохын тулд /#/ тэмдэгтийг оруулаад элеметнийн ID-г залгаж оруулна
Тэмдэглэл: ID-н нэр тоогоор эхэлж болохгүйг анхаарна уу!
CSS CSS class сонгогч /Class selector/
Class selector нь HTML классын тодорхой шинж чанартай элементүүдийг сонгодог.
Тодорхой класстай элементийг сонгохын тулд /./ тэмдэгтийг бичиж HTML классын нэрийг оруулна!
Жишээ нь
<style>
.firstClass {
background-color: yellow;
text-align: center;
}
</style>
HTML хуудасны тодорхой элементүүдэд class-г нөлөөлөх ёстой гэж зааж өгч болно.
Жишээ нь
Зөвхөн <p> tag-н дэвсгэр өнгө болон тесктийг голлуулах болно.
<style>
p.firstClass {
background-color: yellow;
text-align: center;
}
</style>
HTML элемент нь олон class-т хамаарч болно.
Тэмдэглэл: Class-н нэр тоогоор эхэлж болохгүйг анхаарна уу!
CSS Нийтээр нь сонгох /Universal Selector/
Universal Selector нь HTML хуудасны бүх элементүүдийг / * / тэмдэгтээр сонгодог.
Жишээ нь
HTML хуудасны бүх элементийн дэвсгэр өнгийг шар болгож текстийг голд байрлуулж үзье.
<style>
* {
background-color: yellow;
text-align: center;
}
</style>
CSS Бүлэглэж сонгох /Grouping Selector/
HTML элементүүдийг ижил загвартай болгох үед бүлэглэж болно.
Доорх CSS кодыг хархад бүгд ижил хэв маягтай харагдаж байна.
Жишээ нь
<style>
h1 {
background-color: yellow;
text-align: center;
color: red;
}
h2 {
background-color: yellow;
text-align: center;
color: red;
}
p {
background-color: yellow;
text-align: center;
color: red;
}
</style>
Дээрх CSS кодыг хархад бүгд ижил хэв маягтай байгаа тул selector бүрийг таслалаар тусгаарлан бүлэглэж кодын бичиглэлийг багасгаж үзье.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<head>
<style>
h1,h2, p {
background-color: yellow;
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="firstClass">H1 элементийг сонгосон болно</h1>
<p class="firstClass">Cайн байна уу!</p>
<p class="firstClass textSize">Cайн байна уу!</p>
</body>
</html>
Сэтгэгдэлүүд
