Outline در CSS

( سه شنبه ، 15 اسفند سال 1402 )

حق کپی ویدئو

مجاز نمی باشد.

شما اینجا هستید :

جلسه هفدهم

آموزگار :

آرزو محرابی

OutLine در CSS به خطی که دور تا دور یک عنصر کشیده می‌شود outline گفته می‌شود. نکته قابل توجه این است که outline خارج از یک عنصر ایجاد می‌شود و ... ( ادامه مطلب … )

ابزار وردپرس بُزرگ ترین مرجع وردپرس ایران!

آنچه توانسته ایم لطف خدا بوده است ، ابزار وردپرس بعنوان یکی از مراجع بزرگ طراحی وب و وردپرس در حال فعالیت می باشد 🙂

ابزار وردپرس بُزرگ ترین مرجع وردپرس ایران!

آنچه توانسته ایم لطف خدا بوده است ، ابزار وردپرس بعنوان یکی از مراجع بزرگ طراحی وب و وردپرس در حال فعالیت می باشد 🙂

اورجینال

کیفیت

پشتیبانی

آپدیت

آرزو محرابی

مدرس دوره های آموزش طراحی سایت و برنامه نویسی

آرزو محرابی

مدرس دوره های آموزش طراحی سایت و برنامه نویسی

Outline در CSS

( سه شنبه ، 15 اسفند سال 1402 )

در ابتدا باید با تعریف 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 ;

و به آن هر مقدار عددی که می‌خواهیم بدهیم.

برای نوشتن دیدگاه باید وارد بشوید.

6 دیدگاه. Leave new

فهرست