Bloklar haqida oldingi maqolada gaplashib o‘tdik, endi shu blok xususiyatlarini ko‘rib chiqamiz. Bu maqolamiz blok chegaralariga bag‘ishlanadi, blok bo‘lgandan keyin uning albatta chegarasi ham bo‘lishi kerakku.

Chegaralar blokni boshqa ob’yektlardan ajratib turadi va veb sahifada chiroyli namoyon bo‘lishini ta’minlaydi. Demak, maqolada blok chegaralariga oid quyidagi CSS xususiyatlarini ko‘rib chiqamiz.

border-width;

border-color;

border-style;

border;

outline;

outline-color;

outline-style;

outline-width;

Ko‘rib turganingizdek, unchalik ko‘p emas, keling hammasiga batafsil to‘xtaylik.

Border-width — bu xususiyat ramka(chegara) qalinligini o‘rnatish uchun ishlatiladi. Odatda qiymat pikselda beriladi, undan tashqari kalit so‘zlar orqali ham berish mumkin, thin(2px), medium(4px) yoki thick(6px). Bu o‘lchamlar qanchaligini quyidagi rasmdan ko‘rish mumkin:

10css_1

Border-color — nomida aytib turibdiki, ramkaga rang beradi, rang nomi yoki rangning 16 lik sanoq tizimidagi kodi orqali berish mumkin.

Border-style — bu xususiyat ramka qanday stilda bo‘lishini belgilaydi. Quyida ramka stillarini ko‘rishingiz mumkin.

10css_2

Asosiy ramka turlarini ko‘rib chiqdik, bitta narsa, «Double» stil ramkasi uchun ramka qalinligi minimal 3px bo‘lishi lozim, aks holda kutgan natijangizni ololmasligingiz mumkin.

YUqoridagi 3 ta stil xususiyatiga misol ko‘ramiz.

<html>
 <head>
  <title>Border</title>
  <style>
h1 {
border-width: 5px;
border-style: inset;
border-color: green;
}
h2 {
border-width: 18px;
border-style: double;
border-color: red;
}
p {
border-width: 3px;
border-style: solid;
border-color: blue;
}
  </style>
 </head>
 <body>
<p>Manchester United Football Club</p>
<h1>Manchester United Football Club</h1>
<h2>Manchester United Football Club</h2>
 </body>
 </html>

10css_3

Border — yuqoridagi ramka xususiyatlarini bitta shu kalit so‘z orqali qisqa yozish mumkin. Bu asosan professionallar uchundir, boshlovchilarga har birini alohida yozishni maslahat beraman.

YUqoridagi misolni, bitta «border» orqali yozamiz.

h1 {border: 5px  inset green;
}
h2 {border 18px double red;
}
p {border 3px solid blue;
}

Barcha ramkaga oid xususiyatlarga quyidagi kalit so‘zlarni qo‘shish mumkin:

top — yuqori qism(border-top);

right — o‘ng tomon(border-right);

bottom — quyi qism(border-bottom);

left — chap tomon(border-left).

Bu kalit so‘zlar orqali ramkaning istalgan tomonini o‘zgartirish mumkin, misol ko‘ramiz.

<html>
 <head>
  <title>Border</title>
  <style>
p {
border-top-width: 20px;
border-top-style:solid ;
border-top-color: red;
border-right-width: 10px;
border-right-style:dashed ;
border-right-color: gold;
border-bottom-width: 15px;
border-bottom-style:dashed;
border-bottom-color: green;
border-left-width: 30px;
border-left-style:solid ;
border-left-color: blue;
}
  </style>
 </head>
 <body>
<p>Manchester United Football Club</p>
 </body>
 </html>

10css_4

Qisqartirilgan holda,

p {
border-top: 20px solid red;
border-right: 10px dashed gold;
border-bottom: 15px dashed green;
border-left: 30px solid blue;
}

YUqoridagi ramka berishlardan tashqari, yana tashqi ramka degan tushuncha majud, ya’ni blokdan tashqari tomonda ramka beradi, buning uchun CSSNing «outline» xususiyatidan foydalaniladi.

Outline-color — blokning tashqi tomoni(tashqi ramka)ga rang berish.

Outline-style — tashqi ramkaga stil berish. Stil turlari «border-style» stil turlari bilan bir xil.

Outline-width — tashqi ramka qalinligini o‘rnatish. «border-width» kabi qiymatlarga ega(thin, medium, thick yoki piksellarda).

Shu uchchala stil xususiyatlariga misol ko‘ramiz.

<html>
 <head>
  <title>Outline</title>
  <style>
.out {
padding:20px;
color:red;
margin:10px;
outline-color:red;
outline-width:4px;
outline-style:solid;
}
  </style>
 </head>
 <body>
<img src="bum.jpg" class="out"/>
 </body>
 </html>

Natija, rasm atrofida 4 piksel qalinlikdagi, qizil rangli oddiy ramkadan iborat.

10css_5

YUqoridagi kodni «outline» orqali bir qatorda yozish mumkin:

.out{outline:4px solid red;}

natija o‘sha holda qoladi.