یادداشت کن لذت ببر

<style type="text/css">
.block{
    border:#999 solid 1px;
}
</style>

برای دیدن پیش نمایش مثال ها، به انتهای این مطلب رجوع کنید.
در کلاس ساده بالا، به راحتی یک خط به صورت solid یا جامد (خطوط معمولی) با کد رنگی 999# و اندازه 1 پیکسل ایجاد کرده ایم، به این صورت کلاس بالا به طور پیش فرض این خط را در هر چهار طرف (بالا، پائین، چپ و راست) لایه یا عنصر در صفحات وب ترسیم خواهد کرد، برای ترسیم خطوط در css، نوع یا همان style آنها باید الزاما تعیین شود (به فرض solid، dotted و...) اما تنظیم سایر موراد اختیاری است، برای ترسیم خطوط متفاوت نیز، می توان از مقادیر زیر برای style در border استفاده کرد:
- dashed: برای ترسیم خطوط با فاصله (علامت dash یا -).
- dotted: برای ترسیم خطوط با فاصله (علامت نقطه یا dot).
- double: برای ترسیم خطوط به صورت دوتایی یا دوبل.
- groove: برای ترسیم خطوط به شکل شیاری و برجسته.
- hidden: برای ترسیم خطوط پنهان در صفحه.
- inset: برای ترسیم خطوط سه بعدی با برجستگی داخلی.
- outset: برای ترسیم خطوط سه بعدی با برجستگی بیرونی.
- none: هیچ خطی ترسیم نمی شود.
- ridge: برای ترسیم خطوط شیاری و برجسته.
- solid: برای ترسیم خطوط معمولی.
برای مقادیر اندازه عرض خطوط نیز می توان از مقادیر پیکسل، درصد و... استفاده کرد، علاوه بر این از سه مقدار زیر هم می توان برای این مقصود استفاده نمود:
- medium: ایجاد خطوط با اندازه استاندارد و پیش فرض مرورگر.
- thin: ایجاد خطوط نازک و ظریف.
- thick: ایجاد خطوط ضخیم و برجسته.
برای مقادیر رنگ نیز می توانید از کدهای هگز (مانند 0000FF#) یا rgb (مانند (255,100,125)rgb) و همچنین عنوان های رنگی (مانند red ،blue، green و...) استفاده کنید.
به مثال زیر توجه کنید.

<style type="text/css">
.block{
    border:#CC0 dotted thick;
    height:25px;
    width:25%;
}
</style>

و همچنین مثالی دیگر:

<style type="text/css">
.block{
    border:outset 4px rgb(96,124,66);
    display:block;
    height:20em;
    width:25%;
}
</style>

شیوه تعریف و نگارش (syntax) خاصیت border در css به حالتی که در بالا از آن استفاده کرده ایم محدود نمی شود، در واقع حالت فوق نوع کاربرد مختصر نویسی این خاصیت است، اگر بخواهید از border به شکل سفارشی تری استفاده نمائیم، به فرض برای هر ضلع یک لایه در صفحه، یک نوع خاص از خط و با اندازه و رنگ متفاوت داشته باشیم، می توانیم از سایر پارامترهای این خاصیت به شکل زیر استفاده نمائیم.
- تعریف خطوط برای یک ضلع خاص:
بدین منظور از border-right، border-left، border-top و border-bottom استفاده می کنیم، به عنوان مثال:

<style type="text/css">
.block{
    border:#6C6 solid thin;
    border-bottom:double yellow;
    display:block;
    height:300px;
    width:300px;
}
</style>

کلاس فرضی بالا، برای لایه ای که از این کلاس برای آن استفاده می شود، سه خط به صورت solid در سمت بالا، چپ و راست ترسیم خواهد کرد و در پائین لایه، از ویژگی border-bottom پیروی کرده و خط را به صورت double ایجاد می کند.
مثالی دیگر:

<style type="text/css">
#block{
    border-top:#333 solid medium;
    border-bottom:#666 dashed thin;
    border-left:#999 dotted thick;
    border-right:#CCC inset 1px;
    display:table;
    height:350px;
    width:500px;
}
</style>

اگر آی دی بالا را در یک صفحه html به یک بلاک نسبت دهید، خواهید دید که اضلاع مختلف بلاک، با خطوط متفاوت (از لحاظ نوع، رنگ و اندازه) تنظیم شده است؛ البته این نوع استایل نویسی صرفا جنبه آموزشی دارد و ممکن است در طراحی واقعی، تنها از چند نوع خاص از خطوط استفاده شود.
علاوه بر این، سه پارامتر color، style و width را می توان به صورت جداگانه نیز برای خطوط در css تعریف کرد، البته این روش همیشه هم ضروری نیست و با شیوه مختصر نویسی نیز می توان به راحتی خطوط مختلف را ترسیم کرد، اما در مواقعی ممکن است استفاده از این سبک کاربرد داشته باشد؛ بدین منظور از سه خاصیت ذکر شده به صورت زیر استفاده می شود:
- border-width (یا به شیوه ترکیبی به صورت به فرض border-bottom-width): برای تعیین عرض خطوط.
- border-color (یا به شیوه ترکیبی به صورت به فرض border-top-color): برای تعیین رنگ خطوط.
- border-style (یا به شیوه ترکیبی به صورت به فرض border-left-style): برای تعیین نوع خطوط.
به مثال زیر توجه کنید.

