امیر سروریCSS، استاندارد وب سایت، اصول طراحی وب سایت

این مقاله بخشی از آرشیو تاریخی وب‌تارگت است و ممکن است به‌روز نباشد، به‌ویژه در موضوعات فنی. پیش از استفاده از مطالب، تاریخ انتشار را بررسی کنید.

CSS Shorthand چیست ؟

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

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

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

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

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

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

CSS (syntax)

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 – مقادیر پیش فرض برای خصوصیات فونت

CSS

element {
    font-style: normal;

    font-variant: normal;

    font-weight: normal;

    font-size: inherit;

    line-height: normal;

    font-family: inherit;
}

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

CSS (syntax)

element {

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

example – مثال

CSS

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

نکته

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

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

CSS

p {

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

}

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

CSS

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 تعیین نشده اند

CSS

strong {
    font: 12px verdana;
}

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

CSS

strong {
    font-style: normal;

    font-variant: normal;

    font-weight: normal;

    font-size: 12px;

    line-height: normal;

    font-family: verdana;
}