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 – خواهد بود