ديفكوم- HTML Colors التفاصيل

المقالات

HTML Colors

-

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

جاهزين نبدأ:

يوفر HTML مجموعة من ال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

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

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

Orange

DodgerBlue

MediumSeaGreen

SlateBlue

Gray

LightGray

تمام. نبدأ الان في كيفية تغيير لون الخلفية 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;"

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

الأول: rgb

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

الثاني: keyword

<p style="background-color: red;">
ملاحظة بخلفية حمرا ملاحظة بخلفية حمرا ملاحظة بخلفية حمرا ملاحظة بخلفية حمرا ملاحظة بخلفية حمرا ملاحظة بخلفية حمرا ملاحظة بخلفية حمرا ملاحظة بخلفية حمرا 
</p>

تمام التمام.

اختيار اللون

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

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

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

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

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

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

تمام نفهم الكود.

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

color:ColorNam;

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

style="color:#cc5e4a;"

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

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

يمكن في HTML تغيير لون الإطار ل 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>

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