زوپیرنت

یک صفحه وب از آیتم های کوچک تر درست شده که معمولا برای این که بتوانیم تسلط بیشتری روی صفحه وب داشته باشیم، به آن آیتم ها عرض و ارتفاع می دهیم. هر سایت بنا بر خدماتی که ارائه می دهد و همین طور طراحی سایتش، آیتم های بیشتر یا کمتری دارد. یکی از این آیتم ها می تواند بخشی باشد که کاربران با وارد کردن نام کاربری و رمز عبور، می توانند به سایت login کنند. مانند شکل زیر در سمت راست بخش ورود کاربران برای وارد شدن به اکانت گوگل است

برای استفاده از width و height می توانید به مثال زیر توجه کنید.

<p>this is a text for understand width and height</p>

در مثال بالا با استفاده از تگ پاراگراف، یک جمله نوشتیم که خروجی مانند شکل زیر خواهد بود

حال با استفاده از style، عرض و ارتفاع را برای پاراگراف، مشخص می کنم که به صورت زیر است.

<p dir="RTL"><p style="width:100px;height:100px;">this is a text for understand width and height</p>

در این بخش، مشخص کردیم که مقدار width (عرض) برابر با ۱۰۰ پیکسل و height (ارتفاع) برابر ۸۰ پیکسل باشد. خروجی در مرورگر مانند شکل زیر است (چون عرض کمتر شده، پس نوشته دیگر نمی تواند مانند قبل در یک خط نوشته شود و باید در چند خط بیاید.

چنانچه با یکی از برنامه ها برای طراحی سایت کار می کنید، می توانید تغییرات را در بخش Design ببینید. مثلا در برنامه Microsoft Expression، خروجی را در بخش design به شما نمایش می دهد.

div

div هم یک تگ است که برای بخش بندی در CSS می تواند استفاده می شود. حال کد بالا را با div بازنویسی می کنیم. فقط نیاز داریم به جای تگ div، p را جایگزین کنیم.

<div style="width:100px;height:80px;">this is a text for understand width and height</div>

می دانیم که استفاده از CSS های inline کار درستی نیست، و باید تگ های CSS در فایلی جدا با پسوند .css نوشته شود. ولی یک مشکل وجود دارد، تگ div، یک تگ عمومی است و روش فراخوانی آن با <p> و … در فایل .css تفاوت دارد. پس قبل از کار با div، باید با دو مفهوم id و class آشنا شوید. هر دوی آن ها، شناسه هستند که می توانند برای تگ های مختلف استفاده شوند. دلیل اصلی که از id و class استفاده می کنیم این است که تگ های html محدود هستند و نمی توان از آن برای طراحی وب سایت استفاده کرد. برای این که متوجه شوید id و class چگونه کار می کنند، می توانید مثال زیر را که با id کار شده، ببینید.

تگ یک:

<div id="myid">this is a text for understand width and height</div>

یک تگ با div نوشته شده و برای مقدار myid، id نوشته شده (myid یک اسم دلخواه است و می تواند هر چیز دیگری باشد). حال در فایل .css، آیتم های زیر را می نویسیم

#myid{

width:100px;height:80px;

}

خط اول، همان نامی است که در تگ یک نوشته شده، فقط به دلیل این که id است، قبلش علامت # را قرار می دهیم. بعد بین {}، مقدار عرض و ارتفاع را می نویسیم. حال اگر صفحه را در مرورگر ببینیم، نتیجه مانند کدی است که با <p>  کار شد (شکل دوم)

 در حقیقت روند کار اینگونه است که یک id را در فایل CSS تعریف می کنیم (مانند myid)، خصوصیات را به آن می دهیم (مانند عرض و ارتفاع) و در صفحه html آن را با تگ div فراخوانی می کنیم.

تفاوت بین id و class در این است که نام id، واحد است و فقط یک بار استفاده می شود. ولی class این گونه نیست و می تواند بیش از یک بار استفاده شود. برای class، به جای # (شارپ) از . (دات یا نقطه) استفاده می کنیم. در داخل تگ div هم به جای id، کلمه class را می نویسیم. می توانید مثال زیر را برای درک بهتر از id و class ببینید.

.myclass{
 width:100px;height:80px;}
 #myid{
 width:100px;height:80px;
 }

لینک دانلود مثال بالا

شاید این سووال برایتان پیش بیاید که از id استفاده کنید یا از class. برای CSS تفاوتی ندارد که شما از کدام این ها استفاده می کنید. پس این موضوع برمی گردد به این که چه آیتم هایی در سایتتان دارید. مثلا برای صفحه وب سایت شما، فقط یک جعبه (box) برای ورود کاربران وجود دارد، پس می توانید از id استفاده کنید. ولی برای تبلیغاتتان چون بیشتر از یک آیتم است، می توانید از class برای تبلیغات استفاده کنید. ضمنا از id و class در jquery هم می توانید استفاده کنید.

دلیلی که از id فقط یک بار در صفحه می توان استفاده کرد این است که فرض کنید نام سایت شما www.zoopirnet.com است. در همین صفحه شما یک id به نام myid دارید. چنانچه در آدرس مرورگرتان www.zoopirnet.com#myid را وارد کنید، مرورگر اسکرول خورده و در بخشی که این id شروع شده می ایستد. برای درک این مطلب، می توانید از مثال بالا استفاده کنید. صفحه index.html را در مرورگرتان باز کنید. سپس در بخش آدرس، به انتهای آن #myid را اضافه کنید و enter را بزنید. می بینید که صفحه مقداری پایین تر می آید.

min و max

(min-width, max-width, min-height, max-height)

برای width و height می توانید از min و max هم استفاده کنید. مانند min-width و معنی اش این است که اگر متن ما کمتر از مقدار width بود، همان min-width را اعمال کند.

آیتم دیگر، overflow است که معنای سرریز را می دهد، و معنی اش این است که اگر ابعادی که برای یک مثلا id مشخص کردیم، و متنی که وجود دارد بیشتر از آن است این سر ریز چه اتفاقی برایش بیافتد.

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

<div id="myid">this is a text with minimum width</div>

و در صفحه css داریم:

#myid{

width:50px;

height:50px;

overflow:hidden;

}

لینک دانلود مثال بالا

خصوصیت overflow را نوشتیم و مقدار آن را برابر hidden قرار دادیم. پس در خروجی متنی که در ابعاد ۵۰ در ۵۰ پیکسل جا نشود، مخفی خواهد شد. مانند شکل زیر

می توانیم خصوصیت overflow را مطابق مقادیر زیر قرار دهیم.

auto: که بهترین حالت است و به طور اتوماتیک اگر متن بیشتر از ابعاد شود، scroll می خورد

scroll: در همه حالت، scroll قرار می دهد.

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