CSS Текст /Text/

Үр дүнг харах

Text Color

color шинж чанарт текстийн өнгийг тодорхойлдог.

<style>
body {
  color: green;
}

h1 {
  color: orange;
}
</style>

Текстийн зэрэгцүүлэлт /Text Alignment/

text-align шинж чанарт текстийг хэвтэй тэнхлэг зэрэгцүүлэх утгыг зааж өгнө.

<style>
h1 {
  text-align: left;
}

h2 {
  text-align: center;
}

h3 {
  text-align: right;
}
</style>

Текстийн чимэглэл /Text Decoration/

text-decoration шинж чанарт текстийн чимэхлүүр утгыг зааж өгнө.

<style>
a {
  text-decoration: none;
}

h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}
</style>

Текст Хувиргалт /Text Transformation/

text-transform шинж чанарт текстийн хувиргах утгыг зааж өгнө.

Текстийн бүх үсгийг том, жижиг эсвэл тухайн элементийн үг бүрийн эхний үсгийг томоор харуулах болно.

<style>
p.uppercase {
  text-transform: uppercase;
}
p.lowercase {
  text-transform: lowercase;
}
p.capitalize {
  text-transform: capitalize;
}
</style>

Текст мөрөнд долгол зай авах /Text Indentation/

text-indent шинж чанарт текстийн мөрөнд догол зай авах утгыг зааж өгнө.

<style>
p {
  text-indent: 50px;
}
</style>

Letter Spacing

letter-spacing шинж чанарт тэмдэгт хоорондын зайг зааж өгнө.

<style>
h1 {
  letter-spacing: 5px;
}

h2 {
  letter-spacing: -5px;
}
</style>

Мөр хоорондын зай /Line Height/

letter-spacing шинж чанарт мөр хоорондын зайг зааж өгнө.

<style>
p.baga {
  line-height: 0.5;
}

p.ikh {
  line-height: 2.2;
}
</style>

Текстийн чиглэл /Text Direction/

direction болон unicode-bidi шинж чанарт текстийн чиглэлийг зааж өгнө.

<style>
p.simple {
  direction: rtl;
  unicode-bidi: bidi-override;
}
</style>

Үг хоорондын зай /Word Spacing/

word-spacing шинж чанарт үг хоорондын зайг зааж өгнө.

<style>
h1 {
  word-spacing: 10px;
}

h2 {
  word-spacing: -10px;
}
</style>

Текстийн сүүдэр /Text Shadow/

text-shadow шинж чанарт текстийн сүүдрийг зааж өгнө.

<style>
h1 {
  text-shadow: 3px 2px blue;
}
</style>

Сэтгэгдэлүүд