فواصل

1. خاصية اللون ليست فقط للنص – Color دعونا نبدأ بأسهل شيئ. خاصية اللون “Color”. خاصية اللون يتم استخدامها علي نطاق واسع من قبل كل مطوري CSS. البعض منكم قد يكون قليل الخبرة قد لا يدرك ذلك , أنه لا يعرف سوي خاصية اللون للنص. شاهد المثال في الأسفل: [codepen_embed height=”368″ theme_id=”4025″ slug_hash=”KurCG” default_tab=”result”]See the Pen <a href=’http://codepen.io/fwasl/pen/KurCG/’>KurCG</a> by mohamed maher (<a href=’http://codepen.io/fwasl’>@fwasl</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed] نلاحظ في CSS, تم استخدام خاصية واحدة للون, في عنصر body, وتعيين اللون الأصفر لكل شيئ في الصفحة , بما في ذلك:

• النص البديل للصورة المفقودة “alt “
• الحدود علي عنصر القائمة”border “
• علامة (نقطة) علي القائمة الغير مرقمة”ul”
• علامة الرقم في القائمة المرتبة “ol”
• عنصر hr

2. خاصية “visibility”يمكن تعيينها إلي “collapse”

• في متصفح كروم, لا يوجد فرق بين القيم collapse, hidden (شاهد تقرير الخطأ والتعليقات).
• في متصفحات Firefox, Opera, IE11 قيمة collapse تعمل كما ينبغي : تتم إزالة الصف والصف أدناه يتحرك صعودا.

 3. خاصية background  لديها قيم جديدة

background: [background-color] [background-image] [background-repeat]
            [background-attachment] [background-position] / [ background-size]
            [background-origin] [background-clip];

.example {
  background: aquamarine url(img.png)
              no-repeat
              scroll
              center center / 50%
              content-box content-box;
}

4. خاصية clip تعمل فقط علي العناصر التي تكون بخاصية position: absolute

.example {
    clip: rect(110px, 160px, 170px, 60px);
}

.example {
    position: absolute;
    clip: rect(110px, 160px, 170px, 60px);
}

5. النسب العمودية تتناسب الي عرض Container وليس الارتفاع.

6. خاصية border

.example {
  border: solid 1px black;
}

.example {
  border-width: 2px 5px 1px 0;
}