إحدى الطرق الأكثر فعالية لكتابة CSS هي استخدام الاختصارات. يمكن أن يؤدي استخدام الاختصارات إلى جعل ملفات CSS أصغر حجمًا وأكثر قابلية للقراءة. يعد فهم اختصارات خصائص CSS أيضًا إحدى المهارات الأساسية لمهندسي تطوير الواجهة الأمامية. اليوم نقوم بتلخيص اختصارات خصائص CSS بشكل منهجي.
اختصار اللون
اختصار اللون هو الأبسط. عندما تكون قيمة اللون بالنظام الست عشري، إذا كانت قيمة كل لون هي نفسها، فيمكن كتابتها على النحو التالي:
| اللون: #113366 |
يمكن اختصارها ك
| اللون: #136 |
يمكن استخدام الاختصارات أينما يتم استخدام قيم الألوان السداسية العشرية، مثل لون الخلفية، ولون الحدود، وظل النص، وظل المربع، وما إلى ذلك.
حجم الصندوق
هناك سمتان أساسيتان مستخدمتان هنا: الهامش والحشو، نأخذ الهامش كمثال، والحشو هو نفسه. يحتوي الصندوق على أربعة اتجاهات، أعلى، أسفل، يسار، ويمين، ولكل اتجاه هامش:
| الهامش العلوي: 1 بكسل؛ الهامش الأيمن: 1 بكسل؛ زر الهامش: 1 بكسل؛ الهامش الأيسر: 1 بكسل؛ |
ويمكن اختصار هذه القيم الأربع معًا:
| الهامش: 1px 1px 1px 1px؛ |
ترتيب الاختصارات هو أعلى->يمين->أسفل->يسار. اتجاه عقارب الساعة. إذا كانت قيم الجوانب المتقابلة هي نفسها، فيمكن حذفها:
| هامش:1px;// الهوامش في الاتجاهات الأربعة هي نفسها، أي ما يعادل الهامش:1px 1px 1px 1px; هامش:1px 2px;// الهامش العلوي والسفلي كلاهما 1px، والهوامش اليسرى واليمنى كلاهما 2px، وهو ما يعادل الهامش:1px 2px 1px 2px هامش:1px 2px 3px;// الهامش الأيمن والهامش الأيسر متماثلان، وهو ما يعادل الهامش:1px 2px 3px 2px; هامش:1px 2px 1px 3px;// لاحظ أنه على الرغم من أن الهوامش العلوية والسفلية هنا هي 1 بكسل، إلا أنه لا يمكن استخدام الاختصارات هنا. |
حدود
الحدود هي سمة مرنة نسبيًا ولها ثلاث سمات فرعية: عرض الحدود ونمط الحدود ولون الحدود.
| عرض الحدود: رقم + وحدة؛ نمط الحدود: لا يوجد ||. متقطع ||. لون الحدود: اللون؛ |
يمكن اختصارها حسب العرض والنمط واللون:
| الحدود: 5px الصلبة #369؛ |
في بعض الأحيان، يمكن كتابة الحدود بشكل أبسط ويمكن حذف بعض القيم، ولكن يرجى الانتباه إلى القيم الضرورية، ويمكنك أيضًا اختبارها:
| الحدود: الأخدود الأحمر // خمن ما هو عرض هذه الحدود؟ الحدود: صلب // كيف سيبدو هذا؟ الحدود:5px; //هل هذا جيد؟ الحدود: 5 بكسل أحمر؛ // هل هذا جيد؟ ؟ الحدود: أحمر // هل هذا جيد؟ ؟ ؟ |
كما ترون من الكود أعلاه، فإن العرض الافتراضي للحد هو 3 بكسل، واللون الافتراضي هو الأسود. في اختصار الحدود، مطلوب نمط الحدود.
يمكنك أيضًا استخدام الاختصارات لكل حافة:
| الحدود العلوية: 4 بكسل صلب #333؛ الحدود اليمنى:3px الصلبة #666؛ الحد السفلي:3px صلب #666; الحدود اليسرى:4px صلب #333؛ |
يمكنك أيضًا استخدام الاختصارات لكل سمة:
| border-width: 1px 2px 3px; // يمكن استخدام ما يصل إلى أربع قيم، قواعد الاختصار مشابهة لاختصار حجم الصندوق، كما هو موضح أدناه نمط الحدود: أخدود منقط صلب متقطع؛ لون الحدود: أحمر أزرق أبيض أسود؛ |
الخطوط العريضة
المخطط التفصيلي يشبه الحدود، والفرق هو أن الحدود ستؤثر على نموذج الصندوق، لكن المخطط التفصيلي لن يؤثر.
| عرض المخطط التفصيلي: رقم + وحدة؛ نمط المخطط التفصيلي: لا يوجد ||. منقط ||. لون المخطط التفصيلي: اللون؛ |
يمكن اختصارها على النحو التالي:
| المخطط التفصيلي: 1 بكسل أحمر خالص؛ |
وبالمثل، في اختصار المخطط التفصيلي، يكون نمط المخطط التفصيلي مطلوبًا أيضًا، والقيمتان الأخريان اختياريتان، والقيمة الافتراضية هي نفس قيمة الحدود.
خلفية
الخلفية هي واحدة من الاختصارات الأكثر استخدامًا وتحتوي على الخصائص التالية:
| لون الخلفية: اللون || #hex ||.RGB(% || 0-255) ||. صورة الخلفية:url(); تكرار الخلفية: تكرار || تكرار-x ||. موضع الخلفية: XY || (أعلى||أسفل||وسط) (يسار||يمين||وسط)؛ مرفق الخلفية: التمرير || ثابت؛ |
يمكن أن يؤدي اختصار الخلفية إلى تحسين كفاءة CSS بشكل كبير:
| الخلفية:#fff url(img.png) بدون تكرار 0 0; |
يحتوي اختصار الخلفية أيضًا على بعض القيم الافتراضية:
| الخلفية: لا شيء شفاف، قم بالتمرير إلى أعلى اليسار؛ |
قيم خصائص الخلفية غير موروثة، يمكنك الإعلان عن واحدة منها فقط، وسيتم تطبيق القيمة الافتراضية على القيم الأخرى.
الخط
يعد اختصار الخط أيضًا هو الأكثر استخدامًا، وهو أيضًا أحد الطرق لكتابة CSS بكفاءة.
يحتوي الخط على الخصائص التالية:
| نمط الخط: عادي || مائل. متغير الخط: عادي || وزن الخط: عادي || غامق ||. حجم الخط: (الرقم+الوحدة) || (xx-صغير - xx-كبير)؛ ارتفاع الخط: عادي || (الرقم+الوحدة)؛ عائلة الخط:الاسم،"مزيد من الأسماء"؛ |
تحتوي كل سمة من سمات الخط أيضًا على قيمة افتراضية، ومن المهم نسبيًا تذكر هذه القيم الافتراضية:
| نمط الخط: عادي؛ متغير الخط: عادي؛ وزن الخط: عادي؛ حجم الخط: وراثة؛ ارتفاع الخط: عادي؛ عائلة الخط: وراثة؛ |
في الواقع فإن اختصار الخط هو الذي يتطلب الحذر الأكبر بين هذه الاختصارات، فالإهمال الطفيف قد يسبب بعض العواقب غير المتوقعة، لذلك لا يوافق الكثير من الناس على استخدام اختصار الخط.
ولكن إليك دليلًا صغيرًا، أعتقد أنه سيساعدك على فهم اختصار الخط بشكل أفضل:
نمط القائمة
ولعل السمة الأكثر استخدامًا للقوائم هي:
| نمط القائمة: لا شيء |
يقوم بمسح جميع أنماط القائمة الافتراضية، مثل الأرقام أو النقاط.
يحتوي نمط القائمة أيضًا على ثلاث سمات:
| نوع القائمة: لا شيء ||. دائرة ||. علامة عشرية || موضع نمط القائمة: داخل || خارج || صورة نمط القائمة: (url) || |
السمات الافتراضية لنمط القائمة هي كما يلي:
| نمط القائمة: قرص خارج لا شيء |
تجدر الإشارة إلى أنه إذا تم تعريف الصور بنمط القائمة، فإن أولوية الصور تكون أعلى من نوع نمط القائمة، على سبيل المثال:
| نمط القائمة: دائرة داخل عنوان url(../img.gif) |
في هذا المثال، إذا كان img.gif موجودًا، فلن يتم عرض رمز الدائرة الذي تم تعيينه مسبقًا.
ملاحظة: في الواقع، يحتوي list-style-type على العديد من الأنماط المفيدة، ويمكن للطلاب المهتمين الرجوع إلى: https://developer.mozilla.org/en/CSS/list-style-type.
نصف قطر الحدود (نصف قطر الزاوية)
Border-radius هي سمة تمت إضافتها حديثًا في CSS3، وتُستخدم لتنفيذ الحدود الدائرية. العيب الحالي لهذه السمة هو أن كل متصفح يدعمها بشكل مختلف. IE لا يدعمها بعد. يحتاج Gecko (firefox) وwebkit (safari/chrome) إلى استخدام البادئات الخاصة -moz- و-webkit- على التوالي. الأمر الأكثر إرباكًا هو أنه إذا تمت كتابة سمة border-radius لزاوية واحدة بشكل مختلف بين المتصفحين، فسيتعين عليك كتابة عدد كبير من السمات الخاصة:
| -moz-border-radius-bottomleft:6px; -moz-border-radius-topleft:6px; -moz-border-radius-topright:6px; -webkit-border-bottom-left-radius:6px; -webkit-border-top-left-radius:6px; -webkit-border-top-right-radius:6px; نصف القطر الحدودي السفلي الأيسر: 6 بكسل؛ نصف القطر العلوي الأيسر: 6 بكسل؛ نصف القطر من أعلى اليمين إلى الحد: 6 بكسل؛ |
اه، هل أنت مبهور بالفعل؟ هذا فقط لتحقيق الموقف حيث لا يتم تقريب الزاوية اليسرى العليا ويتم تقريب الزوايا الثلاث الأخرى. لذا، بالنسبة لنصف القطر الحدودي، توصي Shenfei بشدة باستخدام الاختصار:
| -moz-border-radius:0 6px 6px; -webkit-border-radius:0 6px 6px; نصف قطر الحدود: 0 6 بكسل 6 بكسل؛ |
هذا أبسط بكثير. ملاحظة: لسوء الحظ، أحدث إصدار من Safari (4.0.5) لا يدعم هذا الاختصار بعد... (شكرًا @fireyy)
هذا كل شيء، هل هناك أي صفات أخرى يمكن اختصارها؟ الجميع مدعوون لمناقشته معا.