CSS / CSS гэж юу вэ?

CSS гэж юу вэ?

CSS бол Cascading Style Sheets гэсэн үгийн товчлол юм. HTML-ийн элементүүдийг хэрхэн харагдуулах — өнгө, хэмжээ, байрлал, фонт — бүгдийг CSS тодорхойлдог.

HTML зөвхөн бүтцийг тодорхойлдог. CSS тэр бүтцийг гоёмсог болгодог. CSS-гүй вэб хуудас цагаан дэвсгэр дээрх хар текст л байна.

CSS яаж ажилладаг вэ?

CSS нь HTML элементийг сонгоод (selector), тэр элементэд шинж чанар (property) оноодог:

css

selector {
  property: value;
  property: value;
}

Жишээ — бүх <h1> гарчгийг цэнхэр болгох:

css

h1 {
  color: blue;
  font-size: 32px;
}

CSS HTML-д холбох гурван арга

1. External stylesheet (зөв арга)

Тусдаа .css файл үүсгэж, HTML <head>-д холбоно:

html

<!-- index.html -->
<head>
  <link rel="stylesheet" href="style.css" />
</head>

css

/* style.css */
h1 {
  color: #a78bfa;
}

Энэ нь хамгийн зөв арга — нэг CSS файлаар олон HTML хуудсыг удирдаж болно.

2. Internal stylesheet

HTML файлын <head> дотор <style> tag ашиглана:

html

<head>
  <style>
    h1 {
      color: #a78bfa;
    }
    p {
      color: #94a3b8;
    }
  </style>
</head>

3. Inline style (зайлсхийх хэрэгтэй)

HTML элементэд шууд style attribute бичнэ:

html

<h1 style="color: #a78bfa; font-size: 32px;">Гарчиг</h1>

Inline style ашиглахад хурдан боловч дахин ашиглах боломжгүй, удирдахад хэцүү тул зайлсхийгтүн.

Анхны CSS бичих

html

<!DOCTYPE html>
<html lang="mn">
  <head>
    <meta charset="UTF-8" />
    <title>CSS жишээ</title>
    <style>
      body {
        background-color: #0b1120;
        color: #f1f5f9;
        font-family: sans-serif;
      }

      h1 {
        color: #a78bfa;
        font-size: 2rem;
      }

      p {
        color: #94a3b8;
        line-height: 1.7;
      }
    </style>
  </head>
  <body>
    <h1>CSS сурч байна!</h1>
    <p>Энэ параграф CSS-ийн тусламжтайгаар маш сайхан харагдаж байна.</p>
  </body>
</html>

CSS тайлбар

CSS-д тайлбар /* */ хаалтаар бичнэ:

css

/* Энэ тайлбар */
h1 {
  color: blue; /* мөрийн эцэст тайлбар */
}

/*
  Олон мөрт тайлбар
  ингэж бичнэ
*/

Property ба value

CSS-д олон зуун property байдаг. Хамгийн байнга хэрэглэгддэг:

css

p {
  color: #f1f5f9;           /* текстийн өнгө */
  background-color: #0f172a; /* дэвсгэрийн өнгө */
  font-size: 16px;           /* фонтын хэмжээ */
  font-weight: bold;         /* зузаан */
  text-align: center;        /* зэрэгцүүлэлт */
  margin: 16px;              /* гадна зай */
  padding: 8px;              /* дотор зай */
  border: 1px solid #1e293b; /* хүрээ */
  border-radius: 8px;        /* булан дугуйлах */
  width: 300px;              /* өргөн */
  height: 200px;             /* өндөр */
}

Cascading гэж юу вэ?

CSS-ийн "Cascading" нь "давхарлах" гэсэн утгатай. Нэг элементэд хэд хэдэн дүрэм хамаарч болох бөгөөд тэдгээрийн аль нь давамгайлах нь тодорхой дүрмээр шийдэгдэнэ.

css

/* Энэ дүрэм эхлээд байгаа */
p {
  color: gray;
}

/* Энэ дүрэм дараа байгаа — давамгайлна */
p {
  color: white;
}

Хожим бичигдсэн дүрэм ихэвчлэн давамгайлдаг. Specificity, inheritance зэрэг нарийн дүрмүүдийг дараагийн хичээлүүдэд үзнэ.

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

CSS selector-уудыг дэлгэрэнгүй үзнэ — element, class, id, pseudo-class зэрэг сонголтыг хэрхэн ашиглах талаар практикаар судална.

Дараах хичээл →Selector-ууд