Outline

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< CSS:Tutorial(تغییرمسیر از CSS:Outline)
پرش به ناوبری پرش به جستجو

قالب‌بندی متن

این متن توسط برخی از ویژگی‌های قالب بندی متن استایل دهی شده‌است. عنوان از ویژگی‌های text-align ,text-transform و ویژگی color استفاده می‌کند. تو رفتگی، تراز، و فاصله بین کاراکترها در پاراگراف مشخص شده‌است. علامت زیر خط از این لینک رنگ شده خودتان آزمایش کنید پاک شده‌است.


This element has a black border and a green outline with a width of 10px

Outline در CSS

outline خطی است که دور عناصر، بیرون کادرها، کشیده می‌شود تا عنصر را «برجسته» کند.[۱]


CSS ویژگی‌های outline زیر را دارد:

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

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

ویژگی Outline Style در CSS

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

  • dotted - یک outline نقطه ای تعریف می‌کند
  • dashed - یک outline با خط تیره تعریف می‌کند
  • solid - یک outline پیوسته (solid) تعریف می‌کند
  • double - یک outline دو خطی (double) تعریف می‌کند
  • groove - یک outline سه بعدی شیاردار (Grooved) تعریف می‌کند
  • ridge - یک outline سه بعدی لبه دار تعریف می‌کند
  • inset - یک outline سه بعدی فرورفته تعریف می‌کند
  • outset - یک outline سه بعدی برآمده تعریف می‌کند
  • none - هیچ outline ای تعریف نمی‌کند
  • hidden - یک outline پنهان تعریف می‌کند

مثال زیر مقادیر متفاوت 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 نقطه‌ای.

یک outline با خط تیره..

یک outline از نوع solid.

یک outline ازنوع double.

یک outline از نوع groove. نتیجه این دستور به مقدار ویژگی outline-color بستگی دارد.

یک outline از نوع ridge. نتیجه این دستور به مقدار ویژگی outline-color بستگی دارد.

یک outline از نوع inset. نتیجه این دستور به مقدار ویژگی outline-color بستگی دارد.

یک outline از نوع outset. نتیجه این دستور به مقدار ویژگی outline-color بستگی دارد.


نکته: هیچ‌یک از ویژگی‌های outline (که در بخش‌های بعدی بیشتر در مورد آنها خواهید آموخت) کار نخواهند کرد، مگر اینکه ویژگی outline-style تنظیم شود.


منابع آموزشی