رئوس مطالب خطی است که در خارج از مرز عنصر ترسیم شده است.

رئوس مطالب CSS

رئوس مطالب خطی است که به دور عناصر ، خارج از مرزها کشیده می شود تا عنصر “برجسته” شود.

CSS دارای مشخصات کلی زیر است:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

توجه: طرح کلی با مرزها متفاوت است ! بر خلاف حاشیه ، رئوس مطالب خارج از مرز عنصر ترسیم می شود و ممکن است با سایر مطالب هم پوشانی داشته باشد. همچنین ، طرح کلی بخشی از ابعاد عنصر نیست. عرض و ارتفاع کل عنصر تحت تأثیر عرض رئوس مطالب قرار نمی گیرد.


سبک رئوس مطالب CSS

outline-styleاموال سبک طرح کلی را مشخص، و می تواند یکی از مقادیر زیر را داشته باشد:

  • dotted – رئوس مطالب نقطه چین را مشخص می کند
  • dashed – رئوس مطالب خط خورده را مشخص می کند
  • solid – یک طرح کلی جامد را تعریف می کند
  • double – رئوس مطالب دوتایی را تعریف می کند
  • groove – رئوس مطالب شیار دار 3D را تعریف می کند
  • ridge – یک طرح کلی برجسته 3D را تعریف می کند
  • inset – رئوس مطالب داخلی 3D را تعریف می کند
  • outset – یک طرح کلی شروع سه بعدی را تعریف می کند
  • none – هیچ رئوس مطالبی را تعریف نمی کند
  • hidden – رئوس مطالب پنهان را تعریف می کند

مثال زیر outline-styleمقادیر مختلف را نشان می دهد :

مثال

نمایش سبک های مختلف رئوس مطالب:

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;}

توجه: هیچ یک از خصوصیات رئوس مطالب دیگر (که در فصل های بعدی بیشتر خواهید فهمید) هیچ تأثیری نخواهد داشت مگر اینکه outline-styleخاصیت تنظیم شود!

منبع