fix: converted single to triple backticks5 (#36232)

guide/arabic/certifications/responsive-web-design/basic-css/add-a-negative-margin-to-an-element/index.md

@@ -12,10 +12,11 @@ localeTitle: أضف هامشًا سلبيًا إلى عنصر
 
 على سبيل المثال ، لضبط هامش عنصر ما ليكون سلبيًا ، يمكنك استخدام:
 
- `.example { 
- margin: -10px; 
- } 
-` 
+```css
+.example {
+margin: -10px;
+}
+``` 
 
 **لضبط حشو** استخدام **عنصر فردي** : الحشو: `-10` بكسل؛
 

guide/arabic/certifications/responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element/index.md

@@ -6,24 +6,27 @@ localeTitle: إضافة هوامش مختلفة إلى كل جانب من الع
 
 لضبط هوامش استخدام عنصر:
 
- `.example { 
-  margin: 10px; 
- } 
-` 
+```css
+.example {
+  margin: 10px;
+}
+``` 
 
 لتحديد أحجام الهوامش على عنصر من جانب كل جانب ، يمكننا استخدام "الهامش الأعلى" ، "الهامش - اليمين" ، "الهامش السفلي" ، و "الهامش الأيسر". يمكننا استخدام أي من هذه في تركيبة وبأي ترتيب. فمثلا:
 
- `.example { 
-  margin-top: 5px; 
-  margin-bottom: 0px; 
- } 
-` 
+```css
+.example {
+  margin-top: 5px;
+  margin-bottom: 0px;
+}
+``` 
 
 أو:
 
- `.example { 
-  margin-top: 20px; 
-  margin-left: 25px; 
-  margin-right: 5px; 
- } 
-`
+```css
+.example {
+  margin-top: 20px;
+  margin-left: 25px;
+  margin-right: 5px;
+}
+```

guide/arabic/certifications/responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element/index.md

@@ -6,24 +6,27 @@ localeTitle: إضافة الحشو مختلفة لكل جانب من عنصر
 
 لضبط حشو استخدام عنصر ما:
 
- `.example { 
-  padding: 10px; 
- } 
-` 
+```css
+.example {
+  padding: 10px;
+}
+``` 
 
 لتحديد أحجام الحشو على عنصر من جانب كل جانب ، يمكننا استخدام "padding-top" ، و "padding-right" ، و "padding-bottom" ، و "padding-left". يمكننا استخدام أي من هذه في تركيبة وبأي ترتيب. فمثلا:
 
- `.example { 
-  padding-top: 5px; 
-  padding-bottom: 0px; 
- } 
-` 
+```css
+.example {
+  padding-top: 5px;
+  padding-bottom: 0px;
+}
+``` 
 
 أو:
 
- `.example { 
-  padding-top: 20px; 
-  padding-left: 25px; 
-  padding-right: 5px; 
- } 
-`
+```css
+.example {
+  padding-top: 20px;
+  padding-left: 25px;
+  padding-right: 5px;
+}
+```

guide/arabic/certifications/responsive-web-design/basic-css/add-rounded-corners-with-border-radius/index.md

@@ -8,37 +8,42 @@ localeTitle: إضافة زوايا دائرية مع نصف قطر الحدود
 
 لضبط إستدارة استخدام الزاوية:
 
- `.example { 
- border-radius: 5px; 
- } 
-` 
+```css
+.example {
+border-radius: 5px;
+}
+``` 
 
 كلما زاد العدد ، كلما كانت الزاوية أكثر.
 
- `.example { 
- border-radius: 20px; 
- } 
-` 
+```css
+.example {
+border-radius: 20px;
+}
+``` 
 
 باستخدام خاصية نصف قطر الحدود ، يمكننا تقريب أركان العنصر ، سواء كان ذلك يعني تقريب حد ، أو صورة خلفية ، أو لون تعبئة العنصر نفسه. ستلاحظ فقط الزوايا المستديرة الجديدة إذا كان هناك تغيير في اللون!
 
 إذا قمت بتضمين رقم واحد فقط ، فسيتم تطبيق هذا نصف القطر على جميع الزوايا الأربع. إذا كنت تستخدم قيمتين ، ينطبق الأول على الزاويتين اليمنى العلوية والسفلية اليمنى بينما ينطبق الثاني على اليمين العلوي والسفلي الأيسر.
 
- `.exampleTwoValues { 
- border-radius: 5px 10px; 
- } 
-` 
+```css
+.exampleTwoValues {
+border-radius: 5px 10px;
+}
+``` 
 
 إذا كنت تستخدم أربع قيم ، فسيتم تطبيق القيم على أعلى اليمين ، وأعلى اليسار ، وأسفل يمين ، وأسفل اليسار.
 
- `.exampleFourValues { 
- border-radius: 5px 7px 10px 15px; 
- } 
-` 
+```css
+.exampleFourValues {
+border-radius: 5px 7px 10px 15px;
+}
+``` 
 
 إذا كنت تستخدم ثلاث قيم ، فسيتم تطبيق الأول على أعلى اليسار ، والثاني ينطبق على اليمين العلوي AND السفلي الأيسر ، والثالث ينطبق على أسفل اليمين.
 
- `.exampleThreeValues { 
- border-radius: 5px 10px 15px; 
- } 
-`
+```css
+.exampleThreeValues {
+border-radius: 5px 10px 15px;
+}
+```

guide/arabic/certifications/responsive-web-design/basic-css/adjust-the-margin-of-an-element/index.md

@@ -12,8 +12,9 @@ localeTitle: ضبط هامش عنصر
 
 هذا مثال على كيفية كتابته:
 
- `margin: 20px; 
-` 
+```css
+margin: 20px;
+``` 
 
 يمكنك بسهولة تغيير أو تعديل `Margin` `Element` عن طريق تغيير القيمة العددية:
 
@@ -32,6 +33,6 @@ localeTitle: ضبط هامش عنصر
   } 
 ` 
 
- `
-<h2 class="style-margin">Example</h2> 
-`
+```html
+<h2 class="style-margin">Example</h2>
+```

guide/arabic/certifications/responsive-web-design/basic-css/adjust-the-padding-of-an-element/index.md

@@ -12,23 +12,25 @@ localeTitle: ضبط الحشو من عنصر
 
 لضبط Padding of Alement ، استخدم:
 
- `padding: 10px; 
-` 
+```css
+padding: 10px;
+``` 
 
 لإنشاء Padding كطبقة لعنصر محدد ، استخدم:
 
- `.example-Padding { 
-  padding: 10px 
- { 
-` 
+```css
+.example-Padding {
+  padding: 10px
+{
+``` 
 
 لتطبيق هذا الصنف على الحقل المناسب ، استخدم:
 
- `
-<div class="example-Padding"> 
- <p> Example Text </p> 
- </div> 
-` 
+```html
+<div class="example-Padding">
+<p> Example Text </p>
+</div>
+``` 
 
 **لضبط Padding of Alement** ، استخدم:
 

guide/arabic/certifications/responsive-web-design/basic-css/cascading-css-variables/index.md

@@ -12,20 +12,22 @@ localeTitle: المتتالية CSS المتغيرات
 
 ### بناء الجملة
 
- `:root { 
-  --main-bkgnd-color:  #00B8CB; 
- } 
- 
- body { 
-  background-color: var(--main-bkgnd-color); 
-  font-family: 'Raleway', Helvetica, sans-serif; 
- } 
-` 
+```css
+:root {
+  --main-bkgnd-color:  #00B8CB;
+}
+
+body {
+  background-color: var(--main-bkgnd-color);
+  font-family: 'Raleway', Helvetica, sans-serif;
+}
+``` 
 
 التصريح عن المتغير:
 
- `--custom-name: value 
-` 
+```css
+--custom-name: value
+``` 
 
 باستخدام المتغير: `css var(--custom-name)`
 

guide/arabic/certifications/responsive-web-design/basic-css/change-the-color-of-text/index.md

@@ -8,10 +8,12 @@ localeTitle: تغيير لون النص
 
 ### مثال
 
- `color: red; 
-` 
+```
+color: red;
+``` 
 
 ## حل
 
- `<h2 style="color: red;">CatPhotoApp</h2> 
-`
+```
+<h2 style="color: red;">CatPhotoApp</h2>
+```

guide/arabic/certifications/responsive-web-design/basic-css/give-a-background-color-to-a-div-element/index.md

@@ -20,11 +20,11 @@ localeTitle: إعطاء لون الخلفية لعنصر div
 
 يمكنك بعد ذلك إضافة `class` إلى `div` :
 
- `
-<div class="blue-background"> 
-  <p> Example </p> 
- </div> 
-` 
+```html
+<div class="blue-background">
+  <p> Example </p>
+</div>
+``` 
 
 **الطريقة الثانية:**
 
@@ -34,10 +34,10 @@ localeTitle: إعطاء لون الخلفية لعنصر div
 
 (وهذا يعني أنها `class` متكررة لكل عنصر `div` تقوم بإنشائه.)
 
- `
-<style> 
-  div { 
-    background-color: blue; 
-  } 
- </style> 
-`
+```html
+<style>
+  div {
+    background-color: blue;
+  }
+</style>
+```

guide/arabic/certifications/responsive-web-design/basic-css/override-all-other-styles-by-using-important/index.md

@@ -15,8 +15,9 @@ localeTitle: تجاوز كافة الأنماط الأخرى باستخدام ه
 3.  إعلانات معرف
 4.  تصريحات الطبقة
 
- `Here is an example of how to write/apply !important: 
-` 
+```
+Here is an example of how to write/apply !important:
+``` 
 
 المغلق اللون: أسود!
 

guide/arabic/certifications/responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes/index.md

@@ -10,22 +10,22 @@ localeTitle: تجاوز تعريفات الطبقة عن طريق تحديد س
 
 مثال على ذلك هو:
 
- `
-<style> 
-  body { 
-    background-color: black; 
-    font-family: Arial; 
-    color: black; 
-  } 
-  .red-text { 
-    color: red; 
-  } 
-  .blue-text { 
-    color: blue; 
-  } 
- </style> 
- <h1 class="red-text blue-text">Example</h1> 
-` 
+```html
+<style>
+  body {
+    background-color: black;
+    font-family: Arial;
+    color: black;
+  }
+  .red-text {
+    color: red;
+  }
+  .blue-text {
+    color: blue;
+  }
+</style>
+<h1 class="red-text blue-text">Example</h1>
+``` 
 
 في المثال أعلاه ، سيكون نص `Example` باللون الأزرق لأن آخر صف تمت إضافته كان `blue-text` .
 
@@ -33,34 +33,34 @@ localeTitle: تجاوز تعريفات الطبقة عن طريق تحديد س
 
 يمكنك إنشاء سمة `id` عن طريق إضافة الرمز `#` قبل اسم الفئة ، كما هو موضح أدناه:
 
- `
-<style> 
-  #purple-text { 
-    color: purple; 
-  } 
- </style> 
-` 
+```html
+<style>
+  #purple-text {
+    color: purple;
+  }
+</style>
+``` 
 
 هذا مثال يوضح لك كيفية **تجاوز تعريفات Class بواسطة سمات معرف التصميم** :
 
- `
-<style> 
-  body { 
-    background-color: black; 
-    font-family: Arial; 
-    color: black; 
-  } 
-  .red-text { 
-    color: red; 
-  } 
-  .blue-text { 
-    color: blue; 
-  } 
-  #green-color { 
-    color: green; 
-  } 
- </style> 
- <h1 id="green-color" class="red-text blue-text">Example</h1> 
-` 
+```html
+<style>
+  body {
+    background-color: black;
+    font-family: Arial;
+    color: black;
+  }
+  .red-text {
+    color: red;
+  }
+  .blue-text {
+    color: blue;
+  }
+  #green-color {
+    color: green;
+  }
+</style>
+<h1 id="green-color" class="red-text blue-text">Example</h1>
+``` 
 
 سيؤدي ذلك إلى جعل النص `Example` أخضر لأن سمة `id` ستحظى دائمًا بالأسبقية على تعريفات `class` .

guide/arabic/certifications/responsive-web-design/basic-css/override-styles-in-subsequent-css/index.md

@@ -10,19 +10,19 @@ localeTitle: تجاوز الأنماط في CSS لاحقة
 
 فمثلا:
 
- `
-<style> 
-  body { 
-    color: purple; 
-  } 
-  .red-text { 
-    color: red; 
-  } 
-  .blue-text { 
-    color: blue; 
-  { 
- </style> 
-` 
+```html
+<style>
+  body {
+    color: purple;
+  }
+  .red-text {
+    color: red;
+  }
+  .blue-text {
+    color: blue;
+  {
+</style>
+``` 
 
 الآن، عند إنشاء أي نص في `body` ، وسوف يكون لون النص `purple` المسندة إليها.
 
@@ -30,21 +30,21 @@ localeTitle: تجاوز الأنماط في CSS لاحقة
 
 باستخدام التنسيق أعلاه ، سيتجاوز النص أدناه لون الخط `purple` السابق `purple` `red` .
 
- `
-<h1 class="red-text">Example</h1> 
-` 
+```html
+<h1 class="red-text">Example</h1>
+``` 
 
 عندما تريد إضافة عدة فئات ، يمكنك استخدام هذا التنسيق:
 
- `
-<h1 class="class-name1 class-name2 class-name3">Example</h1> 
-` 
+```html
+<h1 class="class-name1 class-name2 class-name3">Example</h1>
+``` 
 
 يمكنك الآن إضافة الفئة الأخيرة التي تم إنشاؤها أعلاه ( `"blue-text"` ) إلى نفس المثال أعلاه لمشاهدة النتائج.
 
- `
-<h1 class="red-text blue-text">Example</h1> 
-` 
+```html
+<h1 class="red-text blue-text">Example</h1>
+``` 
 
 سيؤدي ذلك تلقائيًا إلى اختيار الفصل الأخير الذي تم إنشاؤه في قسم الأنماط ، والذي كان في هذه الحالة هو `"blue-text"` .
 
@@ -52,9 +52,9 @@ localeTitle: تجاوز الأنماط في CSS لاحقة
 
 لذلك ، على سبيل المثال:
 
- `
-<h1 class="blue-text red-text">Example</h1> 
-` 
+```html
+<h1 class="blue-text red-text">Example</h1>
+``` 
 
 سيظل هذا يعرض لون خط `blue` بسبب الترتيب في قسم الأنماط.