---
title: HTML class шинж чанар
description: "> HTML бүлэг шинж чанар нь HTML элементийг ангилхад хэрэглэнэ > > > > Олон тооны HTML элементүүд нэг анги хуваалцах боломжтой. ## Бүлэг(Class) шинж чанарыг ашиглах The `class` attribute is often used to point to a class name in a…"
url: "https://apprentice.mn/docs/html-class-attribute/"
updated: "2021-07-07"
category: HTML
---

# HTML class шинж чанар

> HTML бүлэг шинж чанар нь HTML элементийг ангилхад хэрэглэнэ
>
>
>
> Олон тооны HTML элементүүд нэг анги хуваалцах боломжтой.

## Бүлэг(Class) шинж чанарыг ашиглах

The `class` attribute is often used to point to a class name in a style sheet. 

`class` загварын хуудсан дээр бүлэгийн нэрийг заахад хэрэглэн

In the following example we have three `<div>` elements with a `class` attribute with the value of “city”. All of the three `<div>` elements will be styled equally according to the `.city` style definition in the head section:

Дараах жишээнд бид “city” гэсэн утгатай бүлэг(class) шинж чанар бүхий гурван `<div>` элементтэй байна. Гурван `<div>`элементийг толгой хэсэгт `.city` хэв маягийн тодорхойлолтын дагуу адилхан загварчлах болно.

     `<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>`

Дараах жишээн дээр бид `<span>` элемент `class` attribute with the value of “note”. Both `<span>` elements will be styled equally according to the `.note` style definition in the head section:

Дараах жишээнд бид “тэмдэглэл” -ийн утгатай `class` шинж чанар бүхий хоёр `<span>` элементтэй байна. `<span>` элементүүд хоёулаа толгой хэсгийн `.note`хэв маягийн тодорхойлолтын дагуу адил тэгш загварчилагдах болно:

     `<!DOCTYPE html>
<html>
<head>
<style>
.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html>`

**Зөвлөгөө:** `class`шинж чанар нв HTML-ийн бүх элементүүд дээр ашиглаж болно

**Санамж**: `class` нь заавал жижиг үсгээр бичигдэнэ.

        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-class-attribute%2F&linkname=HTML%20class%20%D1%88%D0%B8%D0%BD%D0%B6%20%D1%87%D0%B0%D0%BD%D0%B0%D1%80](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-class-attribute%2F&linkname=HTML%20class%20%D1%88%D0%B8%D0%BD%D0%B6%20%D1%87%D0%B0%D0%BD%D0%B0%D1%80)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-class-attribute%2F&linkname=HTML%20class%20%D1%88%D0%B8%D0%BD%D0%B6%20%D1%87%D0%B0%D0%BD%D0%B0%D1%80](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-class-attribute%2F&linkname=HTML%20class%20%D1%88%D0%B8%D0%BD%D0%B6%20%D1%87%D0%B0%D0%BD%D0%B0%D1%80)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-class-attribute%2F&linkname=HTML%20class%20%D1%88%D0%B8%D0%BD%D0%B6%20%D1%87%D0%B0%D0%BD%D0%B0%D1%80](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-class-attribute%2F&linkname=HTML%20class%20%D1%88%D0%B8%D0%BD%D0%B6%20%D1%87%D0%B0%D0%BD%D0%B0%D1%80)[https://www.addtoany.com/share](https://www.addtoany.com/share)