يمكن أن يساعد استخدام الاختصارات في تقليل حجم ملفات CSS وتسهيل قراءتها. القواعد الأساسية لاختصارات CSS هي كما يلي:
لون
يمكن اختصار قيم الألوان السداسية العشرية، إذا كانت قيم كل رقمين متماثلة، بمقدار النصف، على سبيل المثال: يمكن اختصار #000000 إلى #000؛ يمكن اختصار #336699 إلى #369؛
حجم الصندوق
عادة ما تكون هناك أربع طرق للكتابة:
الخاصية: value1؛ تعني أن جميع الحواف لها قيمة value1؛
الخاصية: value1 value2 تعني أن قيمة الأعلى والأسفل هي القيمة 1، وقيمة اليمين واليسار هي القيمة 2
الخاصية: value1 value2 value3؛ تعني أن قيمة الأعلى هي القيمة 1، وقيمة اليمين واليسار هي القيمة 2، والقيمة السفلية هي القيمة 3
الخاصية: value1 value2 value3 value4 تمثل القيم الأربع الأعلى واليمين والأسفل واليسار بالتسلسل
الطريقة الملائمة للتذكر هي في اتجاه عقارب الساعة، أعلى اليمين، أسفل اليسار. فيما يلي أمثلة لتطبيقات محددة في الهامش والحشو:
الهامش: 1em 0 2em 0.5em؛
حدود
خصائص الحدود هي كما يلي:
عرض الحدود: 1 بكسل؛
نمط الحدود: صلب؛
لون الحدود:#000;
ويمكن اختصارها بجملة واحدة: border:1px Solid #000;
بناء الجملة هو الحدود: لون نمط العرض؛
الخلفيات
خصائص الخلفية هي كما يلي:
لون الخلفية:#f00;
صورة الخلفية:url(background.gif);
تكرار الخلفية: عدم التكرار؛
مرفق الخلفية: ثابت؛
موقف الخلفية:0 0;
ويمكن اختصارها بجملة واحدة: الخلفية:#f00 url(background.gif) عدم التكرار ثابت 0 0؛
بناء الجملة هو الخلفية: موضع مرفق تكرار الصورة الملونة؛
يمكنك حذف واحدة أو أكثر من قيم السمات، إذا تم حذفها، فستستخدم قيمة السمة القيمة الافتراضية للمتصفح.
اللون: شفاف
الصورة: لا شيء
كرر: كرر
المرفق : التمرير
الموقف: 0% 0%
الخطوط
خصائص الخط هي كما يلي:
نمط الخط: مائل؛
متغير الخط: أحرف صغيرة؛
وزن الخط: غامق؛
حجم الخط: 1em؛
ارتفاع الخط: 140%؛
عائلة الخط: "Lucida Grande"، sans-serif؛
يمكن اختصاره بجملة واحدة: الخط: مائل صغير بأحرف كبيرة غامق 1em/140% "Lucida Grande"، sans-serif؛
لاحظ أنه إذا قمت باختصار تعريف الخط، فيجب عليك تحديد قيمتين على الأقل: حجم الخط وعائلة الخط.
القوائم
لإلغاء النقاط الافتراضية والأرقام التسلسلية، يمكنك كتابة نمط القائمة: لا شيء؛،
خصائص القائمة هي كما يلي:
نوع القائمة: مربع؛
موقف نمط القائمة: في الداخل؛
صورة نمط القائمة:url(image.gif);
ويمكن اختصارها بجملة واحدة: list-style:square inside url(image.gif);