campaign-edianeh-98

آموزش CSS (فصل نهم) : طریقه نمایش و لایه بندی عناصر



visibility  
mode_comment   ۱۹

خصوصیت display

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

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

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

برای آشنایی با کاربرد بقیه مقادیر نیز میتونید به سایت W3Schools مراجعه کنید.

آدرس صفحه

خصوصیت z-index

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

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

    info نکته :

    IE6 و IE7 از z-index پشتیبانی می کنند اما با کمی اشکال.

    بسیار خب، با طریقه نمایش و لایه بندی عناصر در این جلسه آشنا شدیم، در جلسه بعدی ( دو ماه دیگه 😀 ) با سه خاصیت opacity ، visibility و cursor آشنا خواهیم شد

comment دیدگاه کاربران
hassan-wp

یا خدا !دو ماه دیگه چه خبره ؟ 😆

سجاد دریس

😀
شوخی کردم.

hassan-wp

دکت گرم بابا گفتیم !رفتی باز !
ایشا.. که آموزش ها سه روز سه روز آپدیت میشه دیگه

سجاد دریس

ایشالا

هومن رهنما

عالیست

nejadi

اییییییییییییییییییییییییییییییییول 😉

kian14

سلام آقا سجاد ممنون از آموزشاتون بسیار عالین
یه خواهش
میشه یه قالب کامل و خوب رو از اول تا آخر را همزمان با طراحی اون آموزش بدید
منظورم اینه که یه قالب خوب را از صفر شروع کنید به طراحی و نکته به نکته آموزش بدید تا کامل بشه خیلی خوبه من فکر میکنم اگر یه بار چنین آموزشی ببینیم یه چیز کاملی میاد دستمون و راحت میتونیم(حداقل خودم) یه قالب کامل و خوب طراحی کنیم.

سجاد دریس

سلام.
چشم،
ارائه چنین آموزشی توی برنامه سایت هست، ایشالا بعد از به پایان رسیدن، سری آموزشی css. سری آموزشی طراحی قالب رو هم شروع می کنیم، و با توجه به پیش نیاز هایی که بود ( html, css , javascript ) قول میدیم که آموزش طراحی یه قالب خوب رو خواهیم داشت

hassan-wp

منم موافقم اگه بشه خیلی عالی میشه که آموزش طراحی قالب را از صفر بگین

سجاد دریس

چشم./

kian14

دستتون درد نکنه

hassan-wp

چشمت بی بلا داداش! فقط یه خواهش دیگه هم داشتم! اگه میشه آموزش ها را یه کم سریعتر بزارید! به خدا روزی بالای ده بار میام سایت خوبتون! باز دست همتون درد نکنه خیلی خیلی خیلی گلین!

سجاد دریس

سلام.
هر چند کار خیلی سختی ازم میخوای 😀 اما باشه سعیمو میکنم زود زود مطالب جدید رو بذارم.

hassan-wp

سلام ای بابا بازم که تاخیر!

علی امینی

آقا سجاد خیلی به ما لطف کردی با این آموزشایی که میزاری.
در پناه حق باشی

meyti pugo

آقا من خیلی علاقه دارم توی بخش گرافیک برای شروع فتوشاپ آموزش قرار بدم.. بعدش ایلیستریتور و ایندیزاین..

سجاد دریس

سلام.
فرم همکاری رو پر کنید.

meyti pugo

یا شایدم فقط گرافیک وبسایت؟

سید مهدی

اَاَاَاَاَاَاَاَاَاَاَاَاَاَاَاَاَاَاَ. چه خبره!. من که سردرد گرفتم!. ولی نه یه چیزایی هم یاد گرفتما! 💡 🙄 😯 😯 😯

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.