Border – خلاصه نویسی دستورات CSS

خلاصه نویسی دستورات CSS – Border

---

Border properties – خواص و توانایی های Border

element {

  border-width: number+unit;

  border-style: (numerous);

  border-color: color || #hex || (rgb / % || 0-255);

}

the border shorthand property – توانایی های Border به صورت خلاصه نویسی شده

element {

  border: border-width border-style border-color;

}

example – مثال

p {

  border: 10px solid #ddd;

}

تعیین نکردن مقادیر برای Border در خلاصه نویسی می تواند وضعیت های متفاوتی را به وجود آورد که در زیر به آنها خواهیم پرداخت

---

p {

  border: solid #ddd;

}

نکته

در مثال بالا مقدار ضخامت Border مشخص نشده است . در صورت تعیین نشدن ضخامت Border به صورت پیش فرض مقدار 3px برای آن تعیین می گردد .

---

p {

  border:5px solid;

}

نکته

در مثال بالا مقداری برای رنگ Border تعیین نشده است . در صورت تعیی نشدن رنگ Border به صورت پیش فرض مقدار Black برای آن در نظر گرفته می شود .

---

p {

  border:dashed;

}

نکته

با توجه به مثال بالا در صورت تعیین نشدن مقادیر برای رنگ و اندازه ضخامت Border به ترتیب مقادیر Black و 3px برای آنها جایگذاری خواهند شد .

---

p { border:10px red; }

p { border:10px; }

p { border:red; }

نکته

در مثال های بالا مقدار border-style تعیین نشده است و در نتیجه در نمایش شما Border را نخواهید یافت. تعیین مقدار border-style الزامی است و در صورت تعیین نشدن مقدار آن ، مقدار پیش فرض برای آن تعیین نمی گردد

---

با توجه به قوانین موجود در CSS ممکن است در تعیین رنگ پیش فرض ( Black ) مشکلات خاصی به وجود آید . در زیر به بررسی نکاتی در همین مورد خواهیم پرداخت

p {

  border:dotted;

  color:red;

}

در مثال بالا رنگ پیش فرض برای Border با توجه به مقدار رنگ تعیین شده برای p قرمز – red – خواهد بود

body {

  color:blue;

}

body p {

  border:5px solid;

}

در مثال بالا مقدار رنگ پیش فرض با توجه به رنگ تعیین شده برای body آبی – blue – خواهد بود