در این جلسه  طراحی سایت شما را با طریقه نمایش و لایه بندی عناصر آشنا می کنیم:

خصوصیت display

با استفاده از این خصوصیت می توان طریقه نمایش عناصر را تعیین کرد و یکی از ۲۲ مقدار زیر را می گیرد:

none , block , inline , inline-block , list-item , run-in , compact , table , table-row-gro
 up , table-header-group , table-footer-group , table-row , table-column-group , table-colum
 n
 , table-cell , table caption , ruby , ruby-base , ruby-text , ruby-base-group , rubu-text
 -group

پر کاربرد ترین مقادیر در بین این ۲۵ مقدار:

none : عدم نمایش عنصر (مخفی کردن)
Block : نمایش عنصر (اگر مخفی بود) و این صورت که یک خط خالی قبل و بعد از خود ایجاد خواھد کرد.
Inline : اگر این مقدار را به یک عنصر block بدھیم، خط قبل و بعد از خود را از بین میبرد.
item-List : عنصر را به شکل لیست درمی آورد ( مانند استفاده از تگ <li> )
برای آشنایی با کاربرد بقیه مقادیر نیز میتونید به سایت W3Schools مراجعه کنید.

لینک W3Schools

خصوصیت index-z

خاصیت index-z موقعیت عناصر را در طول محور نامرئی z کنترل می کند. مشروط به اینکه عناصر به صورت , absolute
relative و یا fixed موقعیت دھی شده باشند. قاعده کلی:

z-index: auto | integer

مقدار پیشفرض : auto
Integer :1, 2 ,3 ,4 ,5 …… n
در حالت auto اگر چند عنصر با یکدیگر تداخل داشته باشند، عنصری که آخر از ھمه در ترتیب عناصر فایل
HTML وارد شده در صفحه نمایش بالاتر قرار میگیرد ( نسبت به محور z که بر صفحه نمایش عمود است) و
باقی عناصر نیز به ھمین ترتیب گفته شده قرار خواھند گرفت ( در حالت auto عنصری که اول از ھمه وارد
شود در زیر سایر عناصر قرار خواھد گرفت). میتوان با تخصیص مقادیر integer به خاصیت index-z ترتیب قرار
گیری عناصر در راستای محور z را تغییر داد. عنصری که مقدار عددی بالاتری دارد بالا (مافوق) سایر عناصر در
صفحه نمایش داده خواد شد و ساید عناصر نیز به ترتیب بزرگی مقدار خود در صفحه ظاھر خواھند شد.
نکته : IE6 و IE7 از index-z پشتیبانی می کنند اما با کمی اشکال.
بسیار خب، با طریقه نمایش و لایه بندی عناصر در این جلسه آشنا شدیم، در جلسه بعدی
با سه خاصیت visibility ، opacity و cursor آشنا خواھیم شد

طراحی سایت اسپیناس همیشه سعی در استفاده از به روز ترین تکتینک ها و ابزارها در  طراحی سایت دارد  در اسپیناس از تکنولوژی ها روز دنیا مانند CSS3 , HTML5 , Jquery , JAVASCRIPT   در طراحی وب سایت استفاده می شود و همچنین زبانهایی مانند PHP , ASP  در شرکت اسپیناس مشتری مداری حرف اول را می زند

بارگذاری نوشته های مرتبط بیشتر
بارگذاری بیشتر در آموزش Css در طراحی سایت

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نوزده − 3 =

بررسی کنید

آموزش CSS (فصل بیستم) – آشنایی جلوه های ویژه ی CSS3

در این جلسه  طراحی سایت شما را با جلوه های ویژه ی CSS3 آشنا می کنیم: خاصیت transform شما م…