آموزش CSS – جلسه سوم – اندازه و واحدها در CSS

نویسنده: فرزاد ربیعی
تاریخ: 2012 - 02 - 21
دسته بندی: CSS طراحی سایت

اندازه و واحدها در CSS


در CSS برای اینکه بتوانیم اندازه را مشخص کنیم (مانند مشخص کردن اندازه یک فونت)، از آیتم های زیر می توانیم استفاده کنیم:
%     درصد
in      اینچ
cm    سانتیمتر
mm   میلیمتر
em   هر واحد آن برابر با فونت جاری است، مثلا اگر بنویسیم ۲em، اندازه آن ۲ برابر فونت جاری خواهد شد
ex    اندازه حرف x
pt    معادل ۱/۷۲ اینچ
pc    پیکا معادل ۱۲pt
px    معادل هر پیکسل
رابطه های زیر برای واحدهای بالا وجود دارد:
۱۲pt = 16px = 1em = 100%

به غیر از واحدهای بالا، یک واحد دیگر هم وجود دارد که مانند سایز بندی لباس است.
xx-small, x-small, small, medium, large, x-large, xx-large
اگر بخواهیم کاربرد بیشتر واحدهای بالا را بگوییم، می توانیم این گونه بیان کنیم که:
% برای عرض و ارتفاع ( width و height) کاربرد دارد.
em، برای سایت هایی که نوشته زیاد دارند (تگ font-size)، چون با زوم کردن روی آن ها نوشته ها راحت خوانده می شود.
ضمنا واحدهای % و em، نسبی هستند و اندازه خودشان را به ارث می برند. (به همین دلیل ممکن است مشکلاتی را برای طراحی سایت ایجاد کنند، پس باید آگاهانه از آنها استفاده کرد)
px، قابلیت این را دارد که هم برای width و height و هم برای font-size از آن استفاده شود و معمولا در طراحی صفحات وب، بیشتر از px استفاده می شود و یک واحد اندازه مطلق است.
برای این که تفاوت واحد نسبی و مطلق را متوجه شوید، می توانید مثال زیر را ببینید. (البته شاید درک این مثال مقداری سخت باشد، ولی همین که متوجه شوید واحدهای مطلق و نسبی چگونه در طراحی سایت عمل می کنند کافی است)


<div style="font-size:30px"> <!-- تگ پدر -->
 <div style="font-size:1em">1 em (child)</div>
 <div style="font-size:30px">30px (child)</div>
</div>
<div style="font-size:30px">30px</div><!-- واحد مطلق -->
<div style="font-size:1em">1em</div> <!-- اندازه خود را به ارث می برد body به دلیل اینکه نسبی است، از تگ بالاتر خود یعنی em واحد -->

لینک دانلود تمرین: default
کافی است تگ های بالا را بین دو تگ </body> و <body> بنویسید و نتیجه را که مانند شکل زیر خواهد بود ببینید.

دو خط اول، از تگ پدر font-size را به ارث می برند و با (child) نشان داده شده اند.
ولی خط سوم، ۳۰px دیگر child نیست، ولی چون واحد مطلق است همان ۳۰px نشان داده می شود ولی خط چهارم ۱em به دلیل این که واحد نسبی است از تگ بالاتر خود یعنی <body> اندازه خود را به ارث می برد.

برچسب: - - - -

مطالب مرتبط

درباره ی

در زمینه CSS، ASP.Net و شبکه (MCITP) فعالیت میکنم

۲ نظر به “آموزش CSS – جلسه سوم – اندازه و واحدها در CSS” ثبت شده است

  1. خادم المهدی گفت:
    جولای 14, 2012 در 12:37 ق.ظ

    با تشکر از آموزشتون ولی در مطلب ” آموزش CSS – جلسه سوم – اندازه و واحدها در CSS ” ببخشید ولی نسبت ها رو اشتباه درج کردید لطفاً باتوجه به این آدرس اصلاح بفرمائید :

    http://www.getallfix.com/2011/11/convert-empxpt-and-in-css

    درستش اینه : ۱۲pt = 16px = 1em = 100%

    • بابک حبیبی گفت:
      جولای 15, 2012 در 8:39 ب.ظ

      سلام
      متاسفانه آقای ربیعی نیستند پاسختونو بدن
      الان من هم از سایت http://pxtoem.com چک کردم حق باشماست
      البته em بستگی به فونت دیفالت مرورگرتون داره ولی با این حال ظاهرا دیفالت همین سایزی هست که می فرمایید ، ویرایش میکنم
      با سپاس از دقت و نظرتون