در آموزش css جلسه قبل تعدادی از properties ها را مورد برسی قرار دادیم در این جلسه به ادامه انها میپردازم در این جلسه به توضیح خصوصیات  outline و position در css می پردازیم.

مبحث دهم : Outline

outline ها به دور حاشیه ها کشیده میشوند و در حقیقت یک حاشیه دیگر را برای تگ ، به وجود می آورد . تفاوت outline ها با حاشیه ها، فضایی که اشغال میکنند جزء فضای تگ محسوب نمی شود و در صورتی که مقادیر این قاعده را بپذیرد و  برابر با transparent باشد در این حالت برای حاشیه تگ ، رنگی در نظر گرفته نمی شود اما همچنان فضایی را به میزان مقدار border-width که برای تگ تعیین شده است اشغال می کند.

خاصیت outline دارای مقادیر زیر است:

outline-color : این مقدار رنگ outline را که به دور حاشیه کشیده میشود تعیین می نماید.

outline-style : این مقدار طرح و دیزاین outline را که به دور حاشیه کشیده میشود تعیین می کند  و تمام طرح ها و مقادیر که در border-style بود میتواند در اینجا نیز استفاده نمایید.

outline-width : این مقدار پهنای outline را که به دور حاشیه کشیده میشود تعیین می نماید.

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

outline:{[outline-width] [outline-style] [outline-color] | inherit};

مبحث یازدهم : position

خاصیت position  از جمله خاصیت های مهم می باشد که با استفاده از این خاصیت می توانیم مکان یک عنصر را  از نظر موقعیت، به صورت پیکسلی تنظیم نماییم و یا بعضی مواقع لازم است که چند لایه را روی هم قرار دهیم که در این موقه از خاصیت position استفاده میکنیم.

خاصیت position  شامل موارد زیر است :

static :

در صورت استفاده از این مقدار حالت پیش فرض مرور گر را لحاظ می کنیم، مقدار خود position را خنثی می کند.

relative :

 این مقدار زمانی استفاده میشود که بخواهید خواصیت های bottom و left و right را بکار ببریم و همچنین این مقدار را برای عنصر والد ، عنصر فرزند قرار دهید که مقدار position  ان عنصر فرزند absolute باشد.

Absolute :

زمانی که از این مقدار استفاده می کنید، عنصر در گوشه کادر عنصر والد قرار می گیرد ( عنصر والدی که مقدار Relative را داشته باشد) در صورتی که عناصر والد آن خاصیت position و یا مقدار Relative  را نداشته باشد ، عنصر مورد نظر body  را عنصر والد در نظر میگیرد. همچنین عنصری که مقدار absolute را دارد روی همه ی عناصر قرار میگیرد.

اگر چند عنصر این مقدار را داشته باشند با z-index ترتیب قرار گیری عناصر روی هم را تعیین می کنید.

fixed :  این مقدار زمانی استفاده میشود که خواسته باشیم یک پنجره را در مرورگر ثابت قرار دهیم یعنی حتی با اسکرول صفحه هم عنصر حرکت نمی کند و ثابت باقی می ماند.

initial : مقدار پیش فرض مرورگر است.

inherit : در صورت استفاده از این مقدار مرورگر مقدار عنصر والد را به عنصر فرزند اختصاص می دهد.

مثال:

اگر عنصر والد مقدار absolute  را داشته باش ، عنصر فرزند هم مقدار inherit را داشته باشد مقدار  absolute را از عنصر والد به ارث می برد.

خاصیت های bottom , left , right , top شامل موارد زیر می باشد.

قبل از استفاده از مقادیر باید خاصیت position را استفاده کنید ،البته برای کار با این خاصیت ها به صورت معمولی از position با مقادیر relative استفاده می کنیم.

top : این مقدار فاصله عنصر را از بالا تنظیم می کند.

Right : این مقدار فاصله عنصر را از راست تنظیم می کند.

bottom : این مقدار فاصله عنصر را از پایین تنظیم می کند.

left : این مقدار فاصله عنصر را از چپ تنظیم می کند.

