در ابتدا باید با تعریف outline آشنا شویم. به خطی که دور تا دور یک عنصر کشیده می‌شود outline گفته می‌شود. توجه کنید که outline خارج از یک عنصر ایجاد می‌شود و درنتیجه جزئی از عنصر محسوب نمی‌شود.
ما می‌توانیم همانند حاشیه ی یک عنصر، استایل، رنگ و عرض یک عنصر را به دلخواه خود ایجاد کنیم. ابتدا می‌خواهیم نوع استایل آن را تعیین کنیم:
P{
outline-style: dotted ;
}
ما به پاراگراف خود ، outline به حالت نقطه چین داده ایم. حالا می‌توانیم به آن رنگ نارنجی بدهیم:
P{
outline-style: dotted ;
outline-color: orange;
}
به پاراگراف خود یک حاشیه می‌دهیم تا تفاوت outline و border را بهتر متوجه شویم.
P{
border: 1px solid green ;
outline-style: dotted ;
outline-color: orange;
}
و سپس می‌توانیم برای outline ضخامت تعیین کنیم:
P{
border: 1px solid green ;
outline-style: dotted ;
outline-color: orange;
outline-width: 4px ;
}
برای دستور ضخامت هم می‌توانیم از مقدار عددی مثل بالا استفاده کنیم و هم می‌توانیم از مقدار حرفی مانند thick , medium و یا thin استفاده کنیم.
نکته:
نکته مهمی‌که وجود دارد این است که ما می‌توانیم هر سه دستور مربوط به outline را در یک دستور خلاصه کنیم و جالب این است که ترتیب مقدار‌ها در آن مهم نیست. مثال بالا را می‌توانیم به شکل زیر بنویسیم:
P{
border: 1px solid green ;
outline: dotted orange 4px ;
}
یادتان باشد که حتما باید استایل outline را تعیین کنیم تا دستور رنگ و ضخامت مربوط به آن نیز اجرا شود.
و نکته ی دیگر اینکه چون outline خارج از محدوده ی یک عنصر کشیده می‌شود ممکن است با عنصر‌های خارجی دیگر تداخل پیدا کند.
و نیز با تغییر دادن outlinها تغییری در عرض عنصر ایجاد نمی‌شود چرا که outline جزئی از عنصر محسوب نمی‌شود.
موضوع پایانی اینکه ما می‌توانیم فاصله ای بین outline و border ایجاد کنیم. برای این کار باید از دستور زیر استفاده کنیم:
outline-offset : px ;
و به آن هر مقدار عددی که می‌خواهیم بدهیم.
Views 0
دیدگاه‌ها و پرسش‌ها