آموزش خواص پیشرفته CSS

آموزش کامل و درست و استفاده ی بهینه از خواص پیشرفته ی css که در مقالات این بخش گفته میشود، میتواند تفاوت را در طراحی حرفه ای و ساده رقم بزند.

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

در این بخش از آموزش css ، ویژگی Overflow را آموزش میدهیم.

در صورتی که محتوای یک عنصر سر ریز کند با این ویژگی میتوانید مشخص کنید که بعد از سرریز شدن چه اتفاقی بیفتد.

در مثال بالا ، در صورتی که ارتفاع و عرض محتوای داخل div بیشتر از مقدار طول و عرض تعیین شده شود ، div بصورت اسکرول نمایش داده میشود.

مقادیری که میتوانید در این خصوصیت استفاده کنید :

visible : حالت پیش فرض است که بصورت معمولی نمایش داده می شود.

hidden : در این حالت در صورتی که محتوا از طول و عرض عنصر تجاوز کند ، نمایش داده نمیشود.

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

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

این ویژگی درتمام مرورگرها پشتیبانی میشود.

در این بخش از آموزش css به توضیح خواص مربوط به Position میپردازیم.

با استفاده از ویژگی  Position    موقعیت عنصر در صفحه را مشخص کنید.همچنین میتوانید یک عنصر را پشت عنصر دیگر قرار دهید و اینکه چه اتفاقی بیفتد زمانی که محتوای یک عنصر بیش از اندازه بزرگ است.

عناصری که از ویژگی Position استفاده میکنند،ویژگی های زیر را نیز میتوانند داشته باشند.

1. top
2. bottom
3. left
4. right

چهار روش مختلف برای موقعیت دهی عناصر در صفحه وجود دارد:

Static Positioning
تمام عناصر در HTML   در حالت پیش فرض به صورت استاتیک موقعیت دهی شده اند.عناصری که از این ویژگی استفاده میکنند از ویژگی های top  و .. تبعیت نمیکنند.

Fixed Positioning
یک عنصر با موقعیت ثابت نسبت به پنجره مرورگر ، موقعیتش تنظیم میشود.عنصر زمانی که از این موقعیت استفاده کند، حتی زمانی  که پنجره وب سایت اسکرول بخورد ، عنصر حرکتی نمیکند. به دلیل اینکه اینترنت اکسپلورر بیشتر از سایر مرورگرها مورد استفاده قرار می گیرد و از ویژگی fixed در CSS پشتیبانی نمی کند زیاد به این ویژگی نمی پردازیم.

Relative Positioning
یک عنصر با این ویژگی نسبت به وضعیت جاری خود در صفحه موقعیت دهی میشود.

Absolute Positioning
مشخص می کند که عنصر مربوطه باید در محل تعیین شده به نمایش در آید نه محلی که کد آن نوشته شده است.

Overlapping Elements
زمانی که عناصر روی هم قرار میگیرند با این ویژگی میتوانید اولویت نمایش را برای عناصر مشخص کنید

z-index فقط در مواقعی که از ویژگیهای زیر استفاده شود،میتواند مورد استفاده قرار گیرد:
position:absolute, position:relative,position:fixed