تعلم لغة الـ Css الدرس الثالث

في الدرس الثالث من دورة تعلم لغة الـ Css، سأشرح لكم كيفية استخدام الالوان بأكثر من طريقة وربطها بالمحددات، والأشكال التي يمكن صياغة الألوان فيها. وأيضاً، سأشرح لكم كيفية اضافة خلفية من خلال الـ Css، سواء كان لون او صورة.

الألوان في لغة الـ Css

في البداية سأشرح لكم الأشكال التي يمكن من خلالها صياغة الالوان واستخدامها في اكواد الـ Css. تأتي الالوان بأكثر من صغية وفي الصغية الأولى الصيغة النصية، وتعني أسم اللون كالتالي “red,yellow,blue,…”. وبهذه الصيغة يمكنك استخدام الالوان بتحديد بدون تدرجات.

{
color: red;
}

وفي الصغية الثانية “HEX” تستخدم تدرجات ألوان وهي عبارة عن أحرف وارقام بعد اشارة السلم مثل التالي:

{
color: #fff;
background: #c6c6;
}

كما لاحظنا في المثال في الأعلى فإن الالوان قد تكون بهذه الطريقة احرف فقط ومن الممكن ارقام وأحرف او أرقام فقط. ويمكنك تجربة الموقع التالي لفهم الألوان والتدرجات أكثر.

والشكل الثالث هو الـ RGP ويكون عبارة عن محدد لتحديد كثافة اللون بين 0 و 250. ومن خلال الأرقام يمكنك مجز الألوان مع بعضها البعض كما في المثال التالي:

{
background-color:rgb(238, 130, 238);
}

وأخيراً الصيغة الرابعة وهي الـ HSL، والذي يكون عبارة عن ثلاثة أقسام:

1- HUE: تدرج الالوان

2- SATURATION: تشبع الألوان

3- LIGHTNESS: الخفة او الاضاءة

وتكون صيغة الالوان على الشكل التالي:

{
background: hsl(147, 50%, 47%);
}

أشكال الالوان في الـ Css

شكل اللون يعني المكان الذي يأتي فيه والطريقة فمثلا في صفحات الـ Css يكون بالشكل الطبيعي ولكن هناك اختلاف فقط اذا ما تم ادخاله بمحدد style في كود html محدد كم في المثالي التالي:

<b style="color:red;"> هنا النص المراد اظهاره </b>

اضافة خلفية من خلال الـ Css

يمكن اضافة خلفية من خلال اكواد الـ Css بشكل بسيط وسهل جداً, اول طريقة هي من خلال الالوان ويمكنك استخدام اي صيغة من الصيغ الموجودة بالأعلى:

{
background-color: #fff;
background: rgb (255, 0, 0);
}

ويمكن اضافة صورة كخلفية كما في المثال التالي:

{
 background-image: url("https://up.iinkor.com/uploads/thumbs/167564271399530.gif");
}

واذا كانت الصورة صغيرة او عبارة عن باترن وتريد تكرارها في الخلفية يمكنك اضافة خاصية التكرار كالتالي:

 background-image: url("https://up.iinkor.com/uploads/thumbs/167564271399530.gif");
 background-repeat: repeat-y;
}

واذا كنت لا تريد التكرار او تثبيت الصورة استبدل الـ y في repeat-y الى x لتصبح repeat-x.

واذا كنت تريد تثبيت الخلفية لتصبح ثابته مع الصعود والنزول في الصفة يمكن اضافة خاصية attachment باضافة خاصية position معها لتحديد موقعها كما في المثال التالي:

{
  background-position: right top;
  margin-right: 200px;
  background-attachment: fixed;
}

,هنا أحبتي نكون أنهينا درسنا لليوم والذي تم شرح فيه الالوان وصياغتها وكيفية اضافة خلفية من خلال الـ Css، شرح بسيط وان شاء الله ما بتواجهو مشاكل فيه.