CSS Border(Chegaralar, hoshiya)

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:

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:

Rangni aniq nomi orqali masalan "red"

Rangning o'ziga hos 16 lik sanoq sistemasi kiritish orqali masalan "#ff0000"

Keyingi usuli RGB orqali masalan "rgb(255,0,0)" 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:

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:

 p {
 border-top-style: dotted;
 border-right-style: solid;
 border-bottom-style: dotted;
 border-left-style: solid;
}

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

Tutorials.uz - telegram kanali O'zbekiston bo'ylab bepul dasturlash darslarini ishlab chiquvchi holis kanal.