Outline

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها


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

این متن توسط برخی از ویژگی‌های قالب بندی متن استایل دهی شده‌است. عنوان از ویژگی‌های 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 را نمایش می‌دهد:

مثال

نمایش سبک‌های مختلف طرح بندی:

1 p.dotted {outline-style: dotted;}
2 p.dashed {outline-style: dashed;}
3 p.solid {outline-style: solid;}
4 p.double {outline-style: double;}
5 p.groove {outline-style: groove;}
6 p.ridge {outline-style: ridge;}
7 p.inset {outline-style: inset;}
8 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 تنظیم شود.


منابع آموزشی