خانه / کامپیوتر / اموزش / آموزش CSS (قسمت ۶ : تنظیم طول و عرض عناصر)

آموزش CSS (قسمت ۶ : تنظیم طول و عرض عناصر)

عرض و ارتفاع با خاصیت width مشخص می شود. این مشخصه به ما امکان می دهد تا عرض یک بخش از صفحه را تعیین کنیم. برای مثال می توانیم با آن عرض یک div را تعیین کنیم. در مثال زیر برای div عرضی معادل ۲۰۰ پیکسل تعیین می کنیم :

نتیجه به صورت زیر خواهد بود :

این جمله پس از اینکه عرض آن از ۲۰۰ پیکسل بیشتر شد در سطرهای بعدی ادامه پیدا می کند.

مقادیری که برای پارامتر width قرار می دهید می تواند بر اساس پیکسل باشد که در این صورت باید پس از مقدار مربوطه حروف px که نشانه پیکسل است را بنویسید. مقادیر ممکن است بر اساس درصد باشند که در آن صورت باید علامت درصد ( % ) را پس از مقدار قرار دهید.

 

height : این پارامتر به ما اجازه می دهد تا ارتفاع بخش مشخصی را تعیین کنیم. برای مثال وقتی که ما این پارامتر را برای یک DIV استفاده می کنیم و مقدار آن را ۱۰۰ پیکسل قرار می دهیم تا وقتی که متن موجود در div از ۱۰۰ پیکسل کمتر ارتفاع دارد ارتفاع div 100 پیکسل خواهد بود. ولی وقتی که متن داخل div زیاد باشد و از ۱۰۰ پیکسل بیشتر شود در نتیجه ارتفاع div هم از ۱۰۰ تجاوز خواهد کرد تا همه متن موجود قابل خواندن باشد. به مثال زیر توجه کنید :

  • ابتدا هنگامی که ارتفاع متن از ارتفاع div کمتر است :
ارتفاع این متن از ۱۰۰ پیکسل کمتر است.

 

  • حالا هنگامی که ارتفاع متن از ارتفاع div بیشتر است :
ارتفاع این متن از ۱۰۰ پیکسل کمتر است.
ارتفاع این متن از ۱۰۰ پیکسل کمتر است.
ارتفاع این متن از ۱۰۰ پیکسل کمتر است.
ارتفاع این متن از ۱۰۰ پیکسل کمتر است.
ارتفاع این متن از ۱۰۰ پیکسل کمتر است.
ارتفاع این متن از ۱۰۰ پیکسل کمتر است.
ارتفاع این متن از ۱۰۰ پیکسل کمتر است.
ارتفاع این متن از ۱۰۰ پیکسل کمتر است.
ارتفاع این متن از ۱۰۰ پیکسل کمتر است.

 

 

 

اگر بخواهیم ارتفاع div همان ۱۰۰ پیکسل بماند و تغییر نکند باید از پارامتر overflow در استایل استفاده کنیم. این پارامتر به ما این امکان را می دهد که تعیین کنیم وقتی محتویات div از عرض یا ارتفاع div بزرگتر می شود چگونه نمایش داده شود. در اینجا برای پارامتر overflow از مقدار hidden استفاده می کنیم که تعیین می کند هر چیزی بزرگتر از عرض یا ارتفاع div نمایش داده نشود. به مثال زیر توجه کنید :

ارتفاع این متن از ۱۰۰ پیکسل کمتر است.
ارتفاع این متن از ۱۰۰ پیکسل کمتر است.
ارتفاع این متن از ۱۰۰ پیکسل کمتر است.
ارتفاع این متن از ۱۰۰ پیکسل کمتر است.
ارتفاع این متن از ۱۰۰ پیکسل کمتر است.
ارتفاع این متن از ۱۰۰ پیکسل کمتر است.
ارتفاع این متن از ۱۰۰ پیکسل کمتر است.
ارتفاع این متن از ۱۰۰ پیکسل کمتر است.
ارتفاع این متن از ۱۰۰ پیکسل کمتر است.

 

مقادیری که برای پارامتر height قرار می دهید می تواند بر اساس پیکسل باشد که در این صورت باید پس از مقدار مربوطه حروف px که نشانه پیکسل است را بنویسید. مقادیر ممکن است بر اساس درصد باشند که در آن صورت باید علامت درصد ( % ) را پس از مقدار قرار دهید.

 


 

 

overflow : وقتی محتویات قسمتی از صفحه طول یا عرضی بزرگتر از آن قسمت در بر گیرنده داشته باشد، با پارامتر overflow می توانیم مشخص کنیم که آن قسمت زیادی نمایش داده شود یا مخفی شود. به صورت پیش فرض قسمتهای اضافی نمایش داده می شوند ولی با این پارامتر ما می توانیم آنها را مخفی کنیم. به مثال زیر توجه کنید :

توجه کنید که تگ <nobr> برای مواقعی استفاده می شود که ما میخواهیم در هیچ شرایطی متن به خط بعد منتقل نشود .

خروجی مثال بالا :

طول این سطر بیشتر از عرض DIV است ولی با استفاده از overflow قسمتهای بیشتر ز عرض DIV دیده نمی شوند.

 

به طور کلی چند مقدار را می توانیم برای پارامتر overflow استفاده کنیم:

  1. visible
    یا قرار دادن این مقدار برای overfloww همه محتویاتی که طول یا عرض بیش از اندازه داشته اند نمایش داده خواهند شد.
  2. hidden
    این مقدار باعث خواهد شد تا محتویات با طول یا عرض بیش از اندازه نمایش داده نشوند.
  3. scroll
    این مقدار باعث خواهد شد تا در صورتی که محتویات اندازه ای بیش از طول و عرض لازم دارند با استفاده از اسکرول بار قابل مشاهده باشند.

به یک مثال توجه کنید:

 

این هم نتیجه مثال بالا :

طول این سطر بیشتر از عرض DIV است ولی با استفاده از overflow قسمتهای بیشتر از عرض DIV دیده نمی شوند.

 

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

 

درباره ی nasimazadi

همچنین ببینید

واحد پردازش مركزي CPU 

واحد پردازش مركزي CPU مدت زمان انجام يك كار بوسيله كامپيوتر، به عوامل متعددي بستگي …

پاسخ دهید

%u0637%u0631%u0627%u062D%u06CC %u0633%u0627%u06CC%u062A
طراحی سایتسئوسرویس و تعمیر کولر گازیاجاره ویلافروش ویلا