انجمن یاران منتظر
عنوان موضوع ::: آموزش CSS، جلسه چهاردهم:: (css border)
نویسنده :سپیده 313


000080;">ffcc00;"> آموزش css جلسه چهاردهم
 


2f4f4f;">css border
000080;">خصوصیات مربوط به border (حاشیه) ها به شما امکان تعیین حالت border، رنگ آن و اندازه آن را می دهد.

008000;">border style
000080;">000080;">ffcc00;"> مشخصه 9900cc;">border-style000080;"> معین می کند چه نوع حاشیه ای نمایش داده شود.

000080;">ffcc00;"> در زیر مقادیر مشخصه border-style را مشاهده می کنید:

008080;">none000080;">: حاشیه ای را معین نمی کند.

008080;">dotted000080;">: حاشیه ی نقطه چین معین می کند.

008080;">solid000080;">: حاشیه ای ساده معین می کند.

008080;">double000080;">: دو حاشیه را معین می کند. عرض حاشیه ها با ارزش border-width برابر است.

008080;">groove000080;">: حاشیه ی سه بعدی شیاردار (حالت گودی) معین می کند. تاثیر بستگی به ارزش border-color دارد.

008080;">ridge000080;">: حاشیه ای سه بعدی و برآمده معین می کند. تاثیر بستگی به ارزش border-color دارد.

008080;">inset000080;">: حاشیه سه بعدی درون رفته را معین می کند. تاثیر بستگی به ارزش border-color دارد.

008080;">outset000080;">: حاشیه سه بعدی برون آمده معین می کند. تاثیر بستگی به ارزش border-color دارد.


008000;">border width
000080;">000080;">ffcc00;"> مشخصه 9900cc;">border-width 000080;">اندازه ضخامت border (حاشیه) را تعیین می کند.
مقادیر مشخصۀ border-width به دوصورت است:
یا از مقادیر 008080;">پیکسل 000080;">استفاده می کنیم
و یا از سه مقدار 008080;">thin 000080;">(نازک) ، 008080;">medium 000080;">(متوسط) ، 008080;">thick 000080;">(ضخیم)

نکته: 000080;">صفت border-width به تنهایی کار نمی کند، شما باید ابتدا border-style را تعیین کرده باشید.

 

000080;"><html>
<head>
800080;"><style>
p.one {
    border-style: solid;
    border-width: 7px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: solid;
    border-width: 1px;
}
</style>
000080;"></head>
<body>

<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p><b>Note:</b> The "border-width" property does not work if it is used alone. You must add the "border-style" property to set the borders first.</p>

</body>
</html>


000080;">


008000;">border color
000080;">000080;">ffcc00;"> مشخصه 9900cc;">border-color000080;"> برای تعیین رنگ border استفاده می شود.
رنگ موردنظر با سه روش انتخاب می شود:
000080;">ffcc00;">نام رنگ مانند "green"
000080;">ffcc00;">استفاده از مقدار RGB مانند "(rgb(255,0,0"
000080;">ffcc00;">استفاده از مقادیر هگزادسیمال مانند "0000ff#"

000080;">ffcc00;">نکته: صفت border-color به تنهایی کار نمی کند، شما باید ابتدا border-style را تعیین کرده باشید.

 

000080;"><html>
<head>
800080;"><style>
p.one {
    border-style: dotted;
    border-color: blue;
}

p.two {
    border-style: solid;
    border-color: #98bf21;
}
</style>
000080;"></head>
<body>

<p class="one">A dotted blue border</p>
<p class="two">A solid green border</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>

</body>
</html>


000080;">
 

008000;">Border - Individual sides

000080;"> در css این امکان وجود دارد که از border های مختلف در هر کدام از اطراف border  ها استفاده کنید.

000080;"><html>
<head>
800080;"><style>
p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}
</style>
000080;"></head>
<body>

<p>2 different border styles.
one style is solid and another one is dotted</p>

</body>
</html>

000080;">   008080;">border-top-style:000080;"> حالت حاشیه ی بالای border
   008080;">border-right-style:000080;"> حالت حاشیه ی سمت راست border
   000080;"> 008080;">border-bottom-style:000080;"> حالت حاشیه ی پایین border
   000080;"> 008080;">border-left-style:000080;"> حالت حاشیه ی سمت چپ border





000080;"> مثال بالا می تواند در یک مشخصه border-style به تنهایی نیز قرار بگیرد؛ و تنها با یک خط می توان حالت های بالا را بر روی border اعمال نمود.
 

000080;"><html>
<head>
800080;"><style>
p {
    border-style: dotted solid;
}
</style>
000080;"></head>
<body>

<p>2 different border styles.</p>
one style is solid and another one is dotted
</body>
</html>


000080;">


حالت های دیگر border نظیر groove, ridge, inset, outset, double را نیز با جایگذاری آزمایش کنید و نتیجه را ببینید.



008000;">آزمایش کدها
000080;">000080;">000080;">000080;">http://html.l1l.ir/

008000;">بهتره که توی سیستمون نرم افزار dreamweaver را نصب کنید و از اونجا اجرا کنید تا همه چیز خوب دستتون بیاد