z-index : خاصیت z-index زمانی استفاده می شود که خواسته باشید چند لایه را روی هم قرار دهیم. در کد زیر خاصیت های z-index و position استفاده گردیده.

کد Html:

<div class="main">
<div class="div1">
    Relative </div>
</div>

کد css :

.main{width:400px;
      height:400px;
      backgrand-color:pink;
      padding:0px;
      margin :0px;
}
.div{width:250px;
     height:250px;
     font:25/25px tahoma;
     text-align:center;
     color:#fffffff;
     backgrand-color:blue;
     position:relative;
     top:20px;
     left:20px;   
}

شرح کد بالا:در کد بالا ما اولآ صفحه را(body) با رنگ ابی درست کردیم. البته فقط برای درک بهتر و یک باکس دیگر به نام div1 درست کردیم برای اینکه این باکس را به مکان دلخواه انتقال دهیم.

خوب حالا چگونه یک باکس دیگری را بالای باکس ابی قرار دهیم؟

به کد زیر دقت کنید

کد Html : 

<div class="main"> 
<div class="div1"> Relative </div>
<div class="div2"> Absolute </div>
</div>

کد css : 

.main{width:400px;
      height:400px;
      backgrand-color:pink;
      padding:0px;
      margin :0px;
}
.div{width:250px;
     height:250px;
     font:25/25px tahoma;
     text-align:center;
     color:#fffffff;
     backgrand-color:blue;
     position:relative;
     top:20px;
     left:20px;   
}
.div2{width:180px;
     height:180px;
     font:25/25px tahoma;
     color:#000000;;
     backgrand-color:yellow;
     position:Absolute;
     top:30px;
     left:30px;
}

در کد بالا ما باکس زرد رنگی را به عنوان فرزند داخل باکس ابی (عنصر والد) قرار دادیم و چون نسبت به باکس والد میخواهیم موقعیت دهی کنیم باید مقدار Absolute را برایش بدهیم و در نتیجه شکل زیر به وجود می اید:

خوب حالا دیگر این باکس ها را توسعه می دهیم یعنی یک باکس دیگر (سرخ) را میان باکس ابی و زرد اضافه نماییم.برای انجام این کار چون باکس سرخ رنگ عنصر فرزند باکس ابی رنگ می شود باید مقدار Absolute برایش بدهیم و برای اینکه بتوانیم باکس سرخ رنگ را زیر باکس زرد قرار بدهیم باید از z-index استفاده کنیم.

کد Html :  

<div class="main"> 
<div class="div1"> Relative </div>
<div class="div2"> Absolute1 </div>
<div class="div3"> Absolute2 </div>
</div>

کد css : 

.main{width:400px;
      height:400px;
      backgrand-color:pink;
      padding:0px;
      margin :0px;
}
.div{width:250px;
     height:250px;
     font:25/25px tahoma;
     text-align:center;
     color:#fffffff;
     backgrand-color:blue;
     position:relative;
     top:20px;
     left:20px;   
}
.div2{width:180px;
     height:180px;
     font:25/25px tahoma;
     color:#000000;;
     backgrand-color:yellow;
     position:Absolute;
     top:30px;
     left:30px;
     z-index:10;
}
.div3{width:180px;
     height:180px;
     font:25/25px tahoma;
     color:#ffffff;
     backgrand-color:red;
     position:Absolute;
     top:50px;
     left:50px;
     z-index:1;
}

در کد بالا ما به باکس زرد رنگ z-index مقدار 10 دادیم و به باکس سرخ z-index مقدار 1 دادیم ،در این صورت باکس زرد رنگ بر روی باکس سرخ قرار میگیرد. پس به این نتیجه میرسیم که هر عنصر که مقدار z-index آن زیاد باشد بالای عنصر می اید که مقدار z-index ان کمتر باشد شکل زیر حاصل کد بالاست:

اگر بخواهیم جاهای باکس زرد و سرخ رنگ را تغییر دهیم باید مقدار z-index های انها را تغییر دهیم.