CSS / Өнгө ба дэвсгэр

Өнгө ба дэвсгэр

CSS-д өнгийг олон янзын форматаар илэрхийлж болно. Зөв форматыг сонгох нь кодын уншигдах байдал болон уян хатан байдалд нөлөөлнө.

Өнгийн форматууд

Named color (нэрт өнгө)

CSS-д 140 гаруй нэрт өнгө байдаг. Хурдан туршихад тохиромжтой ч production кодод ашиглахгүй байх нь дээр.

css
p {
  color: white;
  background-color: black;
}

span {
  color: tomato;
  background-color: royalblue;
}

HEX (#rrggbb)

Хамгийн өргөн хэрэглэгддэг формат. # тэмдгийн дараа улаан, ногоон, цэнхэрийн 16-тын тооллын утга бичнэ.

css
h1 {
  color: #f1f5f9; /* цайвар цагаан */
}

.card {
  background-color: #0f172a; /* харанхуй хөх */
  border: 1px solid #1e293b;
}

Богино хэлбэр: #fff = #ffffff, #a78 = #aa7788.

rgb() ба rgba()

Улаан, ногоон, цэнхэрийг 0–255 тоогоор илэрхийлнэ. rgba() нь 4 дэх утгаар тунгалаг байдал (alpha: 0–1) тохируулна.

css
.text {
  color: rgb(241, 245, 249); /* цагаан */
}

.overlay {
  background-color: rgba(0, 0, 0, 0.6); /* 60% тунгалаг хар */
}

.card-hover {
  background-color: rgba(167, 139, 250, 0.1); /* нил ягаан 10% */
}

hsl() ба hsla()

Өнгийн өнгө (hue 0–360°), ханасан байдал (saturation 0–100%), тод байдал (lightness 0–100%) гурвын утгаар илэрхийлнэ. Өнгийн схем зохиоход маш тохиромжтой.

css
.primary {
  color: hsl(271, 91%, 73%); /* нил ягаан */
}

.primary-dark {
  /* Зөвхөн lightness-ийг өөрчлөхөд хялбар */
  color: hsl(271, 91%, 50%);
}

.glass {
  background-color: hsla(217, 33%, 17%, 0.8); /* тунгалаг */
}

color property

Текстийн өнгийг тохируулна. Хүүхэд элементүүдэд өвлөгддөг (inherited):

css
body {
  color: #94a3b8; /* бүх хуудасны анхдагч текстийн өнгө */
}

h1 {
  color: #f1f5f9; /* override хийх */
}

.accent {
  color: #a78bfa; /* нил ягаан */
}

background-color

Элементийн дэвсгэрийн өнгийг тохируулна:

css
body {
  background-color: #0b1120; /* хуудасны дэвсгэр */
}

.card {
  background-color: #0f172a;
}

.btn {
  background-color: #a78bfa;
  color: #0b1120;
}

.btn:hover {
  background-color: rgba(167, 139, 250, 0.85); /* hover дээр арай тунгалаг */
}

background-image ба gradient

Linear gradient

css
.hero {
  /* дээрээс доош хар → хөх */
  background-image: linear-gradient(to bottom, #0b1120, #1e293b);
}

.btn-gradient {
  /* зүүнээс баруун нил → цэнхэр */
  background-image: linear-gradient(to right, #a78bfa, #60a5fa);
}

.diagonal {
  /* диагональ 135 градус */
  background-image: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

Radial gradient

css
.glow {
  /* голоос гадагш цацрах гэрэл */
  background-image: radial-gradient(
    circle at center,
    rgba(167, 139, 250, 0.15),
    transparent 70%
  );
}

background shorthand

css
.card {
  /* color image repeat position / size */
  background: #0f172a url("/pattern.png") no-repeat center / cover;
}

/* Зөвхөн gradient */
.hero {
  background: linear-gradient(to bottom, #0b1120, #1e293b);
}

opacity property

Бүхэл элементийн тунгалаг байдлыг тохируулна (0 = боргио, 1 = тод):

css
.disabled {
  opacity: 0.4; /* 40% тод */
}

.modal-backdrop {
  opacity: 0.8;
}

rgba() vs opacity ялгаа: rgba() нь зөвхөн дэвсгэрийн өнгөд нөлөөлөх бол opacity нь текст болон хүүхэд элемент бүгдийг хамарна.

Дараагийн хичээлд:

Текст болон фонтыг CSS-ээр удирдах — font-family, font-size, font-weight, line-height болон Google Fonts-ийг хэрхэн холбох талаар практикаар судална.

← Өмнөх хичээлSelector-уудДараах хичээл →Фонт ба текст