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.

h1 {
  text-decoration-line: overline;
}

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

h3 {
  text-decoration-line: underline;
}

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

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"

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

Matn dekoratsiyasining stilini o'zgartirish

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

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

Matn dekoratsiyasining qalinligini belgilash

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

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

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)

h1 {
  text-decoration: underline;
}

h2 {
  text-decoration: underline red;
}

h3 {
  text-decoration: underline red double;
}

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

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:

a {
  text-decoration: none;
}

CSSning barcha text-decoration xususiyatlari

PreviousMatn joylashuviNextText transform

Last updated