آموزش سی اس اس CSS

زمینه، پیرامون یا همان outline خطی است که دور المان ها و بیرون از بوردر بوجود می آید تا المان را "برجسته" کند.

پراپرتی های اوت لاین به شرح زیر است:

Outline Style

پراپرتی outline-style مشخص میکند که چه نوع بوردری نمایش داده شود.

مقادیری که شما مجاز به استفاده از آنها هستید به شرح زیر است:

• dotted - اوت لاینی به شکل نقطه تعریف میکند
• dashed - اوت لاینی به شکل خط چین تعریف میکند
• solid - اوت لاینی به شکل خط تعریف میکند
• double - اوت لاینی دوتایی تعریف میکند
• groove - اوت لاینی با شیار سه بعدی تعریف میکند. اثر آن بستگی به رنگ بورد دارد
• ridge - اوت لاینی لبه دار و سه بعدی تعریف میکند. اثر آن بستکی به رنگ بوردر دارد
• inset - اوت لاین inset سه بعدی تعریف میکند.اثر آن بستکی به رنگ بوردر دارد
• outset - اوت لاین outset سه بعدی تعریف میکند.اثر آن بستکی به رنگ بوردر دارد
• none - هیچ اوت لاینی تعریف نمیکند.
• hidden - یک اوت لاین مخفی تعریف میکند

مثال

 
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
p.none {outline-style: none;}
p.hidden {outline-style: hidden;}
 

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

اگر پراپرتی outline-style تعریف نشده باشد هیچ یک از پراپرتی های دیگر اوت لاین کار نخواهند کرد.

Outline Color

پراپرتی outline-color رنگ اوت لاین را مشخص میکند.

رنگ میتواند بصورت زیر تعریف شود:

• نام - نام رنگ نوشته میشود، مانند "red"
• HEX - مقدار hex نوشته میشود، مانند "#ff0000"
• RGB - مقدار RGB نوشته میشود، مانند "rgb(255,0,0)"
• invert - رنگ متضاد تعیین میشود (که باعث میشود تا مطمئن باشیم در همه حال اوت لاین مشخص خواهد بود)

مثال زیر اوت لاین های مختلف با رنگ های متفاوت را نشان میدهد. توجه داشته باشد که هر سه المان بوردر سیاه درون اوت لاین دارند:

 
p.ex1 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: red;
}
p.ex2 {
    border: 1px solid black;
    outline-style: double;
    outline-color: green;
}
p.ex3 {
    border: 1px solid black;
    outline-style: outset;
    outline-color: yellow;
}
 

مثال زیر استایل outline-color: invert را دارد که بدون توجه به رنگ پس زمینه اوت لاین متضاد دارد:

 
p.ex1 {
    border: 1px solid yellow;
    outline-style: solid;
    outline-color: invert;
}
 

Outline Width

پراپرتی outline-width اندازه اوتلاین را مشخص میکند.

اندازه اوت لاین میتواند بصورت پیکسل، سانتیمتر یا ... تعیین شود و یا با استفاده از سه مقدار از پیش تعریف شده تعیین شود:

• thin (typically 1px)
• medium (typically 3px)
• thick (typically 5px)

مثال

 
p.ex1 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: red;
    outline-width: thin;
}
p.ex2 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: red;
    outline-width: medium;
}
p.ex3 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: red;
    outline-width: thick;
}
p.ex4 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: red;
    outline-width: 4px;
}
 

Outline

همانطور که در مثالهای بالا ملاحظه فرمودید برای تعیین اوت لاین پراپرتی های مختلفی وچود دارد.

میتوان کدهای اوت لاین را را کوتاه کرد و تمامی پراپرتی های بوردر را داخل یک پراپرتی آورد.

پراپرتی کوتاه شده بوردر outline نام دارد.

• outline-width
• outline-style (اجباری)
• outline-color

مثال

 
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
 

Outline Offset

پراپرتی outline-offset فاصله ای بین اوت لاین و بوردر یک المان ایجاد میکند. فاصله بین المان و اوتلاین آن المان transparent است

مثال

 
p {
    margin: 30px;
    background: yellow;
    border: 1px solid black;
    outline: 1px solid red;
    outline-offset: 15px;
}