| سپیده 313 |
جمعه ۱ اسفند ۱۳۹۳ ۰۷:۲۶ بعد از ظهر |
 آموزش css جلسه چهاردهم
css border
خصوصیات مربوط به border (حاشیه) ها به شما امکان تعیین حالت border، رنگ آن و اندازه آن را می دهد.
border style
مشخصه border-style معین می کند چه نوع حاشیه ای نمایش داده شود.
در زیر مقادیر مشخصه border-style را مشاهده می کنید:
none: حاشیه ای را معین نمی کند.
dotted: حاشیه ی نقطه چین معین می کند.
solid: حاشیه ای ساده معین می کند.
double: دو حاشیه را معین می کند. عرض حاشیه ها با ارزش border-width برابر است.
groove: حاشیه ی سه بعدی شیاردار (حالت گودی) معین می کند. تاثیر بستگی به ارزش border-color دارد.
ridge: حاشیه ای سه بعدی و برآمده معین می کند. تاثیر بستگی به ارزش border-color دارد.
inset: حاشیه سه بعدی درون رفته را معین می کند. تاثیر بستگی به ارزش border-color دارد.
outset: حاشیه سه بعدی برون آمده معین می کند. تاثیر بستگی به ارزش border-color دارد.
border width
مشخصه border-width اندازه ضخامت border (حاشیه) را تعیین می کند.
مقادیر مشخصۀ border-width به دوصورت است:
یا از مقادیر پیکسل استفاده می کنیم
و یا از سه مقدار thin (نازک) ، medium (متوسط) ، thick (ضخیم)
نکته: صفت border-width به تنهایی کار نمی کند، شما باید ابتدا border-style را تعیین کرده باشید.
<html>
<head>
<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>
</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> |
border color
مشخصه border-color برای تعیین رنگ border استفاده می شود.
رنگ موردنظر با سه روش انتخاب می شود:
نام رنگ مانند "green"
استفاده از مقدار RGB مانند "(rgb(255,0,0"
استفاده از مقادیر هگزادسیمال مانند "0000ff#"
نکته: صفت border-color به تنهایی کار نمی کند، شما باید ابتدا border-style را تعیین کرده باشید.
<html>
<head>
<style>
p.one {
border-style: dotted;
border-color: blue;
}
p.two {
border-style: solid;
border-color: #98bf21;
}
</style>
</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> |
Border - Individual sides
در css این امکان وجود دارد که از border های مختلف در هر کدام از اطراف border ها استفاده کنید.
<html>
<head>
<style>
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
</style>
</head>
<body>
<p>2 different border styles.
one style is solid and another one is dotted</p>
</body>
</html> |
border-top-style: حالت حاشیه ی بالای border
border-right-style: حالت حاشیه ی سمت راست border
border-bottom-style: حالت حاشیه ی پایین border
border-left-style: حالت حاشیه ی سمت چپ border
مثال بالا می تواند در یک مشخصه border-style به تنهایی نیز قرار بگیرد؛ و تنها با یک خط می توان حالت های بالا را بر روی border اعمال نمود.
<html>
<head>
<style>
p {
border-style: dotted solid;
}
</style>
</head>
<body>
<p>2 different border styles.</p>
one style is solid and another one is dotted
</body>
</html> |
حالت های دیگر border نظیر groove, ridge, inset, outset, double را نیز با جایگذاری آزمایش کنید و نتیجه را ببینید.
آزمایش کدها
http://html.l1l.ir/
بهتره که توی سیستمون نرم افزار dreamweaver را نصب کنید و از اونجا اجرا کنید تا همه چیز خوب دستتون بیاد
 |