View Categories

06 HTML Загварууд – CSS

4 min read

CSS гэдэг нь Cascading Style Sheets (Давхарласан Загварын Хуудас) гэсэн үгийн товчлол юм.

CSS нь маш их ажлыг хэмнэдэг. Энэ нь олон веб хуудасны зохиомжийг нэгэн зэрэг хянах боломжтой.

CSS = Загвар болон Өнгө

CSS гэж юу вэ? #

Cascading Style Sheets (CSS) нь веб хуудасны зохиомж (layout)-ийг форматлахад ашиглагддаг.

CSS-ийн тусламжтайгаар та өнгө, фонт, текстийн хэмжээ, элементүүд хоорондын зай, элементүүдийг хэрхэн байрлуулах, ямар дэвсгэр зураг эсвэл дэвсгэр өнгө ашиглах, өөр өөр төхөөрөмж болон дэлгэцийн хэмжээнээс хамаарч хэрхэн харагдах зэргийг болон бусад олон зүйлийг хянах боломжтой!

Зөвлөмж: Cascading буюу давхарлах гэдэг үг нь эцэг (parent) элементэд хэрэглэсэн загвар нь тухайн эцэг доторх бүх хүү (children) элементүүдэд мөн үйлчилнэ гэсэн утгатай. Тиймээс, хэрэв та body хэсгийн текстийн өнгийг “цэнхэр” гэж тохируулбал body доторх бүх гарчиг, догол мөр болон бусад текст элементүүд мөн ижил өнгөтэй болно (хэрэв та өөрөөр зааж өгөөгүй бол)!

CSS ашиглах #

CSS-ийг HTML баримт бичигт 3 аргаар нэмж болно:

  • Inline (Мөр доторх) – HTML элемент дотор style атрибутыг ашиглан
  • Internal (Дотоод) – <head> хэсэгт <style> элементийг ашиглан
  • External (Гадны) – Гадны CSS файл руу холбохын тулд <link> элементийг ашиглан

CSS нэмэх хамгийн түгээмэл арга бол загваруудыг гадны CSS файлд хадгалах явдал юм. Гэсэн хэдий ч, энэ хичээлээр бид inline болон internal загваруудыг ашиглах болно. Учир нь энэ нь үзүүлэхэд хялбар бөгөөд та өөрөө туршиж үзэхэд хялбар байх болно.

Inline CSS #

Inline CSS нь нэг HTML элементэд өвөрмөц загвар хэрэглэхэд ашиглагддаг.

Inline CSS нь HTML элементийн style атрибутыг ашигладаг.

Дараах жишээнд <h1> элементийн текстийн өнгийг цэнхэр, <p> элементийн текстийн өнгийг улаан болгож тохируулсан байна:

Жишээ

HTML

<h1 style="color:blue;">Цэнхэр гарчиг</h1>

<p style="color:red;">Улаан догол мөр.</p>

Internal CSS #

Internal CSS нь нэг HTML хуудсанд зориулсан загварыг тодорхойлоход ашиглагддаг.

Internal CSS-ийг HTML хуудасны <head> хэсэгт, <style> элемент дотор тодорхойлдог.

Дараах жишээнд БҮХ <h1> элементийн (тухайн хуудас дээрх) текстийн өнгийг цэнхэр, БҮХ <p> элементийн текстийн өнгийг улаан болгож тохируулсан байна. Түүнчлэн, хуудас нь “powderblue” (бүдэг цэнхэр) дэвсгэр өнгөтэй харагдах болно:

Жишээ

HTML

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>Энэ бол гарчиг</h1>
<p>Энэ бол догол мөр.</p>

</body>
</html>

External CSS #

Гадны загварын хуудсыг (external style sheet) олон HTML хуудасны загварыг тодорхойлоход ашигладаг.

Гадны загварын хуудсыг ашиглахын тулд HTML хуудас бүрийн <head> хэсэгт түүний холбоосыг нэмнэ:

Жишээ

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Энэ бол гарчиг</h1>
<p>Энэ бол догол мөр.</p>

</body>
</html>

Гадны загварын хуудсыг дурын текст засварлагч дээр бичиж болно. Файл нь ямар ч HTML код агуулаагүй байх ёстой бөгөөд .css өргөтгөлтэй хадгалагдах ёстой.

“styles.css” файл дараах байдалтай харагдана:

“styles.css”:

CSS

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

Зөвлөмж: Гадны загварын хуудастай бол та ганц файлыг өөрчилснөөр бүхэл бүтэн веб сайтын харагдах байдлыг өөрчлөх боломжтой!

