Text decoration

Matn dekoratsiyasi

Ushbu bo'limda quyidagi xususiyatlar haqida bilib olasiz:

• text-decoration-line

• text-decoration-color

• text-decoration-style

• text-decoration-thickness

• tex-decoration

Matnga dekoratsiya chizig'ini qo'shish

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

Maslahat: Ushbu xususiyatda bittadan ortiq qiymat ishlata olasiz, masalan, ham underline ham strike-throughni bir vaqtda bitta element uchun qo'llashingiz mumkin.

CSS

h1 {
  text-decoration-line: overline;
}

h2 {
  text-decoration-line: line-through;
}

h3 {
  text-decoration-line: underline;
}

p {
  text-decoration-line: overline underline;
}

W3Schools online HTML editor

Note: underline dekoratsiyasidan foydalanish har doim ham tavsiya qilinmaydi, sababi uni foydalanuvchilar link deb o'ylashligi mumkin.

Matn dekoratsiyasiga rang berish

text-decoration-color xususiyati matn dekoratsiyasiga rang berish uchun ishlatiladmessage = "hello world"

Ruby

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;
}

W3Schools online HTML editor

Matn dekoratsiyasining stilini o'zgartirish

text-decoration-style xususiyati matn dekoratsiyasining stilini o'zgartirish uchun ishlatiladi

CSS

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;
}

W3Schools online HTML editor

Matn dekoratsiyasining qalinligini belgilash

text-decoration-thickness orqali dekoratsiyaning qalinligini o'zgartira olasiz.

CSS

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;
}

W3Schools online HTML editor

text-decoration qisqartmasi

text-decoration qisqartmasi quyidagilarni bir qatorda yozish imkonini beradi:

• text-decoration-line (majburiy)

• text-decoration-color (ixtiyoriy)

• text-decoration-style (ixtiyoriy)

• text-decoration-thickness (ixtiyoriy)

CSS

h1 {
  text-decoration: underline;
}

h2 {
  text-decoration: underline red;
}

h3 {
  text-decoration: underline red double;
}

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

W3Schools online HTML editor

Kichik maslahat

HTML-dagi barcha liklarning tagiga standart tarzda pastki chiziqchizilgan bo'lsadi. Ba'zan havolalar tagiga chizilmagan holatda yaratilganligini ko'rasiz. text-decoration: none; havolalardan pastki chiziqni olib tashlash uchun ishlatiladi, masalan:

CSS

a {
  text-decoration: none;
}

W3Schools online HTML editor

CSSning barcha text-decoration xususiyatlari

Xususiyat	Ta'rif
text-decoration	text-decorationning barcha xususiyatlarini bir qatorda yozishga imkon beradi
text-decoration-color	matn dekoratsiyasining rangini belgilaydi
text-decoration-line	Qanday text-decoration ishlatilishi kerakligini belgilaydi (underline, overline, etc.)
text-decoration-style	Text-decoration ni stilini belgilaydi (solid, dotted, etc.)
text-decoration-thickness	Text-decoration ni qalinligini belgilaydi