Readable CSS

This article needs a technical review. How you can help.

This article needs an editorial review. How you can help.

This translation is incomplete. Please help translate this article from English.

This is the 6th section of the CSS Getting Started tutorial; it discusses the style and grammar of the CSS language itself. You change the way your sample CSS file looks, to make it more readable.

معلومة: CSS مقروء (قابل للقراءة = سهل القراءة)

يمكنك إضافة مساحات فارغة وأيضا تعليقات داخل ملف النمط لجعل الشيفرة البرمجية (code) أكثر قابلية وسهولة للقراءة. أيضا يمكنك تجميع العناصر المختلفة معا عندما تتطابق الخصائص بينهم.

المساحة الفارغة

المساحة الفارغة أوالبيضاء هي عبارة عن مسافات قد تكون مسافة من خطوة واحدة أو من عدة خطوات وقد تكون عبارة عن سطر جديد. يمكنك إضافة المساحات البيضاء إلى ملف النمط الخاص بك لجعله أكثر قابلية وسهولة للقراءة.

في سياق تخطيط وتكوين الصفحة، المساحات الفارغة تكون جزءًا من الصفحة كمسافات بين الأعمدة والسطور أو كهوامش.

يحتوي ملف النمط الخاص بك حاليا على قاعدة واحدة لكل سطر، وعدد أدنى من المساحات الفارغة أو البيضاء. في الأنماط المعقدة سيكون من الصعب قراءة ملف النمط، مما يجعل من الصعب الحفاظ عليها.

التخطيط دائما ما يكون شَخْصِـيًّا، ولكن إذا كان ملف النمط بين مجموعة من الأفراد بصفته جزءً من مشاريع مشتركة، من المحتمل أن تلك المشاريع تحمل اتفاقيات خاصة بها يتم الأعتماد عليها والعمل بها.

 

Examples

بعض الأشخاص يفضلون دمج الخصائص مع بعضها، فقط يقومون بتقسيم الخط عندما يصبح طويلا جدا:

.carrot {color: orange; text-decoration: underline; font-style: italic;}


بعض الناس يفضلون خاصية واحدة لكل سطر:

.carrot
{
color: orange;
text-decoration: underline;
font-style: italic;
}

بعض الأشخاص يستخدمون مسافتين أو أربع أو علامة التبويب الشائعة:

.carrot {
  color: orange;
  text-decoration: underline;
  font-style: italic;
}


(بعض الأشخاص يفضلون جعل كل شيء عموديا  (ولكن تخطيط مثل هذا من الصعب الحفاظ عليه.

.carrot
    {
    color           : orange;
    text-decoration : underline;
    font-style      : italic;
    }

بعض الأشخاص يستخدمون مزيج من المسافات الفارغة أو البيضاء لتعزيز سهولة القراءة.

.vegetable         { color: green; min-height:  5px; min-width:  5px }
.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }

بعض الأشخاص يستخدمون علامة التبويب والبعض الآخر يستخدم فقط المسافات البيضاء.

التعليقات
 

التعليقات في ملف النمط تبدأ بـ «*/» وتنتهي بـ«/*».

يمكنك استخدام التعليقات في ملف النمط الخاص بك لكتابة تعليقات وتعليمات، وأيضا لكتابة تعليمات مؤقتة قد يكون الغرض منها هو اختبار العملية.

التعليق في جزء من النمط، ضع هذا الجزء في تعليق بحيث يتجاهله المتصفح عند قراءة الملف، وكن حذرا في بداية ونهاية التعليق. بقية الأنماط والخصائص يجب أن يكون لها البنية الصحيحة.

Example
/* style for initial letter C in first paragraph */
.carrot {
  color:            orange;
  text-decoration:  underline;
  font-style:       italic;
  }

تجميع العناصر

عندما يكون لمجموعة من العناصر عدد من الخصائص المتشابهة في النمط، يمكنك تجميع العناصر مع الفصل بينهم بعلامة فاصلة. وتـنطبق هذة الخصائص على جميع العناصر المجمعة.
 

في أماكن أخرى من ملف النمط يمكنك أيضا تجميع عدد من العناصر ولكن فرديا، وتطبيق خصائص فردية عليهم.

Example

This rule makes <h1>, <h2>, and <h3> elements the same color.

إنها مناسبة لتحديد اللون لمجموعة من العناصر في مكان واحد، في حالة لابد من تغييرها.

/* color for headings */
h1, h2, h3 {color: navy;}

العمل: إضافة تعليقات و تحسين التخطيط

  1. قم بتعديل ملف النمط الخاص بك، وقم بالتأكد أن لديها هذه القواعد في ذلك (في أي أمر):
    strong {color: red;}
    .carrot {color: orange;}
    .spinach {color: green;}
    #first {font-style: italic;}
    p {color: blue;}
    
  2. جعلها أكثر قابلية للقراءة من خلال إعادة ترتيبها بطريقة منطقية، وذلك من خلال إضافة مساحات بيضاء أو فارغة وأيضا تعليقات مناسبة.
  3. قم بحفظ التعديلات واذهب إلى المتصفح لتشاهد الصفحة للتَّـأكد أنه لا يوجد أي تأثير على ملف النمط من خلال عمله.
    Cascading Style Sheets
    Cascading Style Sheets
تحدي
 

ضع تعليقا يوجد به جزء من ملف النمط الخاص بك، بدون  تغيير أي شيء آخر ، لعمل أول حرف من الوثيقة أحمر اللون.

Cascading Style Sheets
Cascading Style Sheets

(هناك العديد من الطرق لفعل ذلك)

Possible solution

One way to do this is to put comment delimiters around the rule for .carrot:

/*.carrot {
  color: orange;
}*/

Hide solution

See a solution for the challenge.

ما التالي؟

Your sample stylesheet has used italic text and underlined text. The next page describes more ways to specify the appearance of text in your document.

Document Tags and Contributors

 Contributors to this page: atefBB, Muhnad
 Last updated by: atefBB,