CSS Өнгө, Фонт болон Хэмжээ #

Энд бид түгээмэл хэрэглэгддэг CSS-ийн шинж чанаруудыг харуулах болно. Та эдгээрийн талаар дараа дэлгэрэнгүй сурах болно.

  • CSS color шинж чанар нь ашиглах текстийн өнгийг тодорхойлдог.
  • CSS font-family шинж чанар нь ашиглах фонтыг тодорхойлдог.
  • CSS font-size шинж чанар нь ашиглах текстийн хэмжээг тодорхойлдог.

Жишээ

CSS-ийн color, font-family болон font-size шинж чанаруудын хэрэглээ:

HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>Энэ бол гарчиг</h1>
<p>Энэ бол догол мөр.</p>

</body>
</html>

CSS Хүрээ (Border) #

CSS border шинж чанар нь HTML элементийн эргэн тойронд хүрээ тодорхойлдог.

Зөвлөмж: Та бараг бүх HTML элементэд хүрээ тодорхойлж болно.

Жишээ

CSS border шинж чанарын хэрэглээ:

CSS

p {
  border: 2px solid powderblue;
}

CSS Дотор зай (Padding) #

CSS padding шинж чанар нь текст болон хүрээний хоорондох зайг (padding) тодорхойлдог.

Жишээ

CSS border болон padding шинж чанаруудын хэрэглээ:

CSS

p {
  border: 2px solid powderblue;
  padding: 30px;
}

CSS Гадна зай (Margin) #

CSS margin шинж чанар нь хүрээний гаднах зайг (margin) тодорхойлдог.

Жишээ

CSS border болон margin шинж чанаруудын хэрэглээ:

CSS

p {
  border: 2px solid powderblue;
  margin: 50px;
}

Гадны CSS руу холбох #

Гадны загварын хуудсыг бүрэн URL эсвэл одоогийн веб хуудастай харьцангуй замаар (relative path) зааж өгч болно.

Жишээ

Энэ жишээ нь загварын хуудас руу холбохдоо бүрэн URL ашигласан байна:

HTML

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

Жишээ

Энэ жишээ нь одоогийн веб сайтын html хавтсанд байрлах загварын хуудас руу холбогдоно:

HTML

<link rel="stylesheet" href="/html/styles.css">

Жишээ

Энэ жишээ нь одоогийн хуудастай ижил хавтсанд байрлах загварын хуудас руу холбогдоно:

HTML

<link rel="stylesheet" href="styles.css">

Та файлын замын талаар HTML Файлын Зам бүлгээс дэлгэрэнгүй унших боломжтой.

Бүлгийн Дүгнэлт #

  • Inline загварчлалд HTML style атрибутыг ашиглана
  • Internal CSS-ийг тодорхойлохдоо HTML <style> элементийг ашиглана
  • Гадны CSS файлыг зааж өгөхдөө HTML <link> элементийг ашиглана
  • <style> болон <link> элементүүдийг хадгалахдаа HTML <head> элементийг ашиглана
  • Текстийн өнгөнд CSS color шинж чанарыг ашиглана
  • Текстийн фонтонд CSS font-family шинж чанарыг ашиглана
  • Текстийн хэмжээнд CSS font-size шинж чанарыг ашиглана
  • Хүрээнд CSS border шинж чанарыг ашиглана
  • Хүрээн доторх зайд CSS padding шинж чанарыг ашиглана
  • Хүрээний гаднах зайд CSS margin шинж чанарыг ашиглана

Зөвлөмж: Та манай CSS Хичээл-ээс CSS-ийн талаар илүү ихийг сурах боломжтой.

Дасгал? #

Гадны загварын хуудас руу холбох зөв бичиглэл (syntax) аль нь вэ?

  • <style rel='stylesheet' href='styles.css'>
  • <link rel='stylesheet' href='styles.css'>
  • <a rel='stylesheet' href='styles.css'>

HTML Загварын Шошгууд #

ШошгоТайлбар
<style>HTML баримт бичгийн загварын мэдээллийг тодорхойлно
<link>Баримт бичиг болон гадны нөөц хоорондын холбоосыг тодорхойлно

Боломжит бүх HTML шошгуудын жагсаалтыг манай HTML Шошгын Лавлахаас үзнэ үү.

Updated on December 13, 2025

What are your Feelings

  • Happy
  • Normal
  • Sad

Submit a Comment

Your email address will not be published. Required fields are marked *

Prove your humanity: 6   +   8   =