---
id: 617b65579ce424bf5f02ca73
title: الخطوة 21
challengeType: 0
dashedName: step-21
---

# --description--

هذه الأيام، هناك نموذجان رئيسيان من الألوان: نموذج <dfn>المضاف</dfn> RGB (red, green, blue) المستخدم في الأجهزة الإلكترونية، و نموذج <dfn>مطروح</dfn> CMYK (cyan, magenta, yellow, black) المستخدم في الطباعة.

في هذا المشروع ستعمل مع نموذج RGB. وهذا يعني أن الألوان تبدأ بالأسود، وتتغير كمستويات مختلفة من الأحمر والأخضر والأزرق. طريقة سهلة لمشاهدة هذا هو باستخدام وظيفة CSS تسمي `rgb`.

أنشئ قاعدة CSS جديدة تستهدف فئة `container` وتعيين `background-color` للأسود باستخدام `rgb(0, 0, 0)`.

# --hints--

يجب عليك استخدام متقي class لاستهداف فئة `container`.

```js
assert(new __helpers.CSSHelp(document).getStyle('.container'));
```

يجب أن يكون لقاعدة CSS مسمى `.container` الخاصية `background-color` بقيمة `rgb(0, 0, 0)`.

```js
assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(0, 0, 0)');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>CSS Color Markers</h1>
    <div class="container">
      <div class="marker one">
      </div>
      <div class="marker two">
      </div>
      <div class="marker three">
      </div>
    </div>
  </body>
</html>
```

```css
h1 {
  text-align: center;
}

--fcc-editable-region--

--fcc-editable-region--

.marker {
  width: 200px;
  height: 25px;
  margin: 10px auto;
}

.one {
  background-color: red;
}

.two {
  background-color: green;
}

.three {
  background-color: blue;
}

```
