جلسه سوم آموزش برنامه نویسی زبان css
در ادامه دستورات بکگراند، شما می توانید موقعیت تصویر را هنگام اسکرول مشخص کنید. یا تصویر همراه با اسکرول حرکت کند یا ثابت باشد. این کار با دستور. background-attachment امکان پذیر است. مقادیر آن می تواند scroll یا fixed باشد.
بعضی از دستور های css معمولا یک دستور کوتاه تر هم دارند. برای مثال این خانواده بکگراند را می توان با یک دستور اعمال کرد. به طوری که تمام مقادیر را پشت سر هم بنویسید. به مثال زیر توجه کنید.

<div class="myoutput">
این یک <br/>
متن چند خطی<br/>
برای نمایش<br/>
حالت اسکرول<br/>
چسبیده به <br/>
عکس بکگراند <br/>
می باشد<br/>
</div>
<style>
 div.myoutput
{
    background-image:url('https://efaraj-thumbnail.s3.ir-thr-at1.arvanstorage.ir/pictures/css_100x69.png');
    background-attachment:fixed;
    background-repeat:no-repeat;
    height:100px;
    oveflow-y:auto;
}
</style>

بعضی از دستور های css معمولا یک دستور کوتاه تر هم دارند. برای مثال این خانواده بکگراند را می توان با یک دستور اعمال کرد. به طوری که تمام مقادیر را پشت سر هم بنویسید. به مثال زیر توجه کنید.

body{
 background-color:#ffffff;
 background-image:url("img_tree.png");
 background-repeat:no-repeat;
 background-position:right top;
/* یا این مدل کوتاه شده */
background:#ffffff url("img_tree.png") no-repeat right top;
}

دستور دیگر از خانواده بکگراند مربوط به سایز آن است. مقادیر ممکن می تواند auto باشد. یا حالت cover داشته باشد. یا اندازه طول و عرض عکس را بدهیم. و یا مقدار contain را بدهیم.
حالت cover برای پر کردن کامل تگ

<div class="myoutput">
این یک <br/>
متن چند خطی<br/>
برای نمایش<br/>
حالت اسکرول<br/>
چسبیده به <br/>
عکس بکگراند <br/>
می باشد<br/>
</div>
<style>
div.myoutput
{
    background-image:url('https://efaraj.s3.ir-thr-at1.arvanstorage.ir/pictures/css.png');
    background-attachment:fixed;
    background-size:cover;
    background-repeat:no-repeat;
}
</style>

حالت contain

<div class="myoutput">
این یک <br/>
متن چند خطی<br/>
برای نمایش<br/>
حالت اسکرول<br/>
چسبیده به <br/>
عکس بکگراند <br/>
می باشد<br/>
</div>
<style>
div.myoutput
{
    background-image:url('https://efaraj.s3.ir-thr-at1.arvanstorage.ir/pictures/css.png');
    background-attachment:fixed;
    background-size:contain;
    background-repeat:no-repeat;
}
</style>

حالت size

<div class="myoutput">
این یک <br/>
متن چند خطی<br/>
برای نمایش<br/>
حالت اسکرول<br/>
چسبیده به <br/>
عکس بکگراند <br/>
می باشد<br/>
</div>
<style>
div.myoutput
{
    background-image:url('https://efaraj.s3.ir-thr-at1.arvanstorage.ir/pictures/css.png');
    background-size:200px 200px;
    background-repeat:no-repeat;
}
</style>

دستور دیگه background-origin است که نقطه شروع بکگراند را مشخص می کند. مقادیر این ویژگی شامل padding-box و border-box و content-box می باشد.
این مقادیر باعث می شود که تصویر بکگراند از نقطه شروع padding یا خود محتوا و یا حاشیه شروع شود.

دستور بعدی background-clip می باشد که میزان کشیدگی بکگراند را مشخص می کند.

مقدار های آن نیز مانند دستور قبلی شامل padding-box و border-box و content-box می باشد.
این دستور نیز کشیدگی را تا مرز حاشیه یا پس از آن یا محتوا اعمال خواهد کرد.

border

دستور بعدی برای تعیین مرز برای المان هاست. مانند دستور بکگراند border نیز حالت های مختلفی دارد.
اولین ویژگی مربوط به شکل این حاشیه است. برای مثال خط ساده یا نقطه چین یا خط و نقطه و سایر موارد که در زیر به آن اشاره شده است.

• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset
• none
• hidden
• mix

<div class="dotted">
dotted border
</div>
<div class="dashed">
dashed border
</div>
<div class="solid">
solid border
</div>
<div class="double">
double border
</div>
<div class="groove">
groove border
</div>
<div class="ridge">
ridge border
</div>
<div class="inset">
inset border
</div>
<div class="outset">
outset border
</div>
<div class="none">
none border
</div>
<div class="hidden">
hidden border
</div>
<div class="mix">
mix border of dashed and groove
</div>
<style>
div.dotted
{
    border-style:dotted;
}
div.dashed
{
    border-style:dashed;
}
div.solid
{
    border-style:solid;
}
div.double
{
    border-style:double;
}
div.groove
{
    border-style:groove;
}
div.ridge
{
    border-style:ridge;
}
div.inset
{
    border-style:inset;
}
div.outset
{
    border-style:outset;
}
div.none
{
    border-style:none;
}
div.hidden
{
    border-style:hidden;
}
div.mix
{
    border-style:mix;
}
.output6 div
{
    margin:10px;
    padding:10px;
    border-color:red;
}
</style>

border-width

دستور بعدی برای اندازه حاشیه است. که بر اساس پیکسل می باشد.

<div>
    3px border
</div>
<style>
div{
    border-style:solid;
    border-width:3px;
}
</style>

border-color

با دستور border-color می توانید رنگ را نیز مشخص کنید.رنگ دهی بر اساس همان مبحث رنگی که در گذشته صحبت شده است امکان پذیر است. همچنین می توانید هر ضلع حاشیه را یک رنگ خاص بزنید. برای این کار چهار رنگ باید برای این قسمت مشخص کنید.

<div>
    3px border
</div>
<style>
div{
    border-style:solid;
    border-color:brown;
    border-width:3px;
}
</style>