نحوه ايجاد كادر براي عناصر صفحه با استفاده از استايلكادر border-styleبا استفاده از استايل ما مي توانيم براي اجزاي يك صفحه كادر ايجاد كنيم. با استفاده از پارامتر border-style مي توانيم مشخص كنيم كه آيا مي خواهيم كادر داشته باشيم يا نه، و اگر مي خواهيم نوع كادري را كه مي خواهيم ايجاد كنيم مشخص كنيم. در اينجا مي توانيد برخي از مقاديري را كه مي توانيم براي border-style استفاده كنيم را ببينيد:none .1
با استفاده از اين مقدار تعيين مي كنيم كه نمي خواهيم كادر داشته باشيم. در صورتي كه مقداري غير از
تعيين شود كادر خواهيم داشت. none
solid .2
This DIV have a solid border
dashed .3
This DIV have a dashed borderdotted .4
This DIV have a dotted border
double .5
This DIV have a double border
groove .6
This DIV have a groove border
hidden .7
This DIV have a hidden border
inset .8
This DIV have a inset border
outset .9
This DIV have a outset border
ridge .10
This DIV have a ridge borderهمانطور كه مي بينيد عرض اين كادرها بيش از آن چيزي است كه ما نياز داريم چون ما براي اين كادرها عرضي مشخص نكرديم. اگر بخواهيم عرض اين كادرها به اندازه مشخصي باشد بايد از پارامترwidthكه قبلاً با آن آشنا شديم استفاده كنيم. به مثال زير توجه كنيد:
<div style="width:300px; border-style:solid">با استفاده از اين مقدار تعيين مي كنيم كه نمي خواهيم كادر داشته باشيم. در صورتي كه مقداري غير از
تعيين شود كادر خواهيم داشت. none
solid .2
This DIV have a solid border
dashed .3
This DIV have a dashed borderdotted .4
This DIV have a dotted border
double .5
This DIV have a double border
groove .6
This DIV have a groove border
hidden .7
This DIV have a hidden border
inset .8
This DIV have a inset border
outset .9
This DIV have a outset border
ridge .10
This DIV have a ridge borderهمانطور كه مي بينيد عرض اين كادرها بيش از آن چيزي است كه ما نياز داريم چون ما براي اين كادرها عرضي مشخص نكرديم. اگر بخواهيم عرض اين كادرها به اندازه مشخصي باشد بايد از پارامترwidthكه قبلاً با آن آشنا شديم استفاده كنيم. به مثال زير توجه كنيد:
براي اين كادر عرض 300 پيكسل تعيين شده است.
</div>
نتيجه به اين صورت خواهد بود:براي اين كادر عرض 300 پيكسل تعيين شده است.border-width اين پارامتر به ما اجازه مي دهد تا ميزان ضخامت كادرها را تعيين كنيم. اين پارامتر مي تواند مقادير زير را داشته باشد:1. مقدار عددي بر حسب پيكسل
در اين روش مي توانيم مقدار ضخامت كادر را بر حسب پيكسل تعيين كنيم. به مثال زير توجه كنيد:
<div style="border-style:solid; border-width:10px">
اين كادر 10 پيكسل ضخامت دارد
</div>
اين هم كادر به دست آمده :اين كادر 10 پيكسل ضخامت دارد
thin .2
اين مقدار باعث خواهد شد تا كادر ما باريك باشد. مانند زير:
<div style="border-style:solid; border-width:thin">
در نظر گرفته شده است. thin ضخامت اين كادر
</div>
اين هم كادر به دست آمده:
ضخامت اين كادر thin در نظر گرفته شده است.thick .3اين مقدار به ما يك كادر ضخيم خواهد داد. به مثال زير توجه كنيد:
<div style="border-style:solid; border-width:thick">در اين روش مي توانيم مقدار ضخامت كادر را بر حسب پيكسل تعيين كنيم. به مثال زير توجه كنيد:
<div style="border-style:solid; border-width:10px">
اين كادر 10 پيكسل ضخامت دارد
</div>
اين هم كادر به دست آمده :اين كادر 10 پيكسل ضخامت دارد
thin .2
اين مقدار باعث خواهد شد تا كادر ما باريك باشد. مانند زير:
<div style="border-style:solid; border-width:thin">
در نظر گرفته شده است. thin ضخامت اين كادر
</div>
اين هم كادر به دست آمده:
ضخامت اين كادر thin در نظر گرفته شده است.thick .3اين مقدار به ما يك كادر ضخيم خواهد داد. به مثال زير توجه كنيد:
در نظر گرفته شده است. 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> تنظيم حاشيه و فاصله از لبه در عناصر صفحهmargin-left
اين گزينه به ما اجازه وي دهد تا براي هر يك از اجزاي صفحه حاشيه چپ مشخصي را تعيين كنيم . در حقيقت اين گزينه مقدار فاصله اجزا را از سمت چپ صفحه مشخص مي كند. به يك مثال در اين مورد توجه كنيد:
<div style="margin-left:200px; border:double">دويست پيكسل از سمت چپ صفحه فاصله دارد</div> اين كادر به رنگ سبز خواهد بود
</div> تنظيم حاشيه و فاصله از لبه در عناصر صفحهmargin-left
اين گزينه به ما اجازه وي دهد تا براي هر يك از اجزاي صفحه حاشيه چپ مشخصي را تعيين كنيم . در حقيقت اين گزينه مقدار فاصله اجزا را از سمت چپ صفحه مشخص مي كند. به يك مثال در اين مورد توجه كنيد:
همانطور كه مي بينيد كد بالا يك DIV را با كادر مضاعف و 200 پيكسل حاشيه از چپ نشان مي دهد: اين DIV دويست پيكسل از سمت چپ صفحه فاصله دارد. margin-rightاين گزينه هم مانند گزينه بالا عمل مي كند با اين تفاوت كه مقدار حاشيه را از سمت راست تعيين مي كند:
<div style="margin-right:200px; border:double">دويست پيكسل از سمت راست صفحه فاصله دارد DIV اين
</div>
margin-topاين گزينه هم مانند گزينه هاي بالا كار مي كند با اين تفاوت كه ميزان حاشيه را از بالاي صفحه تعيين مي كند:
<div style="margin-top:100px; border:double">صد پيكسل از بالاي صفحه فاصله دارد. DIV اين
</div>
margin-bottomاين گزينه هم مانند گزينه هاي بالا كار مي كند با اين تفاوت كه ميزان حاشيه را از پايين صفحه تعيين مي كند:
<div style="margin-bottom:100px; border:double">صد پيكسل از پايين صفحه فاصله دارد </div>
Paddingpadding-rightپارامتر padding در CSS مشابه شناسه cellpadding در جدولهاست كه با اين تفاوت كه مي توان آنرا براي بالا، پايين، چپ و راست به صورت جداگانه تعريف كرد به جاي اينكه به صورت يكجا تعيين شود . در اينجا مي توانيد يك نمونه از padding را كه براي راست تعريف شده است را ببينيد:
<div style="padding-right:100px; border-style:double">براي اين معادل 100 پيكسل تعريف شده است
</div>
padding-topمانند قسمت قبل است با اين تفاوت كه به جاي راست براي بالا تعريف مي شود:<div style="padding-top:30px; border-style:double"> براي اين DIV معادل 30 پيكسل padding تعريف شده است. padding-leftمانند padding-right است با اين تفاوت كه براي چپ تعيين مي شود.padding-bottomمانند padding-top است با اين تفاوت كه براي پايين تعيين مي شود. به ياد داشته باشيد كه در صورتي كه پارامتر padding بدون RIGHT,LEFT,TOP,bottom به كار رود مقدار وارد شده براي هر چهار جهت مورد استفاده قرار مي گيرد، البته در مورد margin هم به همين صورت است:
<div style="padding:35px; width:250px; border-style:solid ">پارامتر padding بر روي هر چهار جهت تأثير ميگذارد.
طراحی سایت - طراحی وب سایت
طراحی سایت با css قسمت چهارم
طراحی سایت - طراحی وب سایت
طراحی سایت با css قسمت چهارم