خطوط تقریباً شبیه به حاشیه‌ها (بوردرها) هستند، اما چند تفاوت اساسی نیز وجود دارد:
-
خطوط فضایی را اشغال نمی‌کنند: برخلاف حاشیه‌ها که فضایی در اطراف المان ایجاد می‌کنند و باعث افزایش ابعاد المان می‌شوند، خطوط فضایی را اشغال نمی‌کنند و ابعاد المان را تغییر نمی‌دهند.
-
خطوط نباید مستطیلی باشند: در حالی که حاشیه‌ها اغلب شکل مستطیلی دارند، خطوط می‌توانند شکل‌های مختلفی مانند دایره، بیضی و … داشته باشند.
-
خطوط همیشه در تمامی سمت‌ها یکسان هستند: امکان تنظیم مقادیر مختلف برای خطوط در سمت‌های مختلف المان وجود ندارد. بر خلاف حاشیه‌ها که می‌توان برای هر سمت مقدار متفاوتی تعیین کرد.
توجه: خصوصیات خطوط توسط مرورگرهایی مانند IE 6 یا Netscape 7 پشتیبانی نمی‌شوند.
می‌توانید از خصوصیات زیر برای تنظیم خطوط با استفاده از CSS استفاده کنید:
- outline-width: برای تنظیم عرض خط.
- outline-style: برای تنظیم سبک خط.
- outline-color: برای تنظیم رنگ خط.
- outline-offset: برای تنظیم فاصله بین خط و لبه حاشیه المان.
- outline: برای تنظیم همه موارد فوق در یک دستور تکی.
ویژگی outline-width
ویژگی outline-width عرض خط را برای خط مشخص می‌کند که به جعبه اضافه می‌شود. مقدار آن باید یک طول یا یکی از مقادیر thin، medium، یا thick باشد، مانند ویژگی border-width.
یک عرض صفر پیکسل به معنای عدم وجود خط می‌باشد.
در اینجا یک مثال است:
<html>
<head>
</head>
<body>
<p style = "outline-width: thin; outline-style: solid; padding: 5px">
این متن دارای خط نازک است.
</p>
<p style = "outline-width: thick; outline-style: solid; padding: 5px">
این متن دارای خط ضخیم است.
</p>
<p style = "outline-width: 5px; outline-style: solid; padding: 5px">
این متن دارای خط 5 پیکسلی است.
</p>
</body>
</html>
ویژگی outline-style
ویژگی outline-style نوع خط (massive, dotted یا dashed) را که دور یک عنصر می‌رود مشخص می‌کند. می‌تواند یکی از مقادیر زیر را داشته باشد:
- none: بدون خط. (معادل outline-width:0;)
- solid: خط یکنواخت است.
- dotted: خط یک سری نقطه است.
- dashed: خط یک سری خط کوتاه است.
- double: خط دو خط جامد است.
- groove: خط به نظر می‌رسد که به صفحه حک شده است.
- ridge: خط برعکس groove به نظر می‌رسد.
- inset: خط باعث می‌شود جعبه وارد صفحه شود.
- outset: خط باعث می‌شود جعبه به نظر بیاید که از کانون بیرون می‌آید.
- hidden: مانند none.
اینجا یک مثال است:
<html>
<head>
</head>
<body>
<p style = "outline-width: thin; outline-style: solid; padding: 5px">
این متن دارای خط نازک یکنواخت است.
</p>
<p style = "outline-width: thick; outline-style: dashed; padding: 5px">
این متن دارای خط ضخیم خط چین است.
</p>
<p style = "outline-width: 5px; outline-style: dotted; padding: 5px">
این متن دارای خط نقطه‌ای 5 پیکسلی است.
</p>
</body>
</html>
ویژگی outline-color
ویژگی outline-color به شما اجازه می‌دهد تا رنگ خط را مشخص کنید. مقدار آن باید یک نام رنگ، یک مقدار hex، یا یک مقدار RGB باشد، همانند ویژگی‌های color و border-color.
اینجا یک مثال است:
<html>
<head>
</head>
<body>
<p style = "outline-width: thin; outline-style: solid; outline-color: red; padding: 5px">
این متن دارای خط نازک قرمز یکنواخت است.
</p>
<p style = "outline-width: thick; outline-style: dashed; outline-color: #009900; padding: 5px">
این متن دارای خط ضخیم سبز چین یکنواخت است.
</p>
<p style = "outline-width: 5px; outline-style: dotted; outline-color: rgb(13,33,232); padding: 5px">
این متن دارای خط نقطه‌ای آبی 5 پیکسلی است.
</p>
</body>
</html>
ویژگی outline-offset
ویژگی outline-offset برای تعیین فضای میان خط حاشیه و لبه حاشیه یک عنصر استفاده می‌شود. فضای میان خط حاشیه و عنصر شفاف است.
اینجا یک مثال است:
<html>
<head>
<style>
div.example {
margin: 20px;
border: 2px dotted #000;
background-color: #08ff90;
outline: 4px solid #666;
outline-offset: 10px;
}
</style>
</head>
<body>
<h2>ویژگی outline-offset</h2>
<div class="example">فاصله بین خط حاشیه و لبه حاشیه 10 پیکسل است</div>
</body>
</html>
این کد یک مستطیل نشان می‌دهد که دارای یک حاشیه دوتایی خط خورده است. این حاشیه دارای یک خط چهارپیکسلی با رنگ خاکستری است. ویژگی outline-offset باعث می‌شود که حاشیه از لبه عنصر دورتر شود و فضایی شفاف بین آن‌ها ایجاد می‌شود.
ویژگی outline
ویژگی outline یک ویژگی مختصر است که امکان مشخص کردن مقادیر ویژگی‌های مختلف را در یک عبارت واحد فراهم می‌کند.
مقادیری که می‌توان به آن انتقال داد شامل outline-style، outline-color و outline-width هستند.
ترتیبی که مقادیر می‌توانند منتقل شوند، ثابت نیست.
outline-offset نمی‌تواند به عنوان یک ویژگی مختصر در ویژگی outline منتقل شود. باید به صورت جداگانه منتقل شود.
اینجا یک مثال است:
<html>
<head>
</head>
<body>
<p style = "outline: thin solid red; padding: 10px;">
این متن دارای خط حاشیه نازک، جامد و قرمز است.
</p>
<p style = "outline: thick dashed #009900; padding: 10px;">
این متن دارای خط حاشیه ضخیم، خط چین خورده و سبز است.
</p>
<p style = "outline: 5px dotted rgb(13,33,232); padding: 10px;">
این متن دارای خط حاشیه 5 پیکسل، نقطه‌ای و آبی است.
</p>
</body>
</html>
در این مثال، ویژگی outline برای مشخص کردن خط حاشیه‌های مختلف استفاده شده است. همچنین ویژگی‌های padding نیز برای فضای موازی با خط حاشیه‌ها استفاده شده‌اند.
مقایسه Outline و Border
| Outline | Border |
|---|---|
| یک شکل غیر مستطیل که یک عنصر را محاصره می‌کند، معمولاً با یک رنگ ساده. | یک شکل مستطیلی که دور محتوای یک عنصر رسم می‌شود، می‌تواند متمایز، خطی یا نقطه‌ای باشد و می‌تواند اندازه و رنگ‌های مختلفی داشته باشد. |
| هیچ فضایی را در چیدمان اشغال نمی‌کند و اندازه یا موقعیت عنصر را تحت تأثیر قرار نمی‌دهد. | بر اندازهٔ و موقعیت عنصر تأثیر می‌گذارد، زیرا عرضی به عنصر اضافه می‌کند. |
| معمولاً برای برجسته کردن یا تأکید بر یک عنصر استفاده می‌شود، مانند زمانی که یک عنصر فوکوس یا فعال شده است. | می‌توان برای اهداف مختلفی استفاده کرد، مانند جداسازی عناصر، ایجاد جعبه‌ها و افزودن تأکید بصری. |
| می‌توان از خاصیت outline در CSS برای ایجاد آن استفاده کرد. | می‌توان از خاصیت border در CSS برای ایجاد آن استفاده کرد. |
در اینجا یک مثال است:
<html>
<head>
<style>
p {
outline: thick solid red;
outline-offset: 5px;
padding: 10px;
border: #009900 inset 10px;
}
</style>
</head>
<body>
<p>تفاوت outline و border را دور عنصر p ببینید. outline قرمز است و border سبز.</p>
</body>
</html>
این کد یک متن داخل یک المان p نشان می‌دهد که دارای یک حاشیه با عرض زیاد به رنگ قرمز است (با استفاده از ویژگی outline) و همچنین یک حاشیه با رنگ سبز است (با استفاده از ویژگی border).
خلاصه
دستورهای زیر توضیح مثال‌های مختلفی از خصوصیات outline را ارائه می‌دهند:
outline
این مثال تمام مقادیر مختلفی را که به صورت مختصر به outline ارسال می‌شوند نشان می‌دهد. این مقادیر شامل نوع، رنگ و عرض خط مرزی است.
outline-color
این مثال تمام مقادیر مختلفی را که به outline-color ارسال می‌شوند نشان می‌دهد. مقادیر ممکن شامل نام رنگ، کد HEX و یا مقادیر RGB می‌شوند.
outline-style
در این مثال، تمام مقادیر مختلفی که به outline-style ارسال می‌شوند نشان داده شده‌است. این مقادیر شامل solid، dotted، dashed، double و سایر مقادیر است.
outline-width
این مثال تمام مقادیر مختلفی را که به outline-width ارسال می‌شوند نشان می‌دهد. این مقادیر می‌توانند شامل عرض‌های مختلف با واحد های px، em یا درصد باشند.
outline-offset
در این مثال، تمام مقادیر مختلفی که به outline-offset ارسال می‌شوند نشان داده شده‌است. این مقادیر ممکن است از واحد های px، em یا درصد استفاده کنند. این مقدار فاصله بین مرز و خط outline را تعیین می‌کند.
با استفاده از این مثال‌ها، شما می‌توانید نحوه استفاده از خصوصیات مختلف outline را در CSS را بهتر فهمیده و به طور اثربخش‌تر از آن‌ها استفاده کنید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام