CSS Borders (Hoshiyalar)

CSS Borders (Hoshiyalar)


CSS da Hoshiyalar(Border) bilan Ishlash

CSS da hoshiyalarning qiymatlari orqali biz elementlar hoshiyalarining ko'rinishini, qalinligini va rangini o'zgartira olamiz..


Hoshiyalarning Ko'rinishlari

Hoshiyalarning ko'rinishlari orqali biz uning barcha qiymatlari bilan tanishamiz. Ular quyidagilar:

  • dotted - Nuqtalar bilan chegaralangan hoshiyani bildiradi.
  • dashed - Uzlukli chiziq bilan chegaralangan hoshiyani bildiradi.
  • solid - Uzluksiz chiziq bilan chegaralangan hoshiyani bildiradi.
  • double - Qalin chiziq bilan chegaralangan hoshiyani bildiradi.
  • groove - 3D shaklidagi o'yilgan hoshiyani anglatadi. Uning effekti hoshiya rangiga bog'liq.
  • ridge - 3D shaklidagi qirrali hoshiyani anglatadi. Uning effekti hoshiya rangiga bog'liq.
  • inset - 3D shaklidagi ichki hoshiyaga o'yilgan hoshiyani anglatadi. Uning effekti hoshiya rangiga bog'liq.
  • outset - 3D shaklidagi tashqi hoshiyaga bo'rtirilgan hoshiyani anglatadi. Uning effekti hoshiya rangiga bog'liq.
  • none - Hech qanday hoshiya bilan chegaralanmagan hoshiya bildiradi.
  • strong>hidden - Yashiringan hoshiyani anglatadi.
  • mixed - Yuqoridagi istalgan bir nechta hoshiyadan foydalanilgan holda hosil bo'lgan hoshiya.

Namuna:

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Hoshiya qalinligi

Hoshiya qalinligi 4 xil chegara bilan ifodalanadi. Ular px, pt, cm, em orqali kiritiladi yoki bo'lmasa thin, medium va yoki thick orqali ham kiritlishi mumkun.

Namuna:

O'zingni Sinab Ko'r
p.one {
    border-style: solid;
    border-width: 5px;
}
p.two {
    border-style: solid;
    border-width: medium;
}
p.three {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}

Hoshiya rangi

Hoshiya rangi 4 xil usul orqali aniqlanadi:

  1. Rangni aniq nomi orqali masalan "red"
  2. Rangning o'ziga hos 16 lik sanoq sistemasi kiritish orqali masalan "#ff0000"
  3. Keyingi usuli RGB orqali masalan "rgb(255,0,0)"
  4. transparent

Hoshiya rangini 4 ta qiymatlari bor: top border, right border, bottom border va left border. Agar hosa chegarasi aniqlanmagan bo'lsa, u o'ziga meros qilib olgan qiymatni oladi:

Namuna:

O'zingni Sinab Ko'r
p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
}

p.three {
  border-style: solid;
  border-color: red green blue yellow;
}

Har bir tomon uchun alohida hoshiya

Hoshiyang har bir tomoni uchun, turli xil hoshiya tanlashimiz mumkin. Buning uchun uning tomonlarini nomini kiritib kerakli hoshiyani tanlashimiz kerak.

Namuna:

O'zingni Sinab Ko'r
 p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Quyida yana ko'proq misollar bilan tanishamiz.

Agar hoshiya 4 ta qiymati orqali kiritmoqchi bo'lsak:

  • border-style: dotted solid double dashed;
    • top border is dotted
    • right border is solid
    • bottom border is double
    • left border is dashed

Agar hoshiyani 3 ta qiymati orqali kiritmoqchi bo'lsak:

  • border-style: dotted solid double;
    • top border is dotted
    • right and left borders are solid
    • bottom border is double

Agar hoshiyani 2 ta qiymati orqali kiritmoqchi bo'lsak:

  • border-style: dotted solid;
    • top and bottom borders are dotted
    • right and left borders are solid

Agar hoshiyani 1 ta qiymati orqali kiritmoqchi bo'lsak:

  • border-style: dotted;
    • all four borders are dotted

Hoshiyaning "Shortcut" xususiyati

Bu xususiyat hoshiyaning har bir xususiyatlarini bir vaqtda kiritish imkonini beradi. Masalan border-width, border-style, border-color ni bir vaqtda kiritish mumkun:

Namuna:

p {
      border: 5px solid red;
  }

Innovative Lab web sahifasiga xush kelibsiz biz bilan birga IT sohasidagi o'z bilimlaringizni bosqichma-bosqich oshirib boring!


Telegram kanalimizdan kunlik darslarni o'rganing  

TOSHKENT SHAHRIDAGI INHA UNIVERSITETI - 2017