آموزش outline در CSS

saber

4 سال پیش

امتیاز دهید post

آموزش outline در CSS

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش outline در CSS خواهیم پرداخت.

outline بسیار شبیه حاشیه است، اما تفاوتهای عمده ای نیز وجود دارد –

outline فضا را اشغال نمی کند.
outline نباید مستطیل شکل باشند.

outline همیشه از هر طرف یکسان است. نمی توانید مقادیر مختلفی را برای اضلاع مختلف یک عنصر تعیین کنید.

توجه – ویژگی های رئوس مطالب توسط IE 6 یا Netscape 7 پشتیبانی نمی شوند.

با استفاده از CSS می توانید مشخصات کلی زیر را تنظیم کنید.

از ویژگی outline-width برای تنظیم عرض outline استفاده می شود.
از ویژگی outline-style برای تنظیم سبک خط برای outline استفاده می شود.
از ویژگی outline-color برای تنظیم رنگ outlineاستفاده می شود.
از ویژگی outline برای تنظیم هر سه ویژگی بالا در یک عبارت استفاده می شود.

ویژگی outline-width
ویژگی outline-width مطالب عرض outline را که باید به جعبه اضافه شود مشخص می کند. مقدار آن باید یک طول یا یکی از مقادیر نازک، متوسط یا ضخیم باشد، دقیقاً مانند ویژگی border-width

عرض صفر پیکسل به معنای نداشتن outline است.

در اینجا یک مثال آورده شده است –

&lt;html&gt;
   &lt;head&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p style = "outline-width:thin; outline-style:solid;"&gt;
         This text is having thin outline.
      &lt;/p&gt;
      &lt;br /&gt;
      
      &lt;p style = "outline-width:thick; outline-style:solid;"&gt;
         This text is having thick outline.
      &lt;/p&gt;
      &lt;br /&gt;
      
      &lt;p style = "outline-width:5px; outline-style:solid;"&gt;
         This text is having 5x outline.
      &lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

</head>

<body>

This text is having thin outline.

This text is having thick outline.

This text is having 5x outline.

</body>

</html>

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

This text is having thin outline.


This text is having thick outline.


This text is having 5x outline.

This text is having thin outline.

This text is having thick outline.

This text is having 5x outline.

ویژگی outline-style

ویژگی outline-style استایل را برای خط مشخص می کند ((solid, dotted, یا dashed) که در اطراف یک عنصر قرار دارد. این می تواند یکی از مقادیر زیر را بگیرد –

none– بدون مرز. (معادل عرض outline: 0؛)

solid – یک خط جامد است.

dotted– مجموعه ای از نقاط است.

dashed – یک سری خطوط کوتاه است.

double – دو خط ثابت است.

groove– به نظر می رسد انگار که در صفحه حک شده باشد.

ridge – برعکس شیار به نظر می رسد.

inset –none به نظر می رسد جعبه در صفحه جاسازی شده است.

outset – باعث می شود جعبه به نظر می رسد از بوم خارج می شود.

hidden – همان none

در اینجا یک مثال آورده شده است –

Live Demo
&lt;html&gt;
   &lt;head&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p style = "outline-width:thin; outline-style:solid;"&gt;
         This text is having thin solid  outline.
      &lt;/p&gt;
      &lt;br /&gt;
      
      &lt;p style = "outline-width:thick; outline-style:dashed;"&gt;
         This text is having thick dashed outline.
      &lt;/p&gt;
      &lt;br /&gt;
      
      &lt;p style = "outline-width:5px;outline-style:dotted;"&gt;
         This text is having 5x dotted outline.
      &lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

Live Demo

<html>

<head>

</head>

<body>

This text is having thin solid outline.

This text is having thick dashed outline.

This text is having 5x dotted outline.

</body>

</html>

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

This text is having thin solid outline.


This text is having thick dashed outline.


This text is having 5x dotted outline.

This text is having thin solid outline.

This text is having thick dashed outline.

This text is having 5x dotted outline.

ویژگی outline-color

ویژگی outline-color به شما امکان می دهد رنگ outline را مشخص کنید. مقدار آن باید مانند نام رنگ ، یک رنگ هگزا یا یک مقدار RGB باشد ، همانند ویژگی border-color.

در اینجا یک مثال آورده شده است –

&lt;html&gt;
   &lt;head&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p style = "outline-width:thin; outline-style:solid;outline-color:red"&gt;
         This text is having thin solid red  outline.
      &lt;/p&gt;
      &lt;br /&gt;
      
      &lt;p style = "outline-width:thick; outline-style:dashed;outline-color:#009900"&gt;
         This text is having thick dashed green outline.
      &lt;/p&gt;
      &lt;br /&gt;
      
      &lt;p style = "outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)"&gt;
         This text is having 5x dotted blue outline.
      &lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

</head>

<body>

This text is having thin solid red outline.

This text is having thick dashed green outline.

This text is having 5x dotted blue outline.

</body>

</html>

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

This text is having thin solid red outline.


This text is having thick dashed green outline.


This text is having 5x dotted blue outline.

This text is having thin solid red outline.

This text is having thick dashed green outline.

This text is having 5x dotted blue outline.

ویژگی outline

ویژگی outline مطالب مختصری است که به شما اجازه می دهد مقادیر مربوط به هر یک از سه ویژگی را که قبلاً به هر ترتیب، اما در یک عبارت گفته شد، تعیین کنید.

در اینجا یک مثال آورده شده است –

&lt;html&gt;
   &lt;head&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p style = "outline:thin solid red;"&gt;
         This text is having thin solid red outline.
      &lt;/p&gt;
      &lt;br /&gt;
      
      &lt;p style = "outline:thick dashed #009900;"&gt;
         This text is having thick dashed green outline.
      &lt;/p&gt;
      &lt;br /&gt;
      
      &lt;p style = "outline:5px dotted rgb(13,33,232);"&gt;
         This text is having 5x dotted blue outline.
      &lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

</head>

<body>

This text is having thin solid red outline.

This text is having thick dashed green outline.

This text is having 5x dotted blue outline.

</body>

</html>

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

This text is having thin solid red outline.


This text is having thick dashed green outline.


This text is having 5x dotted blue outline.

This text is having thin solid red outline.

This text is having thick dashed green outline.

This text is having 5x dotted blue outline.

منبع.

لیست جلسات قبل آموزش CSS

امتیاز دهید post

نویسنده مطلب saber

آموزش outline در CSS

آموزش outline در CSS

ویژگی outline-style

ویژگی outline-color

ویژگی outline

لیست جلسات قبل آموزش CSS

دیدگاه شما

بدون دیدگاه

آموزش outline در CSS

ویژگی outline-style

ویژگی outline-color

ویژگی outline

لیست جلسات قبل آموزش CSS

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه