سلام به همه پی وی لرنی های عزیز!
به دوره آموزش ویژگی های CSS خوش آمدید. CSS مخفف Cascade Style Sheets است که توسط W3C یا کنسرسیوم جهانی وب ایجاد شده است. اگر HTML اسکلت و ساختار وب است آنگاه CSS گوشت و پوست وب را تشکیل می دهد که ضعف های HTML را پوشش داده و آن ها را رفع می نماید. در این مجموعه از مجموعه آموزش های پی وی لرن قرار است به سراغ دوره آموزش ویژگی های CSS برویم و شما را با Properties ها یا ویژگی های CSS آشنا کنیم. روند هر جلسه این دوره به این شکل است که هر جلسه اختصاص به یک ویژگی دارد و در هر جلسه نیز برای هر Property یا ویژگی نیز سعی شده با ارائه مثال های مرتبط، یادگیری ویژگی های CSS آسان تر و ماندگارتر شود.
در جلسه پیش با ویژگی float آشنا شدیم؛ ویژگی float چگونگی شناور شدن یک عنصر را مشخص می کند.
در جلسه فعلی قرار است به آموزش کار با ویژگی font در CSS بپردازیم.
آموزش کار با ویژگی font در CSS
به مثال زیر توجه نمایید؛ در این مثال برخی از ویژگی های فونت را با عبارت shorthand تنظیم کرده ایم.
مثال :
| p.a { font: 15px arial, sans-serif; } p.b { font: italic bold 12px/30px Georgia, serif; } |
تعریف و کاربرد
ویژگی font یک ویژگی مختصر برای موارد زیر است :
- font-style
- font-variant
- font-weight
- font-size/line-height
- font-family
مقادیر font-size و font-family ضروری هستند؛ اگر یکی از این مقادیر گم شود؛ آنگاه از مقدار پیش فرض آنها استفاده می شود.
نکته
ویژگی line-height فاصله بین خطوط را مشخص می کند.
| مقدار پیش فرض | The default value of the font properties |
| به ارث بردن | بله |
| متحرک بودن | بله |
| نسخه | CSS1 |
| سینتکس JavaScript | “object.style.font=”italic small-caps bold 12px arial,sans-serif |
پشتیبانی مرورگر ها
در ادامه آموزش کار با ویژگی font در CSS جدولی ارائه کرده ایم که نشان می دهد این ویژگی CSS در چه مرورگر های پشیبانی می شود.
| نام ویژگی |  |  |  |  |  |
| font | ۱٫۰ | ۱٫۰ | ۳٫۵ | ۱٫۰ | ۴٫۰ |
نکته
برای هر مقدار زیر، پشتیبانی مرورگر را به صورت جداگانه بررسی کنید.
سینتکس CSS
مثال :
| font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit; |
مقدار ویژگی
| مقدار | توضیحات |
|---|
| font-style | این مقدار استایل فونت را تعیین می کند. مقدار پیش فرض “normal” است. |
| font-variant | نوع فونت را مشخص می کند. مقدار پیش فرض “normal” است. |
| font-weight | وزن فونت را مشخص می کند. مقدار پیش فرض “normal” است. |
| font-size/line-height | اندازه فونت و ارتفاع خط را مشخص می کند. مقدار پیش فرض “normal” است. |
| font-family | family یا دسته خانواده فونت را مشخص می کند. مقدار پیش فرض به مرورگر بستگی دارد. |
| caption | از فونت هایی که توسط کنترل های کپشن استفاده می شود (مانند دکمه ها ، کشویی و غیره) استفاده می کند. |
| icon | از فونت هایی که توسط icon labels استفاده می شود، استفاده می کند. |
| menu | از فونت هایی که توسط منوهای کشویی استفاده می شود استفاده می کند. |
| message-box | از فونت هایی که توسط dialog boxes استفاده می شود، استفاده می کند. |
| small-caption | نسخه کوچکتر از فونت عنوان. |
| status-bar | از فونت هایی که توسط نوار وضعیت استفاده می شود، استفاده می کند. |
| initial | ویژگی را به مقدار پیش فرض خود تنظیم می کند. |
| inherit | این ویژگی را از عنصر parent خود به ارث می برد. |
مثال های بیشتر
مثال یک
نمایشی از سایر مقادیر ویژگی فونت :
مثال :
| <p style="font:caption">The browser font used in captioned controls.</p> <p style="font:icon">The browser font used in icon labels.</p> <p style="font:menu">The browser font used in dropdown menus.</p> <p style="font:message-box">The browser font used in dialog boxes.</p> <p style="font:small-caption">A smaller version of the caption font.</p> <p style="font:status-bar">The browser font used in the status bar.</p> |
کلام آخر
در این جلسه به آموزش کار با ویژگی font در CSS پرداختیم؛ ویژگی font یک ویژگی مختصر برای font-style، font-variant، font-weight ، font-size/line-height و font-family است.
در جلسه بعدی به کار با font-face@ خواهیم پرداخت.
با پی وی لرن همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
