راهنماي خلاصه نويسي دستورات CSS براي Outline , list-style

امير سروريبدون ديدگاهCSS , استاندارد وب سايت , اصول طراحی وب سایت چهارشنبه تير بازديد

خلاصه نويسي دستورات CSS – Outline , list-style

Outline properties – خواص و توانايي هاي Outline

element {

outline-width: number+unit;

outline-style: (numerous);

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

}

the outline shorthand property – توانايي هاي Outline به صورت خلاصه نويسي شده

element {

outline:outline-width outline-style outline-color;

}

example – مثال

element {

outline:3px dotted gray;

}

نکته

اين نکته با توجه به قسمت هاي قبل تکرار مي شود که خلاصه نويسي دستورات CSS بايد با دقت صورت گيرد . در غير اينصورت ممکن است مقادير پيش فرض تغيير کنند . براي توضيحات بيشتر به قسمت هاي قبلي مراجعه نمائيد

list-style properties – خواص و توانايي هاي list-style

element {

list-style-type: (numerous);

list-style-position:inside || outside;

list-style-image:url(image.png);

}

list-style property defaults – مقادير تعيين شده به صورت پيش فرض

element {

list-style-type:disc;

list-style-position:outside;

list-style-image:none;

}

the list-style shorthand property – توانايي هاي list-style به صورت خلاصه نويسي شده

element {

list-style:list-style-type list-style-position list-style-image);

}

example – مثال

ul li {

list-style:square inside url(image.png);

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

راهنماي خلاصه نويسي دستورات CSS براي Border

امير سروري? ديدگاهCSS , استاندارد وب سايت , اصول طراحي وب سايتجمعه, ??م خرداد , ????3051 بازديد

خلاصه نويسي دستورات 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 به صورت پيش فرض مقدار ?px براي آن تعيين مي گردد .

p {

border:5px solid;

}

نکته

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

p {

border:dashed;

}

نکته

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

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