بخش شهید آوینی حرف دل موبایل شعر و سبک اوقات شرعی کتابخانه گالری عکس  صوتی فیلم و کلیپ لینکستان استخاره دانلود نرم افزار بازی آنلاین
خرابی لینک Instagram

border-style

با استفاده از استایل ما می توانیم برای اجزای یک صفحه کادر ایجاد کنیم. با استفاده از پارامتر border-style می توانیم مشخص کنیم که آیا می خواهیم کادر داشته باشیم یا نه، و اگر می خواهیم نوع کادری را که می خواهیم ایجاد کنیم مشخص کنیم. در اینجا می توانید برخی از مقادیری را که می توانیم برای border-style استفاده کنیم را ببینید:

none
با استفاده از این مقدار تعیین می کنیم که نمی خواهیم کادر داشته باشیم. در صورتی که مقداری غیر از none تعیین شود کادر خواهیم داشت.

solid

This DIV have a solid border

dashed

This DIV have a dashed border

dotted

This DIV have a dotted border

double

This DIV have a double border

groove

This DIV have a groove border

hidden

This DIV have a hidden border

inset

This DIV have a inset border

outset

This DIV have a outset border

ridge

This DIV have a ridge border

همانطور که می بینید عرض این کادرها بیش از آن چیزی است که ما نیاز داریم چون ما برای این کادرها عرضی مشخص نکردیم. اگر بخواهیم عرض این کادرها به اندازه مشخصی باشد باید از پارامتر width که قبلاً با آن آشنا شدیم استفاده کنیم. به مثال زیر توجه کنید:

<div style="width:300px; border-style:solid">برای این کادر عرض 300 پیکسل تعیین شده است.</div>

نتیجه به این صورت خواهد بود:

برای این کادر عرض 300 پیکسل تعیین شده است.



border-width

این پارامتر به ما اجازه می دهد تا میزان ضخامت کادرها را تعیین کنیم. این پارامتر می تواند مقادیر زیر را داشته باشد:

    مقدار عددی بر حسب پیکسل
    در این روش می توانیم مقدار ضخامت کادر را بر حسب پیکسل تعیین کنیم. به مثال زیر توجه کنید:

    <div style="border-style:solid; border-width:10px">این کادر 10 پیکسل ضخامت دارد</div>

    این هم کادر به دست آمده: 

    این کادر 10 پیکسل ضخامت دارد

    thin
    این مقدار باعث خواهد شد تا کادر ما باریک باشد. مانند زیر:

    <div style="border-style:solid; border-width:thin">ضخامت این کادر thin در نظر گرفته شده است.</div>

    این هم کادر به دست آمده:

    ضخامت این کادر thin در نظر گرفته شده است.

    thick
    این مقدار به ما یک کادر ضخیم خواهد داد. به مثال زیر توجه کنید:

    <div style="border-style:solid; border-width:thick">ضخامت این کادر thick در نظر گرفته شده است.</div>

    نتیجه به صورت زیر خواهد بود:

    ضخامت این کادر thick در نظر گرفته شده است.


border-color

شما می توانید در صورت تمایل رنگ کادرهای خود را تغییر دهید. برای این کار باید از پارامتر border-color استفاده کنید. برای مقدار این پارامتر می توانید از نام رنگها استفاده کنید. در صورتی که از نام رنگها استفاده کنید فقط می توانید از تعداد کمی از رنگها استفاده کنید. راه دیگری که برای انتخاب رنگ وجود دارد استفاده از معادل هگزادسیمال رنگها است که نسبت به نام رنگها انعطاف پذیری بیشتری دارد. اگر جدول معادل هگزا دسیمال رنگها را می خواهید اینجا را کلیک کنید
به یک نمونه برای تغییر رنگ کادر توجه کنید:

استفاده از نام رنگها:

<div style="border-style:solid; border-color:green">این کادر به رنگ سبز خواهد بود.</div>

این کادر به رنگ سبز خواهد بود.

استفاده از معادل هگزا دسیمال رنگها:

<div style="border-style:solid; border-color:#008000">این کادر به رنگ سبز خواهد بود.</div>

این کادر به رنگ سبز خواهد بود.


درس قبلی، درس بعدی

فهرست عناوین

منبع : سایت نئو پرشیا

بازگشت به صفحه آموزش

 
 Copyright © 2003-2022 - AVINY.COM - All Rights Reserved