CSS یک ابزار بسیار مناسب ، اساسی و قدرتمند برای طراحی وب سایت و شکل بخشیدن به صفحات وب سایت است که با ارائه ورژن جدید آن ( CSS3 ) قدرت بیشتری نیز گرفته است . دراین مجموعه تلاش خواهد شد ، تعدادی از تکنیک های کاربردی ، فوق العاده و ساده از CSS را با یکدیگر مرور کنیم .
اندازه متغیر فونت ها
با استفاده از روش اندازه گذاری متغیر برای فونت ها ( em ) ، اندازه فونت ها با توجه به محیط اطراف و اجزاء تشکیل دهنده وب سایت تعیین می شود ، و کاربران نیز می توانند به راحتی با استفاده از تنظیمات مرورگر خود اندازه فونت ها را به دلخواه خود تغییر دهند.
از روش اندازه گذاری دقیق و یا ثابت هنگامی استفاده خواهد شد که اندازه خروجی ( رزولوشن تصویر (Resolution) ، نوع مرورگر ، و اندازه صفحه نمایشگر ) مشخص شده باشد.
در مرورگرهایی مانند Internet Explorer اندازه های متفاوتی برای فونت ها با واحدهای یکسان نسبت به مرورگرهای دیگر وجود دارد . اینها دلایلی هستند برای اینکه از واحد ( em ) برای اندازه گذاری استفاده شود.
برای اندازه گذاری فونت ها در طراحی وب به صورت متغیر و انعطاف پذیر ( relative ) ، می توانید به روش ساده زیر عمل کنید .
اگر تا پیش از این از واحد ( px ) برای اندازه گذاری فونت ها استفاده می کرده اید ، تبدیل این متغیرها و معیار ها برای شما کمی سخت خواهد بود. برای تبدیل واحد ( Px ) به ( em ) می توانید از فرمول زیر استفاده نمائید. طبیعی است پس ازمدتی معیار این واحد اندازه گذاری را نیز درک خواهید کرد.
16px=1em
pixels/16=em
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
می توانید از روش فوق العاده ، کاربر پسند و ساده زیر نیز برای اندازه گذاری متغیر فونت ها استفاده کنید.
با استفاده از این روش تبدیل واحد ( px ) و ( em ) به یکدیگر بسیار آسان خواهد شد ، اندازه فونت ها در تمامی مرورگرها به صورت یکسان خواهد بود و کاربر توانایی بزرگ و کوچک کردن فونت ها با استفاده از تنظیمات مرورگر را نیز خواهد داشت. اندازه فونت را برای body به مقدار 62.5% تعیین کنید.
body {
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.2em; /* 1.2em = 12px */
}
همانطور که ملاحظه میکنید با انجام این اندازه گذاری ، واحدها به راحتی با یک نسبت مناسب به یکدیگر تبدیل می شوند.
h1 {font-size:1.6em;} /* 16px/10=1.6em */
h2 {font-size:1.4em;} /* 14px/10=1.4em */
p {font-size:1.2em;} /* 12px/10=1.2em */
Ali Aghdam
16 January 2011
نکته قابل توجهی است ولی این که بخواهیم این محاسبات!!! رو به صورت دستی انجام دهیم برای ما برنامه نویسا یکم خارج از حوصله است
به نظرم یه برنامه کوچیک تهیه کنیم که با دادن فایل CSS بهش، اون اینکارو بکنه و ما از همون px قبلی خودمون استفاده کنیم:)
امیر سروری
16 January 2011
امان از دست این برنامه نویسها ، خوب این تکنیک خوبیش اینه ه دیگه احتیاج به محاسبه نداره ;)
نیما
8 February 2011
جدیدا این سایز دهی متغیر مد شده خیلی هم مایه شر و دردسره؛ اما مرسی این روش خیلی آسونتر میکنه قضیه رو
امیر سروری
8 February 2011
نیما @ ممنون ، اگه درست استفاده بشه ، بسیار خوب و کاربردی هست .
حامد
9 February 2011
مرسی جالب بود :)
یک طراح وب
9 February 2011
عالی و ساده
استفاده کردیم :)
مجتبي
26 June 2011
با سلام و تشكر از سايت و مطالب مفيدتون
من با كد زير
ul {
list-style-image: url(bullet.gif);
}
كنار عناوين يه ليست از عكس استفاده كردم اما مشكل من با متون فارسيه كه ميخوام اين عكس سمت راست بيفته ؟
البته اگه لطف كنين راهنمايي كامل تري در مورد متون فارسي بكنين كه خيلي عاليه چون دستورات همش مربوط به متون انگليسي ميشه مثل فرورفتگي خط اول پاراگراف كه سمت چپ تو ميره
ممنون
امیر سروری
27 June 2011
مجتبی @ سلام دوست عزیز کافیه شما direction رو عوض بکنید .
ul { direction:rtl; list-style-image:url(bullet.png)}
مرتضوی
9 April 2012
سلام.
ممنون از آموزشهای بی نظیرتون(بدون اغراق گفتم- البته بنده مبتدی تر از این حرفهام که بتونم آموزشهای اکثرا سطح بالای شما را به این راحتی ها درک کنم اما به هر حال تا الان که جذب سایتتون شدم.)
یه خواهش هم دارم. اینکه اگه ممکنه نوع طراحی صفحات دو ستونی تان را برایمون بگذارید منظورم همون صفحاتتونه که بعد از چند بار زوم ستون کناری محو می شه و متن اصلی بزگتر میشه. برام جالب بود.
ممنون.
میلاد
6 May 2012
کد تغییر اندازه فونت توسط کابر :
(function setBaseFontSize(sizeIndex
{
document.body.style.fontSize = (100 + sizeIndex * 13) + ‘%’;
}
بعدش باید سه تا دکمه و یا لینک تعریف کنید و کد زیر را در داخل بلاک آن بنویسید :
(onclick=”setBaseFontSize(1
البته باید در جاهایی که قصد این قابلیت را دارید از همین واحد em استفاده بشه.(در css و یا داخل تگ Style)
محسن
31 May 2012
برای متون داخل سایت که همون طور که توی پُست هم ذکر شده استفاده از واحد em مناسب هستش چون کاربر میتونه اندازه فونت رو به دلخواه تغییر بده.
اما برای اندازه فونت منوهای سایت (مثلاً navigation) هم از واحد em استفاده کنیم بهتره یا واحد px؟
چون اینجا اگر کاربر اندازه فونت رو تغییر بده، فکر میکنم ممکنه ساختار منو بهم بریزه.
درست میگم؟
در اینجور مواقع واحد px رو توصیه میکنید یا همون em؟
امیر سروری
31 May 2012
محسن @ این چیزی که در مورد منو ها و غیره گفتی درسته اما اگر بتونی این منو ها و ساختار وب سایت رو هم درصدی کار کنی و ریلیتیو باشه نسبت به اندازه رزولوشن دیگه مشکلی از اون نظر هم نخواهی داشت .
اما اگر نتونی این کار رو انجام بدی و بخوای ترکیبی از این دو رو داشته باشی موافقم با پیکسلی کردن اندازه منو ها و قسمتهایی که بزرگ و کوچیک شدن متن توشون تاثیر میزاره و باعث بهم ریختگی میشه .
البته گزینه درست تر طراحی واکنشگرا و ریلیتیو هست . موفق باشی .
محسن شهبازی
22 October 2012
بسیار زیبا بود واقعا کاربردی هست مطالبتون و صد البته شیوا و رسا و به زبان ساده
امیدوارم تو کاره تون موفق باشید مهندس
فهیم
2 August 2013
سلام
من درست متوجه فرمول نشدم!قضیه رو نگرفتم
یعنی اگر بخوام px رو تبدیل به em کنم این فرمول را میخوام؟ در غیر این صورت همون em رو بزنم و ادامه مطلب ؟
ali
7 July 2014
سلام و خسته نباشد. میخواستم بدونم چطور میشه متن رو در یک کادر حفظ کرد.یعنی هر چی تعداد کارکتر زیاد میشه به طول کادر صدمه وارد نکنه و از صفحه خارج نشه و فقط تو حالت عمودی اظافه بشه درست مثل همین کادر دیدگاه خودتون.ممنون میشم جوابتونو تو امیلم ببینم.
سارا
20 November 2015
ممنون از مطالب مفیدتون
سوالی داشتم ممنون میشم راهنمایی کنید
چیکار کنیم تار در نسخه های موبایل فونت فارسی و انگلیسی بهم نریزه؟