ديفكوم- الألوان في CSS التفاصيل

المقالات

الألوان في CSS

-

في CSS يتم استخدام قيم اللون لتحديد لون معين. وبشكل عام تُستخدم هذه القيم لتعيين لون ل element مثل (text, background, control,). طبعا اكيد الألوان تستخدم مع أي شيء في صفحة HTML. في هذا الدرس بنوخذ فكره سريعة عن كيف بنغير الألوان في HTML Elements.

جاهزين نبدأ:

يوفر CSS مجموعة من الformats المختلفة للألوان التي يمكن استخدامها

Example	Syntax	Format
p{color:#FF0000;}	#RRGGBB	Hex Code
p{color:#6A7;}	#RGB	Short Hex Code
p{color:rgb(50%,50%,50%);}	rgb(rrr%,ggg%,bbb%)	RGB %
p{color:rgb(0,0,255);}	rgb(rrr,ggg,bbb)	RGB Absolute
p{color:teal;}	aqua, black, etc	keyword

خلونا نفهم الألوان الان في CSS

الألوان في CSS معرفة بالاسم يعني ممكن نستخدم الألوان المعروفة مثل:

Orange

DodgerBlue

MediumSeaGreen

SlateBlue

Gray

تمام. نبدأ الان في كيفية تغيير لون الخلفية Background ل Html control .

مثال ذلك عند صفحة فيها نص بحاجة الى وضع خلفية مختلفة (ملاحظة بخلفية باللون الأحمر)

طيب نشغل Visual Studio Code ونعمل ملف Html جديد، ونضيف الكود التالي واكيد بعدها نخزن الملف باسم بناسبك (اخترنا الاسم Color) :

<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgb(134, 156, 34);">يا هلا فيكم</h1>
<p style="background-color: red;">
ملاحظة بخلفية حمرا ملاحظة بخلفية حمرا ملاحظة بخلفية حمرا ملاحظة بخلفية حمرا ملاحظة بخلفية حمرا ملاحظة بخلفية حمرا ملاحظة بخلفية حمرا ملاحظة بخلفية حمرا 
</p>
</body>
</html>

تمام نشغل الصفحة ونشوف النتيجة:

بتكون النتيجة كالتالي:

نفهم الكود:

الصفحة عبارة عن HTML بسيطة جدا، تحتوي على 2 element الأول باسم <h1> والثاني باسم <p>

تذكير في Html element جميع element في الصفحة لازم يتم اغلاقها بنفس الاسم مع إضافة علامة / عند الاغلاق

مثال:

<h1> </h1>

لتغير الخلفية لأي element في Html بنستخدم الامر التالي:

background-color:ColorName

واكيد طريقة كتابة هذا الامر بتخلف من مكان الى مكان، لاحظ طريقة الكتابة هنا كانت :

style="background-color:red;"

استخدمنا الامر style وذلك بسبب استخدام Inline CSS (استخدام Css ضمني). طبعا اكيد إذا كان استخدام CSS من ملفات خارجية بتكون طريقة الكتابة مختلفة.

في الكود السابق استخدمنا نوعين من الألوان:

الأول: rgb

h1 style="background-color:rgb(134, 156, 34);">يا هلا فيكم</h1>

الثاني: keyword

<p style="background-color: red;">

ملاحظة بخلفية حمرا ملاحظة بخلفية حمرا ملاحظة بخلفية حمرا ملاحظة بخلفية حمرا ملاحظة بخلفية حمرا ملاحظة بخلفية حمرا ملاحظة بخلفية حمرا ملاحظة بخلفية حمرا

</p>

تمام التمام.

اختيار اللون

اختيار اللون سهل جدا، يعمل CSS في معظم البرامج اكمال تلقائي ويمكن الاختيار من الألوان اذا ما كنت عارف شو هو اللون المطلوب. في Visual Studio code يمكن النقر على اللون لعرض الألوان واختيار اللون المطلوب

تغيير لون النص

كيف ممكن نغير لون الكتابة في ملفات باستخدام CSS، الموضوع بسيط جدا. وحتى نفهم الموضوع نطبق مثال:

في نفس الصفحة السابقة نضيف الكود التالي:

<h1 style="color:#cc5e4a;">
يا هلا فيكم
</h1>
<p style="color:#4c7196;">
نورت شاشتنا
</p>
<p style="color:#1a4e31;">
حياكم الله
</p>

شغل الصفحة ونشوف النتيجة:

تمام.

الامر الخاص بتغيير اللون هو:

color:ColorNam;

ومثل ما حكينا استخدمنا الامر

style="color:#cc5e4a;"

لإنو نستخدم inline CSS

استخدمنا النوع: Hex Code

تغيير لون Border ل HTML Element

يمكن في CSS تغيير لون الإطار ل Element

نطبق نفس المثال السابق مع تغيير لون Border ونضيف الكود :

<h1 style="color:#cc5e4a;border:4px solid green">
يا هلا فيكم
</h1>
<h1 style="color:#4c7196;border:8px solid red">
نورت شاشتنا
</h1>
<h1 style="color:#1a4e31;border:6px solids yellow">
حياكم الله
</h1>

شغل الصفحة بتكون النتيجة: