CSS Text Decoration

Matnni Dekoratsiya Qilish

Ushbu bobda quyidagi xususiyatlar haqida o'rganasiz:

text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness
text-decoration

Matnga Dekoratsiya Chizig'ini Qo'shish

text-decoration-line xususiyati matnga dekoratsiya chizig'ini qo'shish uchun ishlatiladi.

Maslahat: Siz bir nechta qiymatlarni birlashtirishingiz mumkin, masalan, overline va underline bir vaqtning o'zida matnning ustida va ostida chiziqlar ko'rsatadi.

Misol

h1 {
  text-decoration-line: overline;
}
 
h2 {
  text-decoration-line: line-through;
}
 
h3 {
  text-decoration-line: underline;
}
 
p {
  text-decoration-line: overline underline;
}

Eslatma: Matnni havola bo'lmagan holatda ostki chiziq bilan bezash tavsiya etilmaydi, chunki bu o'quvchini chalg'itishi mumkin.

Dekoratsiya Chizig'ining Rangini Belgilash

text-decoration-color xususiyati dekoratsiya chizig'ining rangini belgilash uchun ishlatiladi.

Misol

h1 {
  text-decoration-line: overline;
  text-decoration-color: red;
}
 
h2 {
  text-decoration-line: line-through;
  text-decoration-color: blue;
}
 
h3 {
  text-decoration-line: underline;
  text-decoration-color: green;
}
 
p {
  text-decoration-line: overline underline;
  text-decoration-color: purple;
}

Dekoratsiya Chizig'ining Usulini Belgilash

text-decoration-style xususiyati dekoratsiya chizig'ining uslubini belgilaydi.

Misol

h1 {
  text-decoration-line: underline;
  text-decoration-style: solid;
}
 
h2 {
  text-decoration-line: underline;
  text-decoration-style: double;
}
 
h3 {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}
 
p.ex1 {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}
 
p.ex2 {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}
 
p.ex3 {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

Dekoratsiya Chizig'ining Qalinligini Belgilash

text-decoration-thickness xususiyati dekoratsiya chizig'ining qalinligini belgilaydi.

Misol

h1 {
  text-decoration-line: underline;
  text-decoration-thickness: auto;
}
 
h2 {
  text-decoration-line: underline;
  text-decoration-thickness: 5px;
}
 
h3 {
  text-decoration-line: underline;
  text-decoration-thickness: 25%;
}
 
p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: double;
  text-decoration-thickness: 5px;
}

Qisqa Yo'l Xususiyati

text-decoration xususiyati quyidagi xususiyatlarni bitta deklaratsiyada o'rnatish uchun qisqa yo'l hisoblanadi:

text-decoration-line (majburiy)
text-decoration-color (ixtiyoriy)
text-decoration-style (ixtiyoriy)
text-decoration-thickness (ixtiyoriy)

Misol

h1 {
  text-decoration: underline;
}
 
h2 {
  text-decoration: underline red;
}
 
h3 {
  text-decoration: underline red double;
}
 
p {
  text-decoration: underline red double 5px;
}

Kichik Maslahat

HTMLda barcha havolalar standart ravishda ostki chiziq bilan ko'rsatiladi. Ba'zan havolalar ostki chiziqsiz uslublashgan bo'ladi. text-decoration: none; havolalardan ostki chiziqni olib tashlash uchun ishlatiladi:

Misol

a {
  text-decoration: none;
}

Barcha CSS Matn Dekoratsiya Xususiyatlari

Xususiyat	Tavsif
`text-decoration`	Barcha matn dekoratsiya xususiyatlarini bitta deklaratsiyada o'rnatadi
`text-decoration-color`	Matn dekoratsiyasining rangini belgilaydi
`text-decoration-line`	Qanday matn dekoratsiyasi ishlatilishini (ostki chiziq, ustki chiziq, va hokazo) belgilaydi
`text-decoration-style`	Matn dekoratsiyasining uslubini (qattiq, nuqtali, va hokazo) belgilaydi
`text-decoration-thickness`	Matn dekoratsiya chizig'ining qalinligini belgilaydi

Ushbu sahifada