CSS Сонгогч

CSS сонгогч нь HTML хуудсан дээрх ямар элементийг онцолж, стилийг нь өөрчлөхийг хайж олоход хэрэглэгдэнэ. Анхан шатанд дараах 5 үндсэн сонгогчийг эзэмших шаардлагатай:

Таг сонгогч (Element): p { color: red; } — хуудас дээрх бүх <p> tag-ийг сонгоно.
ID сонгогч: #header { background: black; } — id="header" аттрибуттай цорын ганц элементийг сонгоно, # тэмдгээр эхэлнэ.
Class сонгогч: .button { color: white; } — class="button" аттрибуттай бүх элементүүдийг сонгоно, . тэмдгээр эхэлнэ.
Бүхнийг сонгогч (Universal): * { margin: 0; } — веб хуудас дээрх бүх HTML элементийг нэгэн зэрэг сонгоно.
Бүлэглэсэн сонгогч (Grouping): h1, h2, p { text-align: center; } — олон элементийг таслалаар тусгаарлан нэг ижил стильтэй болгоно.

Жишээ

<!DOCTYPE html>
<html>
<head>
<style>
p { color: red; }
#header { background: #1d4ed8; color: white; padding: 10px; }
.button { color: darkgreen; font-weight: bold; }
h1, h2 { text-align: center; }
</style>
</head>
<body>
<h1 id="header">ID сонгогчоор загварчлагдсан</h1>
<h2>Бүлэглэсэн сонгогч</h2>
<p>Таг сонгогчоор улаан болсон текст.</p>
<p class="button">Class сонгогчоор ногоон болсон текст.</p>
</body>
</html>

Туршиж үзэх »