در جلسات قبل دوره آموزش CSS یاد گرفتیم که حاشیه یا همون border چی هست . الان یه ویژگی دیگه رو میخوایم معرفی کنیم به اسم outline . این ویژگی در CSS میاد یه خط ثابت بعد از حاشیه یا همون border ایجاد میکنه و در فضای خارجی المان بعد از border قرار می گیره .
<div style="width:98%;border:2px solid black;outline:#04AA6D solid 10px;padding:20px;margin:auto;text-align:center">
این المان یک حاشیه رنگ سیاه داره و یک outline سبز رنگ به ضخامت ۱۰ پیکسل !</div>
مقادیر خصوصیت هایی که المان outline میگیره میتونه style – color – width – offset هستش . خصوصیت outline هم مثل border در خارج از المان ترسیم میشه و مثل همون border در قسمت width و height تاثیری نداره و جداگانه ازون ها برای عرض و ارتفاع المان محاسبه میشه .
خصوصیت style در outline
مثل border در ویژگی outline هم میشه از انواع استایل ها استفاده کرد . استایل هایی مثل dotted- dashed -solid -double – groove – ridge – inset – outset – none – hidden هستش .
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
خصوصیت style در outline
با زهم مثل border این المان outline قابلیت این رو داره که بیایم ضخامت براش تعیین کنیم . این ضخامت میتونه عدد باشه با واحد مشخص شده براش یا اینکه thin – medium و thick باشه .
p.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thin;
}
p.ex2 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: medium;
}
p.ex3 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thick;
}
p.ex4 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: 4px;
}
خصوصیت color در outline
میتونیم برای المان outline رنگ خاصی هم مشخص کنیم . در جلسات قبلی در دوره آموزش HTML هم یاد گرفتیم که از چند نوع مختلف رنگ استفاده کنیم . از تمام این نوع کد رنگ ها هم میتونیم توی outline کد برای CSS بنویسیم .
p.ex1 {
outline-style: solid;
outline-color: #ff0000; /* red */
}
p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /* red */
}
p.ex1 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%); /* red */
}
کدهای کوتاه شده outline
در جلسات قبلی در دوره آموزش CSS یاد گرفتیم چطور خصوصیت ها رو برای سلکتور کوتاه کنیم و از چندخط شدن کدهای CSS پرهیز کنیم . در زیر چند مثال براتون آماده کردیم :
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
