Readable CSS

Go to Previous Section:
SelectorsThis 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.

Information: Readable CSS

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

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

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

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

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

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

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;}

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

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

Cascading Style Sheets

Cascading Style Sheets

تحدي

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

Cascading Style Sheets

(There is more than one way to do this.)

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.

What next?

Go to Next Section:
Text stylesYour sample stylesheet has used italic text and underlined text. The next page describes more ways to specify the appearance of text in your document.

Readable CSS

Information: Readable CSS

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

التعليقات

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

What next?

Document Tags and Contributors