آموزش CSS بصورت کاملا تصویری از مقدماتی تا پیشرفته – جلسه دوازدهم

آموزش CSS

آموزش CSS

مقدمه ای کوتاه بر معرفی CSS : شیوه‌نامهٔ آبشاری یا روی‌انداز آبشاری سَبْک یا سی‌اس‌اس (به انگلیسی: CSS: Cascading Style Sheets) در کنار اچ‌تی‌ام‌ال هستهٔ فناوری ساخت صفحه‌های وب هستند. سی‌اس‌اس روشی ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها) بر صفحه‌های وب است.

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

بیشترین استفاده‌ای که از این زبان در حال حاضر می‌شود مشخص کردن سبک صفحهٔ وب اچ‌تی‌ام‌ال و اکس‌اچ‌تی‌ام‌ال است ولی آن را می‌توان بر هر نوع مستند اکس‌ام‌ال از جمله اس‌وی‌جی و اکس‌یوال اعمال کرد. نگهداری و تغییر مشخصات سی‌اس‌اس به عهدهٔ کنسرسیوم وب جهانگستر است.

⬛️ شروع آموزش جلسه ۱۲ یادگیری زبان CSS :

🔴 خاصیت Position در CSS :

موقعیت عناصر در صفحه، بعضی مواقع فریب دهنده است!

کدام عنصر، جلو نمایش داده شود!

عناصر می توانند روی یکدیگر قرار بگیرند!

⬅️ موقعیت عناصر HTML در صفحه :

خصوصیات مربوط به موقعیت در CSS به شما اجازه می دهد تا موقعیت یک عنصر را تغییر داده(position)، یا مکان یک عنصر را پشت دیگر عناصر قرار دهید(z-index) و یا مشخص کنید، زمانی که محتوای یک عنصر خیلی بزرگ شد، چه اتفاقی بیافتد(overflow)

موقعیت عناصر در صفحه با خصوصیات top و bottom و left و یا right تنظیم می شود، اما این خصوصیات کار نخواهند کرد مگر اینکه ابتدا خصوصیت position تنظیم شود و همچنین خصوصیات ذکر شده با توجه به روش موقعیت دهی، به صورت متفاوت عمل خواهند کرد.

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

  1. position:static – موقعیت عنصر در همان جایی که کد آنها را می نویسید دیده می شود.
  2. position:fixed – موقعیت عنصر حتی در صورتی که به بالا و پایین صفحه برویم(scrolled) یا اندازه پنجره مرورگر را تغییردهیم، در همان موقعیت قبلی باقی می ماند.
  3. position:relative – یک عنصر نسبت به مکان عادی خودش، موقعیت دهی می شود.
  4. position:absolute – موقعیت عنصر در هر مکانی نسبت به بالا، راست، پایین یا چپ صفحه که بخواهیم نمایش داده می شود.

۱- Static :

موقعیت عناصر HTML در صفحه، به صورت پیشفرض static است. اگر موقعیت یک عنصر با مقدار static تنظیم شود، همیشه مطابق جریان معمول نمایش داده می شود یا به عبارتی در همان جایی که کد آن قرار دارد نمایش داده می شود.

توجه: با تنظیم خصوصیت position با مقدار “static”، خصوصیات top و bottom و right و left اثری نخواهند داشت.

۲- fixed :

یک عنصر با موقعیت ثابت(fixed) در واقع نسبت به پنجره مرورگر، موقعیت دهی می شود.

موقعیت عنصر حتی در صورتی که به بالا و پایین صفحه برویم(scrolled) یا اندازه پنجره مرورگر را تغییر دهیم، در همان موقعیت قبلی باقی می ماند

 3- Relative :

یک عنصر نسبت به مکان عادی خودش، موقعیت دهی می شود.

عنصری که به صورت نسبی (Relative) موقعیت دهی شده است، می تواند روی دیگر عناصر قرار بگیرد، اما مکان عادی عنصر همچنان رزور شده باقی می ماند.

 

۴- Absolute :

عنصری که به صورت Absolute موقعیت دهی می شود، در واقع از حالت عادی خارج شده است. و در HTML عنصری که اینگونه رفتار کند وجود ندارد.

عنصری که به صورت Absolute موقعیت دهی شده، می تواند روی دیگر عناصر قرار بگیرند.

مشاهده جلسات قبل و بعد یادگیری CSS :

جلسه ۱۱

جلسه ۱۳

بهزاد صحرانورد
۸ دی ۱۳۹۶
165 بازدید

 برچسب ها: