طرح کلی در CSS



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

دیدگاهتان را بنویسید