خاصیت outline در CSS
خاصیت Outline در CSS
ویژگی outline خطی است که اطراف لبه های یک عنصر کشیده می شود، توجه داشته باشید که با ویژگی border فرق دارد.
همچنین عرض outline جزو ابعاد عنصر محسوب نمی شود.
به این خصوصیت می توان style، رنگ و عرض اختصاص داد.
کشیدن خط اطراف یک عنصر (outline)
این مثال نشان می دهد که چگونه می توان یک خط اطراف عنصر p کشید، به عبارتی چگونه فضای بیرون از لبه های یک عنصر را تنظیم کنیم.
تنظیم Style خصوصیت outline
این مثال نشان می دهد که چگونه style یک outline را تنظیم کرد.
تنظیم رنگ خصوصیت outline
این مثال نشان می دهد که چگونه رنگ یک outline را تنظیم کرد.
تنظیم عرض خصوصیت outline
این مثال نشان می دهد که چگونه عرض یک outline را تنظیم کرد.
کلیه خصوصیات مربوط به outline
شماره ای که در ستون css ذکر شده، نشان می دهد که خصوصیت مورد نظر در کدام نسخه CSS تعریف شده است.
| خصوصیت | توضیحات | مقادیر | CSS |
|---|---|---|---|
| outline |
کلیه خصوصیات outline را در یک مرحله تنظیم می کند |
outline-color outline-style outline-width inherit |
2 |
| outline-color | رنگ یک outline را تنظیم می کند | color_name hex_number rgb_number invert inherit |
2 |
| outline-style | style یک outline را تنظیم می کند | none dotted dashed solid double groove ridge inset outset inherit |
2 |
| outline-width | عرض یک outline را تنظیم می کند | thin medium thick length inherit |
2 |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 33155
دیدگاه‌ها
سلام outline-color یه value داره به اسم invert اینو میشه نوضیح بدین؟
سلام، یک رنگ معکوس یا مخالف پس زمینه را برای outline در نظر میگیرد.
با سلام و عرض ادب و خسته نباشید به همه شما
سوال:ایا برای خصوصیت outline-width فقط این مقادیر استاندارد معرفی شدن؟
thin
medium
thick
length
یا اینکه از مقادیر پیکسلی هم میشه استفاده کرد و یک کد استاندارد داشت؟
با استفاده از خصوصیت outline-width می توان ضخامت outline را مشخص نمود. و علاوه بر مقادیری که sajad عزیز ذکر نمودند بصورت عددی دلخواه نیز می توان آنرا مقدار دهی نمود.
این دستور دقیقا چه کاربردی داره؟ منظورم خصوصیت outline است.
با توجه به تصویر بالا، ویژگی outline بلافاصله بعد از Border قرار دارد و می توان برای آن یک رنگ دلخواه را تنظیم نمود.
اگر به لینک زیر برید، و به کادر سبز رنگی که در اطراف اسکریبت ها کشیده شده است توجه کنید، متوجه خواهید شد که برای رنگی کردن فضای اطراف border، از خصوصیت Outline استفاده شده است:
beyamooz.com/php/80-basic/64
ميشه اين رو گفت كه فضايي رو كه ما به margin اختصاص ميديم توسط Outline رنگي ميشه؟ اگر نه آيا اين دوتا روي هم ديگه اثر نميذارن؟
با توجه به مثال زیر، اگر اندازه outline را بیشتر بکنیم از فضای margin به آن اختصاص داده خواهد شد. و یا حتی اگر margin را صفر کرده و outline را افزایش دهیم، باز محلی برای فضای ouline باز نخواهد شد و روی هم افتادگی با عنصر کناری اتفاق خواهد افتاد: p.code {
border: 6px solid #D4D4D4;
padding: 10px;
margin: 4px;
outline: 5px solid #DDE9BE;
}
این اتفاق بخاطر این است که عرض outline جزو ابعاد عنصر محسوب نمی شود.
سلام من از تمام نسخه های HTML در سایتم استفاده میکنم حالا باید DOCYTYPE را چی بنویسم؟آیا راحی هست که خودم بفهم؟
سلام، باید توجه داشته باشید که، وقتی با استفاده از DOCYTYPE اعلام می کنید که از HTML5 استفاده می کنید، یعنی به مرورگر می گویید، علاوه بر پردازش های معمولی که برای دیگر نسخه های HTML قائل است، امکانات جدیدی که در HTML5 معرفی شده است را نیز در نظر بگیرد.