آشنایی با صفت Outline در CSS

از صفت Outline در CSS برای مشخص کردن استایل ، رنگ و پهنای یک Outline استفاده میشود. در این فصل به نحوه ی استفاده از این صفت خواهیم پرداخت


یک Outline خطی است که اطراف یک عنصر رسم میشود (خارج از border برای آن عنصر). با این حال صفت Outline با صفت Border متفاوت است. Outline جز ابعاد یک عنصر محسوب نمیشود و مجموع طول و عرض یک عنصر با افزودن صفت Outline به آن تغییری نخواهد کرد. 

در شکل زیر مکان صفت Outline در یک عنصر مشخص شده است :

outline


استایل دهی برای صفت Outline

از صفت outline-style برای استایل دهی به یک Outline استفاده میشود.

صفت outline-style میتواند دارای یکی از مقادیر زیر باشد :

  • dotted : یک outline با استایل نقطه ای
  • dashed : یک outline با استایل خطوط فاصله
  • solid : یک outline با استایل خط مستقیم
  • double : یک outline با استایل دو خط مستقیم
  • groove : یک outline سه بعدی با استایل grooved. نوع اثر آن بستگی به مقدار صفت outline-color دارد
  • ridge : یک outline سه بعدی با استایل ridge. نوع اثر آن بستگی به مقدار صفت outline-color دارد.
  • inset : یک outline سه بعدی با استایل inset. نوع اثر آن بستگی به مقدار صفت outline-color دارد.
  • outset :  یک outline سه بعدی با استایل outset. نوع اثر آن بستگی به مقدار صفت outline-color دارد.
  • none : بدون outline
  • hidden : یک outline پنهان

در نمونه مثال زیر ابتدا برای هر عنصر <p> یک border نازک مشکی در نظر گرفته میشود سپس از استایل های مختلف outline برای هر عنصر پاراگراف استفاده میشود :

p {
    border: 1px solid black;
    outline-color: red;
}

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 با استایل خط مستقیم.

   یک outline با استایل دو خط مستقیم.

   یک outline سه بعدی با استایل grooved.

   یک outline سه بعدی با استایل ridge.

   یک outline سه بعدی با استایل inset.

   یک outline سه بعدی با استایل outset.

نکته : بدون مقداردهی صفت outline-style هیچکدام از صفات border ایی که در ادامه فصل توضیح داده خواهد شد، تاثیری نخواهند داشت.


صفت outline-color 

از صفت outline-color برای مقدار دهی رنگ یک outline استفاده میشود.

رنگ یک outline میتواند به وسیله ی یکی از مقادیر زیر مقدار دهی شود :

  • نام - یک نام معتبر برای یک رنگ  مانند "red"
  • RGB - یک مقدار RGB - مانند "(rgb(255,0,0"
  • HEX - یک مقدار هگزادسیمال - مانند "ff0000#"
p {
    border: 1px solid black;
    outline-style: double;
    outline-color: red;
}
خودتان امتحان کنید

نتیجه به شکل زیر خواهد بود :

   یک outline رنگی.

 


صفت outline-width

صفت outline-width پهنای یک outline را مشخص میکند. پهنای یک outline میتواند به وسیله ی اندازه های مشخص (پیکسل ، سانتیمتر و ...) تعیین شود و یا به وسیله یکی از سه مقدار از پیش تعریف شده مقدار دهی شود : thin, medium, thick

p {border: 1px solid black;}

p.one {
    outline-style: double;
    outline-color: red;
    outline-width: thick;
}

p.two {
    outline-style: double;
    outline-color: green;
    outline-width: 3px;
}
خودتان امتحان کنید

نتیجه به شکل زیر خواهد بود :

   یک outline ضخیم.

   یک outilne نازک.

 


Outline - صفت کوتاه شده

برای کوتاه نویسی در کد این امکان وجود دارد که تمام صفات ذکر شده برای outline را در یک صفت جمع کنیم. این صفات عبارت اند از :

  • outline-width
  • outline-style (اجباری)
  • outline-color
p {
    border: 1px solid black;
    outline: 5px dotted red;
}
خودتان امتحان کنید

نتیجه به شکل زیر خواهد بود :

   یک outline.

 

منتشر شده در ۲۸ مرداد ۱۳۹۶ حمید رضا ملکی ۱۰۶۹ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید