Font – خلاصه نویسی دستورات CSS

راهنمای خلاصه نویسی دستورات CSS برای Font


امیر سروری ۲ دیدگاه CSS , استاندارد وب سایت , اصول طراحی وب سایت چهارشنبه, ۱۸ام خرداد , ۱۳۹۰ 7972 بازدید

CSS Shorthand چیست ؟

CSS Shorthand یک مجموعه از تکنیک و دستورات است که به منظور خلاصه نویسی دستورات CSS مورد استفاده قرا میگیرد .

خلاصه نویسی دستورات CSS میتواند به ما کمک کند تا :

  • کنترل بیشتری بر روی اجزاء یک صفحه وب سایت داشته باشیم
  • یک فایل CSS تمیز و قابل خواندن داشته باشیم
  • حجم فایل CSS وب سایت کاهش یابد

این مطالب به صورت یک مجموعه ارائه خواهد شد و در مطالب بعدی با خلاصه نویسی دستورات برای خصوصیات دیگر ( Background , Border , Margin and Padding , Outline , List-style ) آشنا خواهیم شد .

خلاصه نویسی دستورات CSS – Font


font properties – خصوصیات فونت

element { 

  font-style: normal || italic || oblique;

  font-variant:normal || small-caps;

  font-weight: normal || bold || bolder || || lighter || (100-900);

  font-size: (number+unit) || (xx-small - xx-large);

  line-height: normal || (number+unit);

  font-family:name,"more names";

}

default font property values – مقادیر پیش فرض برای خصوصیات فونت

element {

  font-style: normal;

  font-variant:normal;

  font-weight: normal;

  font-size: inherit;

  line-height: normal;

  font-family:inherit;

}

the font shorthand property – خصوصیات فونت به صورت خلاصه نویسی شده

element {

   font: font-style font-variant font-weight font-size/line-height font-family;
   
}

example – مثال

element {

   font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;
   
}

نکته

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

مثال به صورت خلاصه نویسی شده / در این مثال مقادیر font-style , font-variant تعیین نشده اند

p {

  font:bold 1em/1.2em georgia,"times new roman",serif;

}

مثال به صورت خلاصه نویسی نشده و واقعی / مقادیر تعیین نشده به صورت پیش فرض تعیین مقدار می شوند

p {

  font-style:normal;

  font-variant:normal;

  font-weight:bold;

  font-size:1em;

  line-height:1.2em;

  font-family:georgia,"times new roman",serif;

}

نکته

برای تعیین مقادیر به صورت خلاصه نویسی شده برای اجزائی مانند h1-h6 , strong , small , em که به صورت پیش فرض دارای مقادیر منحصر به فردی هستند دقت بیشتری لازم است . در هنگام خلاصه نویسی خصوصیت Font برای این اجزاء دقت داشته باشید که تعیین نکردن مقادیر font-style, font-variant, and font-weight باعث تغییر در خصوصیات خواهد شد . برای درک این موضوع به مثال زیر دقت کنید

مثال به صورت خلاصه نویسی شده / در این مثال مقادیر font-style , font-variant , font-weight تعیین نشده اند

strong {

  font:12px verdana;

}

مثال به صورت خلاصه نویسی نشده و واقعی / مقادیر تعیین نشده به صورت پیش فرض تعیین مقدار می شوند و به طور مثال font-weight به صورت normal در خواهد آمد

strong {

  font-style: normal;

  font-variant:normal;

  font-weight: normal;

  font-size: 12px;

  line-height: normal;

  font-family:verdana;

}


نویسنده / مترجم : امیر سروری

امیر سروری هستم علاقه مند به بازاریابی و تبلیغات آنلاین , طراحی وب سایت و البته آموزش


۲ دیدگاه برای این نوشته ثبت شده است


  1. مجتبي
    ۱۳ تیر ۱۳۹۰

    سلام
    بهترین فونت فارسی و اندازه اون برای وب سایت های فارسی چیه ؟

    عرض صفحه چی ؟




    • امیر سروری
      ۱۵ تیر ۱۳۹۰

      مجتبی @ با سلام , بهترین فونت برای سرفصل ها می تونه Arial باشه با سایز حداقل ۱۶px و برای متن های طولانی Tahoma با حداقل اندازه ۱۲px . برای عرض صفحه هم بهتره از ۹۶۰ px استفاده بشه .



دیدگاه خود را بنویسید





نشانی ایمیل شما منتشر نخواهد شد.

کامنت های شما بعد از تأیید توسط نویسنده وبلاگ، منتشر خواهند شد.

لطفا دیدگاهتان تا حد امکان مربوط به پست بالا باشد. اگر حرف دیگری دارید و یا قصد تماس با من را دارید، از فرم تماس استفاده کنید.

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2017 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.