arabic-web-development/examples/css-v1.2.arhtml at master · GalaxyRuler/arabic-web-development · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<صفحة>
  <رأس>
    <عنوان>تخطيط متجاوب</عنوان>
    <نمط>
      جسم {
        هامش: 0;
        حشو_كتلي: 2rem;
        حشو_ضمني: حصر(1rem, 3vw, 3rem);
        مقاس_الصندوق: صندوق_الحد;
      }

      قسم.لوحة {
        --فراغ: 1rem;
        عرض: شبكة;
        أعمدة_الشبكة: تكرار(ملاءمة_تلقائية, أدنى_أقصى(محتوى_أدنى, 1fr));
        مناطق_الشبكة: "عنوان عنوان" "جانب محتوى";
        فجوة_صف: حصر(1rem, 2vw, 2rem);
        فجوة_عمود: متغير_نمط(--فراغ);
        هامش_كتلي: 1rem;
        حشو_ضمني: 2rem;
        حجم_كتلي: ملاءمة_المحتوى;
        أدنى_حجم_ضمني: 0;
        مكان_العناصر: تمدد;
      }

      قسم.لوحة:لديه(> .تحذير) {
        حد_ضمني_بداية: 4px صلب أحمر;
        حشو_كتلي: 1rem;
      }

      @وسائط (أدنى_عرض: 50rem) {
        قسم.لوحة {
          تدفق_تلقائي_للشبكة: عمود كثيف;
          أعمدة_تلقائية_للشبكة: ملاءمة_المحتوى(24rem);
          مكان_المحتوى: توزيع_متساو;
        }
      }
    </نمط>
  </رأس>
  <جسم>
    <قسم صنف="لوحة">
      <عنوان_١>لوحة التخطيط</عنوان_١>
      <قسم صنف="تحذير">حالة تحتاج مراجعة</قسم>
      <فقرة>هذا المثال يحافظ على أسماء الأصناف والقيم النصية كما هي.</فقرة>
    </قسم>
  </جسم>
</صفحة>