<style type="text/css">
#block{
    border:#6C6 solid;
    border-width:2px;
    display:block;
    height:300px;
    width:300px;
}
</style>

همچنین مثالی دیگر:

<style type="text/css">
#block{
    border-color:#06C;
    border-style:solid;
    border-width:5px;
    display:block;
    height:300px;
    width:300px;
}
</style>

و همچنین مثال زیر:

<style type="text/css">
#block{
    border-color:#06C #666 #060 #F90;
    border-style:solid dotted double inset;
    border-width:5px 3px medium thin;
    display:block;
    height:300px;
    width:300px;
}
</style>

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

اگرچه ترسیم خطوط با border در css در بیشتر موارد نیازهایمان را در طراحی صفحات وب مرتفع می کند، اما قدرت css از این هم فراتر رفته و ورای خطوط border امکان ایجاد خطوط دیگری را نیز می دهد که به آنها outline می گویند، همان طور که از نام آن پیدا است، outline برای ایجاد خطوط (فراتر از border) به کار گرفته می شود، استفاده از این قابلیت معمولا به جهت برجسته نمودن یا تنظیم موقعیت یک بلاک کاربرد دارد، البته این ویژگی در مقایسه با border از بیشتر خاصیت های آن استفاده می کند (به جزء موارد مربوط به جهت های مختلف left، right، top و bottom)، لذا اگر نحوه کار border را به درستی فرا بگیرید، تنظیم خطوط  outline چندان مبهم نخواهد بود؛ تنها تفاوت بین border و outline در این است که اندازه border جزء عنصری که از آن استفاده می کند محسوب می شود (و به اندازه آن عنصر اضافه می شود)، اما اندازه outline مستقل بوده و جزء عنصر وابسته نیست.
به مثال زیر توجه کنید.

<style type="text/css">
#block{
    border:8px solid #69F;
    outline:solid 8px #F00;
    display:block;
    height:50px;
    width:100px;
}
</style>

برای دیدن پیش نمایش مثال ها، به انتهای این مطلب مراجعه کنید.
از آنجایی که تنظیمات outline کاملا مشابه با border است (به جزء موارد مربوط به جهت های مختلف left، right، top و bottom)، در اینجا صرفا به ذکر چند مثال بسنده می کنیم .

<style type="text/css">
.block{
    outline:inset #999 thick;
    display:block;
    height:500px;
    width:200px;
}
</style>

مثالی دیگر:

<style type="text/css">
.block{
    border:#36F dotted 10px;
    outline:#CCC 10px;
    outline-style:solid;
    display:block;
    height:500px;
    width:200px;
}
</style>

و همچنین مثال زیر:

<style type="text/css">
.block{
    border:#333 thick solid;
    outline-color:#09C;
    outline-style:ridge;
    outline-width:thick;
    display:block;
    height:100px;
    width:100px;
}
</style>

مثال و پیش نمایش آنلاین

برای آشنایی بیشتر با نحوه کار border و outline می توانید از مثال های زیر و پیش نمایش آنلاین آن استفاده نمائید.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | کار با خطوط در css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.block{
    border:#333 thick solid;
    display:block;
    height:100px;
    width:100px;
}
.block-dot{
    border:#F60 2px dotted;
    display:block;
    height:100px;
    width:100px;
}
.block-multi{
    border-bottom:#666 dashed 2px;
    border-top:#F60 solid 2px;
    border-left:#9C0 dotted 2px;
    border-right:#69F double;
    display:block;
    height:100px;
    width:100px;
}
.outblock{
    border:#333 thick solid;
    outline:#090 thick dashed;
    display:block;
    height:100px;
    width:100px;
}
.outblock-dot{
    border:#F60 2px dotted;
    outline:#F00 2px solid;
    display:block;
    height:100px;
    width:100px;
}
.outblock-multi{
    border-bottom:#666 dashed 2px;
    border-top:#F60 solid 2px;
    border-left:#9C0 dotted 2px;
    border-right:#69F double;
    outline-color:#CCC;
    outline-style:double;
    outline-width:thick;
    display:block;
    height:100px;
    width:100px;
}
</style>
</head>
<body>
استفاده از border برای ترسیم خطوط در یک بلاک div به صورت solid:<br /><br />
<div class="block">
</div>
<hr />
استفاده از border برای ترسیم خطوط در یک بلاک div به صورت dotted:<br /><br />
<div class="block-dot">
</div>
<hr />
استفاده از border برای ترسیم خطوط در یک بلاک div به صورت چندگانه:<br /><br />
<div class="block-multi">
</div>
<hr />
استفاده از border و outline برای ترسیم خطوط در یک بلاک div به صورت solid و dashed:<br /><br />
<div class="outblock">
</div>
<hr />
استفاده از border و outline برای ترسیم خطوط در یک بلاک div به صورت dotted و solid:<br /><br />
<div class="outblock-dot">
</div>
<hr />
استفاده از border و outline برای ترسیم خطوط در یک بلاک div به صورت چندگانه:<br /><br />
<div class="outblock-multi">
</div>
</body>
</html>

نظرات شما عزیزان:

نام :

آدرس ایمیل:

وب سایت/بلاگ :

متن پیام:

نظر خصوصی

 کد را وارد نمایید:

 

 

 

عکس شما

آپلود عکس دلخواه: