آموزش گام به گام CSS – گام سوم



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

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

با درخواست فایل مورد نیاز خود به غنی کردن آرشیو سایت کمک کنید

خواص مربوط به سرریزی Overflow عناصر در CSS

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

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

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

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

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

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

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

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

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

محل قرارگیری عناصر – خواص مربوط به Position

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

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

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

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

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

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

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

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

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

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

float

در این بخش از آموزش css به توضیح ویژگی محل قرارگیری عناصر – خواص Clear , Float میپردازیم.

با این ویژگی از css موقعیت یک عنصررا می توانید سمت چپ یا راست تنظیم کنید.

یکی از پرکاربردترین ویژگی ها در css میباشد. بادادن این ویژگی به تگ ها شما میتوانید سایت های چند ستونه ایجاد کنید.

این خاصیت یکی از پایه های اساسی در طراحی قالب بر اساس div می باشد.

وقتی به یک عنصر در کد خود float به سمت چپ یا راست میدهید ، عنصر مورد نظر به آن سمت خاص میرود و بقیه عنصر هایی که بعد از تگ مذکور آمده اند و float ندارند به سمت مخالف رانده میشوند و اطراف عنصر مورد نظر قرار میگیرند.

clear

اگر عنصر ی بعد از عنصری که ویژگی float را دارد، خاصیت clear داشته باشد، اطراف عنصر ی که ویژگی float را دارد قرار نمی گیرد.

عنصر ی که خاصیت clear=both دارد و float نیز شده باشد، فقط عنصر هایی را که قبل از خودش آمده است، clear میکند . و عنصرهای بعدی را تحت تاثیر قرار نمیدهد

cursor
انواع مختلفی از نمایش مکان نما در صفحه را مشخص میکند.
زمانی که روی یک عنصری که مشخص کرده ایم میرویم مکان نما به شکل مورد نظر نشان داده میشود.

visibility

مخفی کردن عناصر در css با این ویژگی امکان پذیر است :

none
hidden

اگر به تگ های زیر این ویژگی را نسبت دهید تمامی عناصری که داخل آنها قرار میگیرد نیز از این ویژگی ارث میبرند :

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

<span>
<a>

display
این ویژگی مشخص میکند که چگونه یک عنصر نمایش داده می شود :

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

مقادیری که میتواند Display بگیرد:

اگر به یک DIV این خاصیت را بدهید، یعنی آن عنصر میتواند کل سطر خود را اشغال کند و مانند یک بلاک رفتار میکند و هیچ عنصر دیگری را در کنار خود جا نمی دهد. این خاصیت باعث میشود عنصر ما مثل تگ h1 عمل کند.

یعنی DIV در یک خط قرار گرفته که چندین عنصر در آن خط قرار داردند و باید بقیه عنصر ها را در کنار خود جا دهد و بپذیرد .

یعنی عنصر نمایش داده نشود.

کاربردی مانند Display:inline دارد

هر یک از بلاک هایی که این خاصیت را دارا باشند بصورت یک آیتم نشون داده میشوند و یک بولت در کنارآن نمایش داده میشود. مانند تگ ul.

Opacity

با ویژگی Opacity میتوانید شفافیت تصاویر را تغییر دهید.

در مثال بالا زمانیکه opacity=40  تنظیم شده است ، تصویر کدر تر نمایش داده میشود و زمانیکه opacity=100 در نظر گرفته شده است تصویر به صورت کاملا شفاف نمایش داده میشود.این حالت زمانی اتفاق میفتد که img:hover  انجام گیرد.یعنی با زفتن ماوس روی تصویر عکس به صورت شفاف نمایش داده میشود.

 

 

 



سلام ، من مصطفی هستم ، فارغ التحصیل رشته مهندسی کامپیوتر-نرم افزار علاقه زیادی به برنامه نویسی و بخصوص PHP دارم ، بنده این وب سایت را به منظور دسترسی هموطنان عزیز به محتواهای مفید در موضوعات موجود در سایت راه اندازی کردم ، از دوستان میخواهم با نظرات خود دلگرمی برای بنده باشند و اگر فایلی نیاز دارند ، حتماً از طریق فرم درخواست ، درخواست خود را ارسال کنند.

ارسال نظر

*