دستور border در css

هدایت عباسی آموزش CSS

آموزش ویدئویی دستور border در css

در این فیلم و آموزش ویدئویی با دستور border در css شامل border-style و border-color و border-width و border-bottom آشنا می شوید.

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

آموزش کامل دستور border در css شامل border-style و border-color و border-width و border-bottom و سایه دادن به کادر و گرد کردن کادر و غیره.

دستور border

در این بخش از آموزش css از تاپ سایت 98 به سراغ دستور border می رویم.

دستور border در css برای قرار دادن کادر دور متن ، باکس یا صفحه بکار می رود.

دستور border یکی از دستورات مهمی است که در بیشتر طراحی قالب سایت بکار می رود.

با استفاده از دستور border می توانیم کادرهای مختلفی را ایجاد کنیم.

کادر در css دارای ویژگی های مختلفی است مانند رنگ کادر ، اندازه کادر ، نوع خط کادر.

حال به سراغ ویژگی های مختلف میرویم.

در زیر یک مثال از دستور boder را می بینید.

کد html زیر را می توانید در یک فایل html قرار داده و ذخیره و اجرا کنید و نتیجه را ببینید. کدها همه تست شده میباشند.

<!DOCTYPE html>
<html>
<head>
<title>topsite98</title>
</head>
<body>
<h1>sh711.com</h1>
<p style="border-style:dotted; border-width: 6px; border-color: orangered">TopSite98</p>
</body>
</html>

دستور border-style

با دستور border-style می توانیم نوع خط کادر را مشخص کنیم.

کادرها در css می توانند خط های صاف ، نقطه چین و غیره داشته باشند.

در دستور border-style کادرهای مختلفی وجود دارد. در مثال بالا با نوع نقطه چین یا dotted آشنا شدید.

در دستور border-style می توانید از حالت های solid و dotted و groove و dashed و double و غیره استفاده کرد.

مثال زیر را ببینید.

<h1 style="border-style: dashed">TopSite98</h1>

دستور border-width

با دستور border-width می توانیم ضخامت کادر را مشخص کنیم.

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

در هر پروژه ای می توانیم از کادر با نوع مناسب و اندازه و ضخامت مناسب استفاده کرد.

<h1 style="border-style: groove;border-width: 3px">TopSite98</h1>
<h1 style="border-style: dashed;border-width: 3px">TopSite98</h1>

دستور Border-color

دستور Border-color برای مشخص کردن رنگ کادر بکار میرود.

رنگ کادر را می توانیم با نام رنگ آن یا hex مشخص کنیم.

مثال زیر را ببینید در h1 اول رنگ قرمز و در دومی رنگ آبی میباشد.

<h1 style="border-style: groove;border-width: 3px;border-color: red">TopSite98</h1>
<h1 style="border-style: dashed;border-width: 3px;border-color: blue">TopSite98</h1>

ایجاد کادر با css

برای ساخت و ایجاد کادر با css می توانیم از دستور border بصورت جداگانه مانند بالا استفاده کنیم یا اینکه همه موارد را در یک خط بنویسیم.

در زیر دو کادر را ایجاد کرده ایم.

همان طور که مشاهده میکنید همه موارد را در یک خط نوشته ایم.

<h1 style="border: groove 3px red">TopSite98</h1>
<h1 style="border: dashed 3px blue">TopSite98</h1>

گرد کردن گوشه های کادر

گرد کردن گوشه های کادر با استفاده از css و دستور border-radius را مشاهده می کنید.

در مثال زیر با استفاده از دستور border-radius گوشه ها را به اندازه 10 پیکسل گرد کردیم.

<h1 style="border: solid 3px red; border-radius: 10px">TopSite98</h1>

کشیدن خط دور متن یا باکس

برای کشیدن خط دور متن یا باکس می توانیم از دستور border و به شکل زیر استفاده کنیم.

ما می توانیم بجای اینکه یک کادر دور متن یا باکس بیاندازیم فقط خط پایین یا بالای آن را بکشیم.

برای کشیدن خط پایین کادر از دستور boder-bottom استفاده می کنیم.

برای کشیدن خط بالای کادر از دستور boder-top استفاده می کنیم.

برای کشیدن خط سمت چپ کادر از دستور boder-left استفاده می کنیم.

برای کشیدن خط سمت راست کادر از دستور boder-right استفاده می کنیم.

<h1 style="border-bottom: solid 3px red">TopSite98</h1>
<span style="border-left:solid 3px red">TopSite98</span>
<h1 style="border-top: solid 3px red">TopSite98</h1>
<span style="border-right: solid 3px red">TopSite98</span>