این مقاله بخشی از آرشیو تاریخی وب‌تارگت است و ممکن است به‌روز نباشد، به‌ویژه در موضوعات فنی. پیش از استفاده از مطالب، تاریخ انتشار را بررسی کنید.
CSS یک ابزار بسیار مناسب ، اساسی و قدرتمند برای طراحی وب سایت و شکل بخشیدن به صفحات وب سایت است که با ارائه ورژن جدید آن ( CSS3 ) قدرت بیشتری نیز گرفته است . دراین مجموعه تلاش خواهد شد ، تعدادی از تکنیک های کاربردی ، فوق العاده و ساده از CSS را با یکدیگر مرور کنیم .
اندازه متغیر فونت ها
با استفاده از روش اندازه گذاری متغیر برای فونت ها ( em ) ، اندازه فونت ها با توجه به محیط اطراف و اجزاء تشکیل دهنده وب سایت تعیین می شود ، و کاربران نیز می توانند به راحتی با استفاده از تنظیمات مرورگر خود اندازه فونت ها را به دلخواه خود تغییر دهند.
از روش اندازه گذاری دقیق و یا ثابت هنگامی استفاده خواهد شد که
اندازه خروجی ( رزولوشن تصویر (Resolution) ، نوع مرورگر ، و
اندازه صفحه نمایشگر ) مشخص شده باشد.
در مرورگرهایی مانند Internet Explorer اندازه های متفاوتی برای
فونت ها با واحدهای یکسان نسبت به مرورگرهای دیگر وجود دارد .
اینها دلایلی هستند برای اینکه از واحد ( em ) برای اندازه گذاری
استفاده شود.
برای اندازه گذاری فونت ها در طراحی وب به صورت متغیر و انعطاف
پذیر ( relative ) ، می توانید به روش ساده زیر عمل کنید .
اگر تا پیش از این از واحد ( px ) برای اندازه گذاری فونت ها
استفاده می کرده اید ، تبدیل این متغیرها و معیار ها برای شما کمی
سخت خواهد بود. برای تبدیل واحد ( Px ) به ( em ) می توانید از
فرمول زیر استفاده نمائید. طبیعی است پس ازمدتی معیار این واحد
اندازه گذاری را نیز درک خواهید کرد.
CSS (syntax)
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% تعیین کنید.
CSS
body {
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.2em; /* 1.2em = 12px */
}
همانطور که ملاحظه میکنید با انجام این اندازه گذاری ، واحدها به راحتی با یک نسبت مناسب به یکدیگر تبدیل می شوند.
CSS
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 */